如何使用TypeScript指定组件props传入数组的长度为2或3？

解决方案 #

你可以通过固定长度元组的联合类型实现编译时的数组长度校验，修改后的类型定义如下：

// 提取单个数据项的公共类型，避免重复定义
type DataItem = {
  key: string
  label: string
  value: number
}

type DownlineProgressBarProps = {
  // 联合两种长度的元组，限定data只能是长度为2或3的数组
  data: [DataItem, DataItem] | [DataItem, DataItem, DataItem]
}

export const DownlineProgress = ({data}: DownlineProgressBarProps) => {
  // 原有的运行时校验可以保留，避免动态数据/类型绕过场景下的问题
  if(data.length > 3 || data.length < 2){
    throw(`DownlineProgress need an array of length 2 or 3. You pass ${data.length}`)
  }
  // 组件逻辑
}

注意事项 #

1. 如果是直接把数组字面量作为props传入组件，TypeScript会自动校验长度，不符合要求会直接抛出类型错误：

// 传长度为5的数组，TS会直接报错
<DownlineProgress data={[
  { key: '1', label: 'Label 1', value: 9 },
  { key: '2', label: 'Label 2', value: 3 },
  { key: '3', label: 'Label 3', value: 3 },
  { key: '4', label: 'Label 4', value: 22 },
  { key: '5', label: 'Label 5', value: 1 }
]} />

2. 如果是提前声明数组变量再传入组件，需要给变量显式指定对应的类型，否则TypeScript会默认把数组推导为任意长度的DataItem[]，无法触发长度校验：

// 显式指定变量类型为长度3的元组，校验通过
const validData: [DataItem, DataItem, DataItem] = [
  { key: '1', label: 'Label 1', value: 9 },
  { key: '2', label: 'Label 2', value: 3 },
  { key: '3', label: 'Label 3', value: 3 },
]
<DownlineProgress data={validData} />

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