如何确定可能为空的数组的TypeScript类型并适配React组件传参

报错根因 #

你遇到的ts(2322)报错是因为TypeScript对数组类型默认做协变检查，当不可修改组件的data prop只声明了接收Cat[]类型时，TS会认为Dog[]无法赋值给Cat[]，但实际运行时该组件没有严格校验，所以用any可以正常运行。以下是三种可行的解决方案： #

1. 轻量化方案：保留入参类型校验 + 透传时安全断言

这个方案对原有代码改动最小，同时不丢失类型校验能力：

• 首先将你的组件props的data字段明确声明为Cat[] | Dog[]，保留外部传入时的类型校验
• 透传给不可修改的组件时，将data断言为该组件接收的合法类型即可，因为你已经明确运行时不会出现问题
  代码示例：

import { Cat } from './cat-stuff'
import { Dog } from './dog-stuff'

// 先提取不可修改组件的data prop类型，避免硬写
type ThirdPartyCompData = Parameters<typeof ComponentNotModifiableByMe>[0]['data']

export const MyComponent = (props: {
  data: Cat[] | Dog[]
}): JSX.Element => {
  return (
    <ComponentNotModifiableByMe
      data={props.data as ThirdPartyCompData}
    />
  );
}

2. 无断言方案：使用可辨识联合Props

你提到额外传prop不符合最佳实践，其实只要将prop和data做联合类型绑定，就是TS官方推荐的标准写法，完全符合规范，且完美解决空数组无法判断的问题：

type CatProps = {
  kind: 'cat'
  data: Cat[]
}
type DogProps = {
  kind: 'dog'
  data: Dog[]
}
// 组件props是两种类型的联合，TS会自动校验kind和data的匹配关系
type MyComponentProps = CatProps | DogProps

export const MyComponent = (props: MyComponentProps): JSX.Element => {
  // 哪怕data是空数组，也可以通过kind字段完成类型收窄
  if (props.kind === 'cat') {
    // 这里props.data会被自动推导为Cat[]
  } else {
    // 这里props.data会被自动推导为Dog[]
  }

  return (
    <ComponentNotModifiableByMe
      data={props.data}
    />
  );
}

外部调用时的校验逻辑也会自动生效：

// 合法调用
<MyComponent kind="cat" data={[{foo: '1', bar: '2', address: '3', birthday: '4'}]} />
// 合法调用，空数组也支持
<MyComponent kind="dog" data={[]} />
// 报错：kind为dog时不能传Cat类型的data
<MyComponent kind="dog" data={[{foo: '1', bar: '2', address: '3', birthday: '4'}]} />

3. 泛型组件方案

如果你不需要在组件内部区分Cat和Dog类型，只想保留外部传入的类型约束，可以用泛型实现：

type CatOrDog = Cat | Dog
type MyComponentProps<T extends CatOrDog> = {
  data: T[]
}

export const MyComponent = <T extends CatOrDog>(props: MyComponentProps<T>): JSX.Element => {
  return (
    <ComponentNotModifiableByMe
      data={props.data as any}
    />
  );
}

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