typescript - 创建多个通用类型的交集类型

Question

我一直在大量阅读可变参数类型和 TypeScript 中的一些新元组内容，但我无法确定鉴于当前的语言能力，我试图完成的事情是否根本不可能。

当前 API 的确切问题可以在这里看到:

export type Themed<T> = { theme: T };

export type ThemedStyleAugmentationFn<P, T> = (
  allProps: Partial<P> & Themed<T>
) => string;

export function augmentComponent<
  P,
  TA extends T,
  C extends keyof JSX.IntrinsicElements | React.ComponentType<any>,
  T extends object,
  O extends object = {},
  A extends keyof any = never
>(
  styledComponent: StyledComponent<C, T, O, A>,
  styleAugmentation: ThemedStyleAugmentationFn<P, TA>
): StyledComponent<C, T, O & Partial<P>, A> {
  const augmented = styled(styledComponent)`
    ${styleAugmentation}
  `;

  return augmented as StyledComponent<C, T, O & Partial<P>, A>;
}

export function multiAugment<
  P1 extends {},
  TA1 extends T,
  P2 extends {},
  TA2 extends T,
  C extends keyof JSX.IntrinsicElements | React.ComponentType<any>,
  T extends object,
  O extends object = {},
  A extends keyof any = never
>(
  styledComponent: StyledComponent<C, T, O, A>,
  styleAugmentations: [ThemedStyleAugmentationFn<P1, TA1>, ThemedStyleAugmentationFn<P2, TA2>]
): StyledComponent<C, T, O & Partial<P1 & P2>, A> {
  const augmented = styled(styledComponent)`
    ${styleAugmentations}
  `;

  return augmented as StyledComponent<C, T, O & Partial<P1 & P2>, A>;
}

在augmentComponent签名的重要部分在这里:O & Partial<P> .

在multiAugment明确采用两个元组 ThemeStyleAugmentationFun它在这里:O & Partial<P1 & P2>

我希望能够编写一个 multiAugment 版本，它可以采用任意的 AugmentationFn 列表并将它们联合在一起，以便支持任何元数。可能返回 O & Partial<P1 & P2 & P3 ... & P100> 版本的东西例如。

如果可能的话，我想避免需要大量的函数重载来支持它，因为我可以继续编写增加长度的 Tupled 版本。

Answer 1

我不能确定，因为我没有安装你正在使用的库，但也许你可以这样做:

type PfromSA<SA extends Array<ThemedStyleAugmentationFn<any, any>>>
  = { [K in keyof SA]: SA[K] extends ThemedStyleAugmentationFn<infer P, any> ? (x: P) => void : never } extends
  { [k: number]: (x: infer P) => void } ? P : never;

type SAExtendsTProperly<SA extends Array<ThemedStyleAugmentationFn<any, any>>, T>
  = { [K in keyof SA]: SA[K] extends ThemedStyleAugmentationFn<any, infer U> ? [U] extends [T] ? SA[K] : ThemedStyleAugmentationFn<any, T> : never }

export function multiAugment<
  SA extends Array<ThemedStyleAugmentationFn<any, any>>,
  C extends keyof JSX.IntrinsicElements | React.ComponentType<any>,
  T extends object,
  O extends object = {},
  A extends keyof any = never
>(
  styledComponent: StyledComponent<C, T, O, A>,
  ...styleAugmentations: SA & SAExtendsTProperly<SA, T>
): StyledComponent<C, T, O & Partial<PfromSA<SA>>, A> {
  const augmented = styled(styledComponent)`
    ${styleAugmentations}
  `;

  return augmented as StyledComponent<C, T, O & Partial<PfromSA<SA>>, A>;
}

这个想法是你使用 generic rest parameter为你的styleAugmentations参数(在上面的示例中，我将其设为剩余参数而不是元组；TypeScript 不会从数组文字中推断出元组类型，但它会从剩余参数中推断出元组类型。如果需要数组文字，则需要断言或以其他方式诱使编译器将其解释为元组)。

此类型参数 SA是 ThemedStyleAugmentationFn<any, any> 的数组.然后是类型函数PfromSA<SA>使用 type inference in conditional types计算您想要的 P 的交集来自 SA 的类型.和类型函数 SAExtendsTProperly<SA>做类似的事情来确保每个元素的 ThemedStyleAugmentationFn<P, TA>有TA正确扩展T (因为 ThemedStyleAugmentationFn<P, TA> 在 TA 中可能是不变的，您不能只确定 SA extends ThemedStyleAugmentationFn<any, T> ；您必须遍历元组并为每个元素获取 TA)。

这应该如您所愿地工作，但同样，如果没有更多独立的代码，我无法确定。

希望对你有帮助。祝你好运。