Angular中TS2339报错：string类型无title、content属性如何解决

组件类中将posts输入属性的类型声明为string[]，也就是纯字符串构成的数组，数组内的每个元素都是基础字符串类型，不具备title、content属性，因此模板中通过post.title、post.content取值时，TypeScript静态类型检查会判定目标属性不存在，触发TS2339编译报错。

• 首先定义帖子的结构化类型，可在component.ts文件顶部或独立的类型定义文件中补充如下代码：

  // 明确帖子对象的字段结构
  interface Post {
    title: string;
    content: string;
    // 项目中用到的其他字段如id、发布时间等可按需补充
  }
  

• 替换posts属性的类型声明，将原本的string[]改为Post[]，修改后的组件类核心代码：

  export class PostListComponent implements OnInit {
    constructor() { }
  
    ngOnInit(): void {
    }
  
    // 类型替换为Post对象数组，匹配模板的取值逻辑
    @Input() posts: Post[] = [];
  }
  

• 保存文件重新编译，模板内的属性访问即可通过类型校验，对应报错会自动消除。

注意：后续父组件向该组件传入posts值时，需保证数组元素是包含对应字段的对象，不要传入纯字符串数组，避免运行时出现取值异常。

内容的提问来源于stack exchange，提问作者Kazi Akib Javed