如何让TypeScript推断接口类型？联合类型访问属性报错求解

针对你遇到的联合类型无法访问特定属性的问题，有两种常用的类型收窄方案：

1. 使用in操作符进行类型收窄 #

TypeScript支持通过in操作符检查对象是否包含某个属性，以此自动收窄联合类型的范围。直接在代码中判断目标属性是否存在即可：

function MessageComponent({ message, showTimeStamp }: Props) {
  if ('textImg' in message) {
    // 此时TypeScript会自动将message识别为MessageImgTypes类型
    console.log(message.textImg);
  } else {
    // 此时message被识别为MessageTypes类型
    console.log(message.text);
  }
  // ...其他逻辑
}

2. 添加判别式属性（更推荐的规范写法） #

给两个接口添加一个共同的字面量类型属性，作为类型判别标识，这样TypeScript能更精准地进行类型推断，代码可读性也更强：

// 修改接口定义，添加type判别字段
interface MessageTypes {
  type: 'text';
  text: string;
};

interface MessageImgTypes {
  type: 'image';
  text?: string;
  textImg : string;
};

// 此时Props中的message联合类型会自带判别能力
type Props = { message: MessageTypes | MessageImgTypes; showTimeStamp: boolean; }

// 使用时通过判别字段收窄类型
function MessageComponent({ message, showTimeStamp }: Props) {
  switch (message.type) {
    case 'text':
      console.log(message.text);
      break;
    case 'image':
      console.log(message.textImg);
      break;
  }
}

这两种方法都能解决你遇到的类型报错问题，第二种判别式联合的写法更适合复杂场景，便于后续扩展更多消息类型。

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