TypeScript中<any, any>与<{}, {}>是否等价？React组件使用答疑

安全阿岳

2026-5-26

React类组件两种TS写法的区别与推荐

嘿，我来给你掰扯清楚这两种写法的核心区别，以及哪种更值得用！

1. 两者完全不等价

这俩写法看起来像，但本质差了十万八千里：

React.Component<any, any>：这里的any是TypeScript里的“万能类型”，相当于直接告诉TS：「别管我的props和state是什么，你啥都别检查」。这么写等于直接废掉了TypeScript最核心的类型校验能力——哪怕你给组件传了错误类型的props，或者乱改state的结构，TS都不会给你报错提醒，完全失去了用TS的意义。
React.Component<{}, {}>：第一个泛型是组件的props类型，第二个是state类型，{}代表空对象。这就明确告诉TS：「这个组件不需要接收任何外部props，也没有自己的内部状态」。这种写法是严格遵循TS类型规范的，要是你不小心给这个组件传了props，TS会立刻报错提醒你，帮你提前规避bug。

2. 推荐哪种写法？

毫无疑问，React.Component<{}, {}>（以及它的衍生写法）是绝对推荐的。

如果你的组件需要接收props或者有内部状态，就把对应的类型定义好填进去，比如：

interface MyComponentProps {
  username: string;
}

interface MyComponentState {
  isLoading: boolean;
}

class MyComponent extends React.Component<MyComponentProps, MyComponentState> {
  // 组件逻辑...
}

这样TS就能全程帮你校验props和state的类型，让你的代码更健壮。

而React.Component<any, any>只有在临时调试、快速写demo的时候可能偶尔用，但绝对不能出现在生产代码里——它会让你的TS变成“披着TS皮的JS”，完全浪费了TS的价值。