React中如何用自定义类型限制Props仅接受指定字符串类型？

因为TypeScript采用结构类型系统，直接type MyType = string会和原生string类型完全兼容，所以组件无法区分普通字符串和你的自定义类型。要实现严格的类型限制，有两种常用方案：

方案一：品牌类型（Branded Types）—— 通用任意字符串场景 #

给自定义类型添加一个仅编译时存在的"品牌标记"，让它在结构上和普通string区分开，同时不影响运行时的字符串功能：

1. 定义带品牌的MyType：

// 添加唯一的品牌属性，编译时用来区分类型，运行时不会实际存在
type MyType = string & { __brand: 'MyType' };

2. 创建一个类型断言函数，用来生成合法的MyType实例：

// 只有通过这个函数创建的值，才会被视为合法的MyType
function createMyType(value: string): MyType {
  return value as MyType;
}

3. 组件Props使用这个类型：

interface MyProps {
  key: MyType;
}

此时直接传递普通字符串会触发编译错误：

// ❌ 报错：类型"regularstring"不能赋值给类型MyType
<MyComponent key="regularstring" />

// ✅ 合法：通过createMyType生成的MyType实例
<MyComponent key={createMyType("valid-string")} />

方案二：字面量联合类型—— 特定字符串值场景 #

如果你的MyType只允许特定的几个字符串值，直接用字面量联合类型即可：

// 仅允许这两个字符串值
type MyType = "allowed-value-a" | "allowed-value-b";

interface MyProps {
  key: MyType;
}

此时组件只能接受指定的字符串：

// ❌ 报错："regularstring"不在允许的范围内
<MyComponent key="regularstring" />

// ✅ 合法
<MyComponent key="allowed-value-a" />

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