TypeScript如何定义可选第二个泛型参数合并相似类型

完全可以把你写的两个类型合并为单个泛型，支持传入/不传入第二个泛型参数的两种场景，注意TypeScript没有直接在泛型名后加?标记可选的语法，通过默认值+条件类型就能实现需求。

最终实现代码 #

import { VariantProps } from "@stitches/core";

export type VariantOption<
  Component extends { [key: symbol | string]: any },
  VariantName extends keyof VariantProps<Component> | never = never
> = VariantName extends never
  ? Extract<VariantProps<Component>, string>
  : Extract<VariantProps<Component>[VariantName], string>;

实现说明 #

• 给第二个泛型VariantName设置默认值never作为判断标记，同时扩展泛型约束允许接收never类型
• 通过条件类型判断当前传入的VariantName是否为默认的never：
  • 如果是，说明调用时没有传第二个参数，走原Variants类型的逻辑，直接提取VariantProps<Component>里的字符串类型
  • 如果不是，说明传入了合法的变体名，走原VariantOption的逻辑，索引取对应变体的属性值后提取字符串类型
• 选never作为默认标记是因为实际使用中变体名都是组件变体对象的键，均为字符串/数字字面量类型，不可能传入never作为合法参数，不会出现逻辑冲突。

使用示例 #

// 等价于原VariantOption：获取Button组件size属性的可选值类型
type ButtonSize = VariantOption<typeof Button, "size">;

// 等价于原Variants：获取Button组件所有变体的联合类型
type AllButtonVariants = VariantOption<typeof Button>;

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