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，不是一个理想的情况！

当可选的泛型参数为void 时，我是否可以不必指定其相关属性来设置我的Props？

Answer 1

你的Props 类型应该是严格联合类型。

import React, { FC } from 'react'

// credits goes https://stackoverflow.com/questions/65805600/type-union-not-checking-for-excess-properties#answer-65805753
type UnionKeys<T> = T extends T ? keyof T : never;
type StrictUnionHelper<T, TAll> =
    T extends any
    ? T & Partial<Record<Exclude<UnionKeys<TAll>, keyof T>, never>> : never;

type StrictUnion<T> = StrictUnionHelper<T, T>

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

type Bike = {
    color: string
}

type BikeShed = {
    model: string
}
const Foo = <T, S = void>(props: Props<T, S>) => {
    const { additionalData } = props // ok, but may be undefined
    const { data } = props; // ok

    return null
}

const bikes: Bike[] = []
const bikeShed = { model: '' }

const component = <Foo<Bike, BikeShed> data={[]} />

Playground

更多关于在 React 中处理 union props 的信息你可以在我的blog找到

更新

你也可以试试typeguards:

import React, { FC } from 'react'

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

type Props<T, S> =
    | WithAdditional<T, S>
    | WithoutAdditional<T>

const hasProperty = <Obj, Prop extends string>(obj: Obj, prop: Prop): obj is Obj & Record<Prop, unknown> =>
    Object.prototype.hasOwnProperty.call(obj, prop)

const withAdditional = <T, S>(obj: Props<T, S>): obj is WithAdditional<T, S> => hasProperty(obj, 'additionalData')

type Bike = {
    color: string
}

type BikeShed = {
    model: string
}
const Foo = <T, S = void>(props: Props<T, S>) => {
    if (withAdditional(props)) {
        const x = props; // WIthAdditional

    } else {
        const y = props; // WIthoutAdditional
    }

    return null
}

const bikes: Bike[] = []
const bikeShed = { model: '' }

const component = <Foo<Bike, BikeShed> data={[]} />

Playground 2

Answer 2

是的 - 您可以检查 S 是否为 void，如果是，则使用条件类型评估为没有附加数据的类型：

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[] }。