React TypeScript中如何将类型/接口作为组件Props传递？

TypeScript的接口和类型是编译时专属的概念，它们在代码编译后会被完全移除，不会存在于运行时环境中。而React组件的Props是运行时传递的实际值，所以不能直接把接口/类型作为Props传递。

针对你遇到的「公共包需要翻译包的类型支持」场景，有几种可行的解决方案：

1. 抽离共享类型到独立包 #

新建一个仅存放类型定义的npm包（比如@your-team/shared-translation-types），将翻译相关的接口/类型统一放在这个包中。然后让公共包、翻译包和业务项目都依赖这个类型包，三者就能直接引用相同的类型定义，无需通过Props传递类型。

2. 给公共包组件定义泛型 #

如果公共包的组件需要适配不同的翻译类型，可以将组件定义为泛型组件，让业务项目在使用时传入对应的翻译类型：

// 公共包中的泛型组件
interface TranslatedComponentProps<T> {
  translations: T;
}

export const TranslatedComponent = <T extends object>(props: TranslatedComponentProps<T>) => {
  // 这里可以安全地使用props.translations，类型会被正确推断
  return <div>{props.translations.greeting}</div>;
};

// 业务项目中使用组件
import { TranslationType } from "@your-team/translation-package";
import { TranslatedComponent } from "@your-team/common-package";

const appTranslations: TranslationType = { greeting: "欢迎使用" };

<TranslatedComponent<TranslationType> translations={appTranslations} />;

这种方式下，公共包不需要直接依赖翻译包，仅通过泛型接收类型约束，编译时就能获得完整的类型检查。

3. 类型断言（不推荐） #

如果不想抽离类型包或使用泛型，可以在公共包中用unknown类型接收翻译内容，使用时通过类型断言指定具体类型。但这种方式会丢失部分类型安全性，仅适合临时场景：

// 公共包组件
interface CommonComponentProps {
  translations: unknown;
}

export const CommonComponent = (props: CommonComponentProps) => {
  // 这里需要确保翻译内容的结构符合断言的类型
  const typedTranslations = props.translations as TranslationType;
  return <div>{typedTranslations.greeting}</div>;
};

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