TypeScript数组元素赋值不符合接口定义时未报错的解决方法

你遇到的问题是因为TypeScript的类型检查规则未严格启用，导致数组内的对象没有被正确校验。以下是两种解决方法：

1. 开启严格模式（推荐） #

在项目的tsconfig.json里，将strict选项设为true。这会启用所有严格类型检查规则，包括数组元素的类型校验，此时数组中不符合User接口的对象会立刻报错。

示例配置片段：

{
  "compilerOptions": {
    "strict": true,
    // 其他编译配置...
  }
}

2. 显式校验单个元素 #

如果不想全局开启严格模式，可以通过两种方式强制校验数组内的对象：

• 类型断言：给数组内的对象加上as User断言，TypeScript会立刻检查该对象是否符合接口定义：

  const test2: User[] = [
    {
      username: 'dog',
      fullname: 'dog',
      age: 'i dont know'
    } as User // 这里会触发类型不匹配错误
  ];
  

• 先声明单个变量：先把数组元素赋值给标注了User类型的变量，提前触发类型检查：

  const userItem: User = {
    username: 'dog',
    fullname: 'dog',
    age: 'i dont know' // 此处直接报错
  };
  const test2: User[] = [userItem];
  

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