Angular 5/TypeScript报错：类型'{}'不存在属性'heading'

我之前也踩过这个坑，本质是TypeScript的严格类型检查在起作用——你定义的函数返回类型{ [key: string]: any }是索引签名类型，它告诉编译器这个对象可以有任意字符串类型的键，但具体包含哪些属性是不确定的。所以当你在HTML里访问myObj.heading时，TypeScript没法确认这个属性确实存在，就抛出了那个错误。

下面给你几个可行的解决方案：

1. 定义明确的接口/类型别名（推荐） #

这是最规范的做法，能让代码的类型结构更清晰，也方便后续维护：

// 先定义对象的类型结构
interface TestObject {
  heading: string;
  // 在这里添加其他需要的属性，可选属性用?标记，比如：
  // subTitle?: string;
}

// 函数返回这个明确的类型
getTestObject(): TestObject {
  // 直接返回符合接口的对象即可
  return { 
    heading: 'My heading', 
    // 其他属性...
  };
}

如果需要先声明空对象再赋值，可以用类型断言：

getTestObject(): TestObject {
  let myObj = {} as TestObject;
  myObj.heading = 'My heading';
  // 赋值其他属性...
  return myObj;
}

2. 扩展索引签名，明确指定存在的属性 #

如果不想单独定义接口，可以直接在返回类型里同时声明索引签名和具体属性：

getTestObject(): { heading: string; [key: string]: any } {
  let myObj = {};
  myObj = { 'heading': 'My heading', /* 其他属性 */ };
  return myObj as { heading: string; [key: string]: any };
}

这样既保留了“可以有任意额外属性”的灵活性，又告诉编译器heading属性一定存在。

3. 让TypeScript自动推断返回类型 #

如果你不需要手动指定返回类型，可以直接省略函数的返回类型标注，让TypeScript根据你返回的对象自动推断类型：

getTestObject() {
  return { 
    heading: 'My heading', 
    /* 其他属性 */ 
  };
}

这种方式最简单，TypeScript会自动识别返回对象包含heading属性，HTML里访问就不会报错了。

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