Angular SEO服务报错：updateTag参数类型不兼容求助

错误原因 #

TypeScript 对 socialTags 数组的类型推断导致类型不匹配：数组内元素部分带 name 属性、部分带 property 属性，TypeScript 会自动为每个元素添加可选的 undefined 类型的另一属性（比如带 name 的元素会被推断为 {name: string; content: string; property?: undefined}），但 MetaDefinition 要求所有属性值必须是 string 类型，不允许 undefined，因此触发类型错误。

解决方案 #

方案一：显式指定数组类型（推荐） #

直接将 socialTags 数组的类型声明为 MetaDefinition[]，强制 TypeScript 按照 Angular Meta 服务的类型约束校验元素：

socialTags(action:string,pageTagContent:PageTagContent) {
  const socialTags: MetaDefinition[] = [
    {name:"twitter:title", content: pageTagContent.pageTitle},
    {name:"twitter:description", content: pageTagContent.description},
    {name:"twitter:image", content: pageTagContent.image},
    {name:"twitter:card", content: pageTagContent.imageLarge},
    {property:'og:title', content: pageTagContent.pageTitle},
    {property:'og:image', content: pageTagContent.image}
  ];

  if(action === 'update'){
    socialTags.forEach(obj => this.meta.updateTag(obj));
  }else{
    // 其他逻辑
  }
}

方案二：使用类型断言（临时应急） #

如果不想修改数组类型声明，可在调用 updateTag 时为元素添加类型断言：

if(action === 'update'){
  socialTags.forEach(obj => this.meta.updateTag(obj as MetaDefinition));
}

说明 #

显式指定数组类型是更规范的做法，能从根源避免类型推断带来的问题，同时让代码意图更清晰。

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