Angular中访问@Input绑定对象属性报TS2339错误的原因及解决办法

这个报错是TypeScript静态类型检查导致的：

1. 最初你在组件内直接赋值test = {'a':1}时，TypeScript会自动推断test的类型为{a: number}，所以模板中访问test.a匹配类型定义，不会报错。
2. 改为@Input()属性后，你给了默认值test = {}，TypeScript会将test的类型推断为空对象类型{}，该类型定义中没有a属性，因此编译阶段的类型检查就会抛出属性不存在的错误。
3. {{test|json}}能正常输出是因为json管道的入参类型为any，不会触发严格的属性类型校验，所以即使类型推断为{}也能正常运行。

• 方案1：显式定义输入属性的类型（最推荐，保留TS类型校验能力）
  先为test定义明确的接口类型，根据是否必填选择写法：
  如果该属性为父组件必传参数：

// 子组件中定义
interface TestConfig {
  a: number;
  // 可扩展其他你需要的属性
}

@Input() test!: TestConfig;
// !是非空断言，告诉TS该属性一定会被传入，不需要默认值

如果该属性为可选参数，允许默认空对象：

// 子组件中定义
interface TestConfig {
  a?: number;
  // 其他可选属性
}

@Input() test: TestConfig = {};

• 方案2：声明任意属性类型（适用于test结构不固定的场景）
  如果你不确定test后续会传入什么属性，可以用索引签名声明为可接收任意字符串键的对象，跳过具体属性的类型校验：

@Input() test: Record<string, any> = {};
// 或者写法2：@Input() test: {[key: string]: any} = {}

• 方案3：模板中使用可选链访问（快速修复，无需修改TS代码）
  直接修改模板中的属性访问写法，用可选链操作符?.访问a属性，TS会自动跳过该属性的存在性校验：

{{test?.a}}

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