TypeScript 的可选泛型类型和相应参数

Question

我有以下带有通用参数的 React 功能组件：

type Props<T, S> = {
  data: T[]
  additionalData: S
}

function Component<T, S = void>({
 ....
 

您可以按如下方式使用它：

<Component<Bike, BikeShed> data={bikes} additionalData={bikeShed} />

由于第二个通用参数是可选的，因此您必须按如下方式使用它：

<Component<Car> data={cars} additionalData={undefined} />

现在问题来了。有没有办法省略，additionalData={undefined}因为这里显然没有使用它。

我尝试的是这样的：

type Props<T, S = void> = {
  data: T[]
  additionalData?: S
}

但它实际上改变了S，S | undefined这不是一个理想的情况！

Props当可选通用参数为 时，我可以以不必指定其相关属性的方式设置吗void？

Answer 1

是的 - 您可以检查 S 是否为空，如果是，则使用条件类型评估为没有 extraData 的类型：

type BaseProps<T> = { data: T[] };
type PropsWithAdditionalData<T, S> = BaseProps<T> & { additionalData: S };
type Props<T, S = void> = S extends void ? BaseProps<T> : PropsWithAdditionalData<T, S>;

const hasAdditionalData = <T, S>(props: BaseProps<T> | PropsWithAdditionalData<T, S>): props is PropsWithAdditionalData<T, S> => {
  return !!(props as unknown as PropsWithAdditionalData<T, S>).additionalData;
}

function Component<T, S = void>(props: Props<T, S>) {
  if (hasAdditionalData<T, S>(props)) {
    return <div>{props.additionalData}</div>;
  }
  return <div>{props.data}</div>;
}

type Car = { id: number };
const cars = [{ id: 1 }, { id: 2 }];

const noAdditionalData = <Component<Car> data={cars} />;
const additionalData = <Component<Car, number> data={cars} additionalData={1} />;

S extends void检查类型 S 是否可分配给 void （这是默认情况），如果是，则返回{ data: T[] }。