TypeScript中访问联合类型对象属性报错的解决办法

你的代码与报错 #

代码：

interface NameHolder {
  name: string
}

type Compound = string | NameHolder

function calc_it(): Compound { //存在多个此类函数
  return { name: 'daniel' }
}

const ans = calc_it()
console.log(ans.name)

报错：

"Property 'name' does not exist on type 'Compound'.

你已经明确报错原因：ans属于Compound联合类型，既可能是string，也可能是带name属性的NameHolder对象，编译器无法确保ans.name的访问合法性。

以下是你询问的两种解决方式：

方式一：添加类型断言 #

直接在访问name前给ans添加类型断言，强制告诉编译器它是NameHolder类型：

console.log((ans as NameHolder).name)

⚠️ 注意：这种方式是让编译器信任你的判断，如果运行时ans实际是string，会抛出Cannot read properties of undefined (reading 'name')错误。如果要更安全，建议用类型守卫先做判断：

if (typeof ans !== 'string') {
  console.log(ans.name)
}

这属于类型守卫逻辑，比断言更安全，同样能消除报错。

方式二：全局放宽检查规则 #

可以通过修改tsconfig.json的配置来调整类型检查严格程度：

1. 关闭全局严格模式（最直接，但会同时关闭其他严格检查项）：

{
  "compilerOptions": {
    "strict": false
  }
}

2. 局部临时屏蔽报错：
   如果不想修改全局配置，也可以在报错代码行上方加注释单独屏蔽：

// @ts-ignore
console.log(ans.name)

这种方式仅对当前行生效，不会影响其他代码的检查规则。

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