Angular5(TypeScript)中如何正确初始化接口空对象？

我完全懂你的痛点——用article: Article = {} as Article;这种类型断言的方式，本质上只是让TypeScript在编译阶段认为这个空对象符合Article接口，但运行时它还是一个没有任何属性的空对象，所以用article["something"]访问属性时自然会失败。

下面给你几个实用的解决方案，能帮你得到一个真正包含接口所有属性的初始化对象：

1. 手动给所有属性设置默认值 #

这是最直接的方式，按照Article接口的定义，给每个属性都赋予合适的默认值：

export interface Article { 
  slug: string; 
  title: string; 
  description: string; 
  body: string; 
  tagList: string[]; 
  // 其他接口属性...
}

// 初始化对象
article: Article = {
  slug: '',
  title: '',
  description: '',
  body: '',
  tagList: []
  // 其他属性对应设置默认值，比如数字类型设为0，布尔类型设为false等
};

这样初始化后，对象就拥有了接口定义的所有键，不管是用点语法article.slug还是索引语法article["slug"]都能正常访问，同时完全符合TypeScript的类型检查要求。

2. 封装工厂函数统一初始化 #

如果你的项目中有多个地方需要初始化Article对象，建议把初始化逻辑封装成一个工厂函数，避免重复代码，后期维护也更方便：

export interface Article { 
  slug: string; 
  title: string; 
  description: string; 
  body: string; 
  tagList: string[]; 
  // 其他接口属性...
}

function createEmptyArticle(): Article {
  return {
    slug: '',
    title: '',
    description: '',
    body: '',
    tagList: []
    // 其他属性对应设置默认值
  };
}

// 使用工厂函数初始化
article: Article = createEmptyArticle();

后续如果Article接口有属性增减，只需要修改这个工厂函数即可，不用逐个修改所有初始化的地方。

为什么{} as Article行不通？ #

再啰嗦一句：TypeScript的类型断言（as关键字）只是编译阶段的类型提示，不会在运行时为对象添加任何实际的属性。所以运行时这个对象还是{}，自然找不到你要访问的键。

内容的提问来源于stack exchange，提问作者Alex