JavaScript对象新增属性无法访问 报Property does not exist on type错误

报错原因 #

该错误为TypeScript静态类型校验触发，初始化askNow、shiftLeft对象时，TS自动推导其类型仅包含findingID、findingName两个属性，后续动态添加的findingStatus不在预设类型结构中，访问时就会触发类型不匹配的报错。如果是纯JavaScript运行环境，代码本身没有语法问题，动态添加的属性可以正常访问，不会触发该报错。

解决方案 #

常用解决方式如下：

• 方案1：初始化阶段预先定义类型，声明可选属性
  提前声明对象的完整类型结构，将后续会动态添加的属性设为可选即可：

// 提前定义对象类型
interface SourceItem {
  findingID: number;
  findingName: string;
  findingStatus?: string; // 可选属性，允许后续赋值
}

let askNow: SourceItem = {
  findingID: 234,
  findingName: 'Vulnerabilities',
};

let shiftLeft: SourceItem = {
  findingID: 456,
  findingName: 'shiftVulnerabiities',
};

// 数组也指定类型
let sources: SourceItem[] = [askNow, shiftLeft];

• 方案2：使用类型断言跳过校验
  如果不想提前定义类型，可以在访问属性时用as any断言，临时跳过TS的类型检查：

// 访问属性时添加断言
console.log((cur as any).findingStatus);

// 也可以在定义数组时直接指定为任意类型数组
let sources: any[] = [askNow, shiftLeft];

• 方案3：添加索引签名适配多动态属性场景
  如果后续会添加大量不确定名称的属性，可以给类型加上索引签名，允许任意字符串类型的属性存在：

interface SourceItem {
  findingID: number;
  findingName: string;
  [key: string]: any; // 允许添加任意字符串key的属性
}

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