TypeScript函数返回多接口联合类型时出现语法错误如何解决

错误原因 #

你遇到的是TypeScript静态类型校验的标准报错：当变量被定义为联合类型A | B时，TypeScript默认仅允许访问两个类型共有的属性。a仅在接口A中定义、接口B不存在该属性，因此直接访问x.a会触发类型错误。

解决方案 #

1. 类型断言（适合明确知道返回值类型的场景） #

如果你确定本次调用c返回的一定是A类型的实例，可以直接用类型断言覆盖TS的默认推导：

// 访问时断言
console.log((x as A).a)

// 或者定义变量时直接断言
const x = c({a: 'a'}) as A
console.log(x.a)

2. 类型守卫（最安全的通用方案） #

新增类型判断逻辑，TypeScript会自动收窄变量的类型范围，不会引入运行时风险：

// 定义类型守卫函数
function isA(target: A | B): target is A {
  return 'a' in target
}

const x = c({a: 'a'})
if (isA(x)) {
  // 进入此分支时TS会自动识别x为A类型
  console.log(x.a)
}

如果不想单独写守卫函数，也可以直接在判断逻辑里用in操作符：

if ('a' in x) {
  console.log(x.a)
}

3. 改造函数为泛型（适合入参和返回值类型一致的场景） #

如果你的函数c逻辑就是返回传入的参数，可以把函数改造成泛型，让TS自动推导返回值类型，不需要写死联合类型：

const c = <T>(params: T): T => {
  return params
}

const x = c({a: 'a'})
// 此时x的类型自动推导为{ a: string }，可以直接访问a属性
console.log(x.a)

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