Vue3+TS报错：string类型无法赋值给'AOI'|'DIMM'|'FAN'联合类型

核心是TS静态类型检查的规则限制：

• 你定义的组件Prop类型'AOI' | 'DIMM' | 'FAN'是字符串字面量联合类型，属于收窄后的精确类型，TS要求传入值必须严格匹配三个值之一的类型
• 后端接口返回的数据如果没有做精确的类型标注，TS会默认把字符串字段推导为宽泛的string类型。宽泛类型不能直接赋值给窄类型，哪怕你逻辑上确定后端只会返回三个固定值，TS在静态检查阶段感知不到这个运行时约定，就会抛出类型不匹配错误。

按可维护性优先级从高到低排列：

1. 精确标注接口返回类型（推荐首选） #

从数据源层面解决类型问题，先抽离公共的类型定义，同时给接口响应标注对应类型：

// 抽离公共类型，方便全局复用
type HardwareKind = 'AOI' | 'DIMM' | 'FAN'

// 标注接口响应结构
interface DeviceInfoResponse {
  // 其余接口字段...
  kind: HardwareKind
}

// 请求接口时指定响应类型，以axios为例
const { data } = await axios.get<DeviceInfoResponse>('/api/device/info')

组件的Prop定义也复用同一个类型，避免重复硬编码：

import type { PropType } from 'vue'

defineProps({
  kind: { type: String as PropType<HardwareKind>, required: true }
})

这种写法从根源上让TS识别到接口返回的kind字段就是目标联合类型，传值时不会报错，后续如果要改枚举值只需要改一处类型定义即可。

2. 传值时做类型断言（快速修复用） #

如果暂时不需要调整全局接口类型，可以在给组件传参时手动做类型断言，告诉TS当前值符合类型要求：

<HardwareIcon :kind="res.data.kind as HardwareKind" />

注意：这种方式本质是让TS跳过当前位置的类型检查，如果后续后端返回了超出约定的值，TS不会提前预警，只适合临时修复或者你100%确定数据格式不会变的场景

3. 加运行时校验兜底（高可靠场景用） #

如果担心后端迭代时改动返回值没有同步前端，可以加一层运行时校验，既满足TS类型要求，又能兜底异常数据：

// 定义合法值列表，加as const让TS推导出字面量元组类型
const VALID_KIND_LIST = ['AOI', 'DIMM', 'FAN'] as const
type HardwareKind = typeof VALID_KIND_LIST[number]

// 校验返回值是否合法，不合法则给默认值或者抛错
const currentKind = VALID_KIND_LIST.includes(res.data.kind as any)
  ? (res.data.kind as HardwareKind)
  : 'FAN' // 可替换为兜底默认值、错误提示逻辑

经过校验后的currentKind会被TS自动推导为HardwareKind类型，直接传给组件不会有类型报错，同时异常数据也不会导致业务逻辑崩溃。

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