将元组联合类型转为可自动推断的React组件Props类型

要实现无需手动传泛型、自动根据属性值推断类型的需求，我们可以直接将元组联合转换为对应的对象联合类型，利用TypeScript的联合类型自动收窄特性完成推断：

1. 转换元组联合为对象联合 #

先定义类型工具，把元组结构转换成目标对象结构：

type Union = [1, "one"] | [1, "first"] | [2, "two"]

// 将元组转换为匹配的对象类型
type TupleToObject<T> = T extends [infer NumberVal, infer WordVal] 
  ? { number: NumberVal; word: WordVal } 
  : never;

// 生成最终的组件Props联合类型
type ComponentProps = TupleToObject<Union>;

2. 定义React组件 #

直接使用上述联合类型作为组件的Props类型：

import React from 'react';

const Component = (props: ComponentProps) => {
  return <div>{props.number}: {props.word}</div>;
};

// 自动推断的使用示例
<Component number={1} word="one" /> {/* 合法，word可选值为"one"|"first" */}
<Component number={2} word="two" /> {/* 合法，word只能为"two" */}

<Component word="one" number={1} /> {/* 合法，number只能为1 */}
<Component word="two" number={2} /> {/* 合法，number只能为2 */}

// 以下会触发类型错误
<Component number={1} word="two" /> {/* 错误：word不符合number=1的合法值 */}
<Component word="one" number={2} /> {/* 错误：number不符合word="one"的合法值 */}

原理说明 #

ComponentProps是包含所有合法属性组合的联合类型，当你传入其中一个属性时，TypeScript会自动筛选出符合条件的联合分支，从而精准推断出另一个属性的可选值，完全无需手动指定泛型。

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