VSCode悬停时未显示PropTypes定义的预期数据类型

我正在学习React PropTypes与TypeScript的协同工作机制，按照参考页面的代码实现后未得到预期结果——通过PropTypes将FavoriteColor组件的color属性定义为string类型，但VSCode仍将其推断为any类型。

我的代码如下：

import React from 'react';
import PropTypes from 'prop-types';

// A component that accepts "color" prop
function FavoriteColor({ color }) {
  return <h2>My favorite Color is {color}</h2>;
}

FavoriteColor.propTypes = {
  color: PropTypes.string.isRequired,
};

// Parent component
function App() {
  return (
    <div className="App">
      <FavoriteColor />
    </div>
  );
}

export default App;

实际悬停效果：

我期望悬停color时能显示对应的string类型。

问题原因 #

TypeScript本身不会自动识别PropTypes的类型定义——PropTypes仅用于运行时的类型校验，而TypeScript是编译时类型系统，两者默认不互通，所以VSCode无法从PropTypes推导TS类型。

解决方案 #

1. 直接用TypeScript接口定义Props（推荐）

完全利用TS的类型系统，同时可保留PropTypes做运行时校验：

import React from 'react';
import PropTypes from 'prop-types';

// 用TS接口定义组件Props类型
interface FavoriteColorProps {
  color: string;
}

function FavoriteColor({ color }: FavoriteColorProps) {
  return <h2>My favorite Color is {color}</h2>;
}

// 保留PropTypes用于运行时检查（可选）
FavoriteColor.propTypes = {
  color: PropTypes.string.isRequired,
};

function App() {
  return (
    <div className="App">
      <FavoriteColor color="blue" />
    </div>
  );
}

export default App;

2. 基于PropTypes自动推导TS类型（可选）

如果想从已有的PropTypes生成TS类型，可以使用prop-types-ts工具：

• 先安装依赖：npm install prop-types-ts --save-dev
• 修改代码：

import React from 'react';
import PropTypes from 'prop-types';
import { InferProps } from 'prop-types-ts';

// 定义PropTypes规则
const favoriteColorPropTypes = {
  color: PropTypes.string.isRequired,
};

// 从PropTypes推导TS类型
type FavoriteColorProps = InferProps<typeof favoriteColorPropTypes>;

function FavoriteColor({ color }: FavoriteColorProps) {
  return <h2>My favorite Color is {color}</h2>;
}

FavoriteColor.propTypes = favoriteColorPropTypes;

function App() {
  return (
    <div className="App">
      <FavoriteColor color="blue" />
    </div>
  );
}

export default App;

额外提示 #

你的代码中App组件调用FavoriteColor时未传入必填的color属性，仅靠PropTypes只会在运行时抛出警告；加上TS类型定义后，VSCode会在编译阶段直接提示缺少必传属性，更早发现问题。

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