如何确保传入React组件Prop的字符串符合指定类型？

问题场景 #

第三方库提供的React组件ComponentFromLibrary接受一个string类型的str Prop，但我希望仅允许传入指定的字符串值（比如'Hello'或'World'），不符合时让TypeScript抛出错误，同时不修改第三方组件本身。

实现方案 #

方案1：使用类型断言直接约束 #

通过定义联合类型AllowedStrings，在传入Prop时用类型断言as AllowedStrings强制校验，TypeScript会自动检查字符串是否属于允许的范围：

import React from "react";

// 不可修改的第三方组件
const ComponentFromLibrary: React.FC<{ str: string }> = ({ str }) => (
  <span>{str}</span>
);

// 定义允许的字符串类型
type AllowedStrings = 'Hello' | 'World';

export default () => (
  <div className="App">
    {/* 合法：不会报错 */}
    <ComponentFromLibrary str={"Hello" as AllowedStrings} />
    {/* 非法：TypeScript会报错，因为"world"不在AllowedStrings中 */}
    <ComponentFromLibrary str={"world" as AllowedStrings} />
  </div>
);

方案2：封装类型安全的包装组件 #

如果不想每次都写类型断言，可以封装一个自己的组件，将Prop类型约束为AllowedStrings，再转发给第三方组件：

import React from "react";

// 不可修改的第三方组件
const ComponentFromLibrary: React.FC<{ str: string }> = ({ str }) => (
  <span>{str}</span>
);

// 定义允许的字符串类型
type AllowedStrings = 'Hello' | 'World';

// 封装类型安全的组件
const MyComponent: React.FC<{ str: AllowedStrings }> = ({ str }) => (
  <ComponentFromLibrary str={str} />
);

export default () => (
  <div className="App">
    {/* 合法：不会报错 */}
    <MyComponent str="Hello" />
    {/* 非法：TypeScript会报错 */}
    <MyComponent str="world" />
  </div>
);

这种方式更优雅，使用时无需手动写断言，TypeScript会自动校验传入的字符串是否符合要求。

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