TypeScript联合类型参数访问属性报错问题求助

错误原因 #

你的参数option是string | Details联合类型，TypeScript的类型检查会要求你访问的属性必须在联合类型的所有成员上都存在。由于string类型没有name属性，直接访问option.name时，TypeScript无法确保当前option一定是包含name的Details对象，因此触发类型错误。

修复方法 #

1. 使用typeof类型守卫（最适合原始类型+对象的联合） #

通过typeof判断参数是否为string，剩余分支会被TypeScript自动推断为Details类型，此时可以安全访问name属性：

interface Details {
  name: string;
  // 可添加其他属性
}

function handleOption(option: string | Details) {
  if (typeof option === 'string') {
    // 处理string类型的逻辑
    console.log('传入的是字符串:', option);
  } else {
    // 此处TypeScript已推断option为Details类型
    console.log('Details的name属性:', option.name);
  }
}

2. 自定义类型守卫（适合复杂对象场景） #

如果Details有多个独特属性，可以写一个自定义类型守卫函数，明确判断参数类型：

interface Details {
  name: string;
  id: number;
}

function isDetails(obj: unknown): obj is Details {
  return typeof obj === 'object' && obj !== null && 'name' in obj && 'id' in obj;
}

function handleOption(option: string | Details) {
  if (isDetails(option)) {
    console.log('Details的name:', option.name);
  } else {
    // 处理string类型逻辑
  }
}

3. 类型断言（仅在确定运行时类型时使用） #

如果你能100%保证当前option是Details类型，可以用类型断言跳过检查，但这种方式会绕过TypeScript的类型校验，存在运行时报错风险，不推荐随意使用：

function handleOption(option: string | Details) {
  const detailsOption = option as Details;
  console.log(detailsOption.name);
}

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