TypeScript遍历对象报错：无string类型索引签名，Angular配置排查

报错信息 #

TypeScript 抛出两个错误：

• 元素隐式拥有 "any" 类型，因为类型为 "string" 的表达式不能用于索引类型 "TestObject"
• 类型 "TestObject" 上不存在使用类型为 "string" 的参数的索引签名

问题描述 #

我编写了一段在TypeScript中遍历对象的代码，它在StackBlitz上能正常运行，但在本地VSCode的Angular项目里会触发上述错误。我知道类似问题可以通过新增类型或断言为any解决，但由于StackBlitz能正常运行，我怀疑是项目配置的问题，不知道该从何排查。

相关代码 #

HelloComponent 类代码

export class HelloComponent {
  @Input() name: string;
  myTestObject: TestObject = {
    id: 1,
    name: 'Bob',
    age: 40,
    gender: 'male',
  };
  constructor() {
    this.iterateThroughObject();
  }
  iterateThroughObject(): void {
    Object.keys(this.myTestObject).forEach((property) => {
      console.log(this.myTestObject[property]);
    });
  }
}

TestObject 接口定义

export interface TestObject {
  id: number;
  name: string;
  age: number;
  gender: string;
}

疑问与配置文件 #

是不是tsconfig.json的配置导致的差异？附上我的配置文件：

/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitOverride": true,
    "noPropertyAccessFromIndexSignature": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2020",
    "module": "es2020",
    "lib": [
      "es2020",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  }
}

问题原因与解决办法 #

确实是tsconfig.json的配置差异导致的：

1. 核心差异点：你本地项目开启了strict: true（启用全套严格类型检查规则，包括noImplicitAny），并且单独开启了noPropertyAccessFromIndexSignature: true——这个规则会禁止用索引访问方式（obj[key]）访问未定义索引签名的对象属性。而StackBlitz默认配置通常不会开启这么严格的检查，或者关闭了noPropertyAccessFromIndexSignature。

2. 两种解决路径：

   • 路径一（推荐，保留类型安全）：
     • 对遍历的属性名进行类型断言，确保它是TestObject的合法键：

       Object.keys(this.myTestObject).forEach((property) => {
         console.log(this.myTestObject[property as keyof TestObject]);
       });
       

     • 或者给TestObject接口添加索引签名，明确允许字符串索引：

       export interface TestObject {
         id: number;
         name: string;
         age: number;
         gender: string;
         [key: string]: number | string;
       }
       

   • 路径二（降低检查严格度）：
     如果不想修改代码，可以调整tsconfig.json的配置：
     • 将noPropertyAccessFromIndexSignature设置为false
     • 或者全局关闭严格检查（不推荐，会丢失类型安全保障）：将strict设置为false

内容的提问来源于stack exchange，提问作者Tuan-Dat Ho