TypeScript多类型联合场景下如何判断某类型是否包含指定属性？

问题根源 #

• TypeScript 属于编译期类型系统，typeA/typeB/typeC 都是仅存在于编译阶段的类型定义，会在编译为 JS 后被完全抹除，因此无法作为运行时运算符instanceof的入参使用。
• 联合类型typeA | typeB | typeC默认只能直接访问所有类型共有的属性，name仅存在于typeA中，因此直接访问post.name会触发类型报错。

解决方案 #

方案1：用in运算符做即时类型收窄 #

直接通过'name' in post判断属性是否存在，TypeScript 会自动将满足条件的分支中的post类型收窄为typeA，可直接访问name属性：

// 渲染逻辑修改为
return(
  {post && 'name' in post && post.name && component}
)

注：先判断post存在是为了兼容post为undefined的场景，如果post是必传属性可以省略该判断。

方案2：自定义类型守卫（适合多场景复用） #

如果需要在多处判断typeA类型，可以封装类型谓词函数做统一的类型收窄：

// 定义类型守卫
function isTypeA(post: typeA | typeB | typeC): post is typeA {
  return 'name' in post
}

// 渲染逻辑中使用
return(
  {post && isTypeA(post) && post.name && component}
)

如果需要更严格的类型校验，可在类型判断逻辑中补充typeof post.name === 'xxx'的属性类型校验，避免其他类型意外携带同名属性导致的判断误差。

内容的提问来源于stack exchange，提问作者Bon Andre Opina