TypeScript类型错误：类型'string | boolean | string[]'不存在属性'includes'——如何检查Question对象的answer属性中是否包含指定选项

这个类型错误的根源在于你的Question['answer']是一个联合类型：string | boolean | null | string[]，只有string[]类型拥有includes方法，其他类型（string、boolean、null）都不具备这个方法，所以TypeScript会抛出类型检查错误。

我们可以通过类型守卫先缩小answer的类型范围，再针对不同类型做对应的存在性判断，下面是两种可行的实现方式：

方式一：封装辅助函数（推荐） #

这种方式让代码更清晰易维护，也方便复用：

// 定义辅助函数，专门处理选项是否存在于answer中的判断
const isOptionInAnswer = (answer: Question['answer'], option: string | boolean): boolean => {
  // 如果answer是null，直接返回false（未作答状态）
  if (answer === null) {
    return false;
  }

  // 如果是数组类型，直接使用includes检查
  if (Array.isArray(answer)) {
    return answer.includes(option.toString());
  }

  // 如果是单个值（string或boolean），转成字符串后比较是否匹配
  return answer.toString() === option.toString();
};

然后在你的Checkbox组件中使用这个函数：

<Checkbox checked={isOptionInAnswer(question.answer, option)} />

方式二：直接在JSX内做类型判断 #

如果不想额外封装函数，也可以直接在JSX中内联类型判断：

<Checkbox 
  checked={
    question.answer === null 
      ? false 
      : Array.isArray(question.answer)
        ? question.answer.includes(option.toString())
        : question.answer.toString() === option.toString()
  } 
/>

关键细节说明： #

• 类型守卫的作用：Array.isArray(answer)是TypeScript认可的类型守卫，当这个条件为真时，TypeScript会自动将answer的类型缩小为string[]，此时调用includes就不会有类型错误了。
• 处理单个值的情况：对于string或boolean类型的answer，我们将其与选项都转成字符串后比较，确保无论是字符串选项还是布尔值选项都能正确匹配。
• null的处理：当answer为null时，说明用户还未作答，直接返回false即可。

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