TypeScript中联合类型参数无法访问接口属性的解决方法问询

这个问题在TypeScript里太常见啦——联合类型里混了原始类型和对象类型，直接访问对象属性肯定会触发类型检查报错，毕竟string和number根本没有name属性嘛。下面给你几种靠谱的实现思路，按需选就行：

1. 类型守卫（最推荐：保证类型安全） #

TypeScript支持通过类型守卫来缩小联合类型的范围，让编译器明确当前代码分支里的具体类型。

方式一：用typeof判断原始类型 #

先把string/number类型的情况处理掉，剩下的就会被自动推断为IUser类型：

type Value = string | number
interface IUser { name: string, id: string }
export type IGlobalUser = Value | IUser;

function foo(user: IGlobalUser) {
  // 先处理原始类型的逻辑
  if (typeof user === 'string' || typeof user === 'number') {
    alert(`Received primitive value: ${user}`);
    return;
  }
  // 到这里，TS已经确定user是IUser类型了
  alert(user.name);
}

方式二：自定义类型守卫函数 #

如果判断逻辑更复杂，或者想让类型检查逻辑更清晰，可以写一个自定义守卫函数：

type Value = string | number
interface IUser { name: string, id: string }
export type IGlobalUser = Value | IUser;

// 自定义类型守卫，告诉TS符合条件的参数是IUser类型
function isUser(user: IGlobalUser): user is IUser {
  return typeof (user as IUser).name === 'string' && typeof (user as IUser).id === 'string';
}

function foo(user: IGlobalUser) {
  if (isUser(user)) {
    // 这里user被推断为IUser类型
    alert(user.name);
  } else {
    // 这里是string/number类型的逻辑
    alert(`Received value: ${user}`);
  }
}

2. 类型断言（谨慎使用：跳过类型检查） #

如果你100%确定传入的参数一定是IUser类型，可以用类型断言直接告诉TS参数的类型，但这种方式会跳过类型检查，传入错误类型会导致运行时错误：

function foo(user: IGlobalUser) {
  alert((user as IUser).name);
}

3. 可选链+空值合并（简洁容错） #

如果只是想避免报错，同时优雅处理属性不存在的情况，可以用可选链操作符?.配合空值合并??：

function foo(user: IGlobalUser) {
  // 如果user是IUser则取name，否则显示默认文本
  alert(user?.name ?? 'No user name available');
}

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