Reactjs 使用类型定义检查WebStorm类型

我正在使用WebStorm 2018.3.4，并试图找出如何对React组件的道具进行类型检查。具体来说，如果一个道具被标记为

字符串

，但我给它一个

数字

，我希望WebStorm显示一个错误。我已经创建了一个类型定义文件（如上所述）。以下是该文件的外观：

MyComponent.d.ts

import*as React from'React'；
导出接口MyComponentProps{
/**这是组件的标题*/
标题：字符串；
/**这是对组件的简短描述*/
description？：字符串；
}
声明类MyComponent扩展了React.Component{
render（）：JSX.Element；
}
导出默认MyComponent；

App.jsx

class App extends React.Component {
  render() {
    return (
      <MyComponent title={7} />
    );
  }
}

类应用程序扩展了React.Component{
render（）{
返回(
);
}
}

我希望WebStorm会在

title={7}

下面划线，告诉我

7

是错误的类型。如果我在道具上使用

Ctrl+Q

，它肯定会告诉我类型是

string

，它会给我

.d.ts

文件中的文档。是否有需要启用的设置？还是WebStorm不支持这一点？或者我的问题是我的应用程序使用JSX而不是TypeScript？任何帮助都将不胜感激。

您可以安装

然后您可以这样编写组件：

import React, { Component } from 'react';
import PropTypes from 'prop-types';

class App extends Component {
    static propTypes = {
        userId: PropTypes.string.isRequired,
        someObject: PropTypes.object.isRequired,
        someFunction: PropTypes.func.isRequired,
    };

    render() {
       ....
    }
}

---

Webstorm不提供道具类型检查（即，它不报告类型不匹配）。如果您错过此功能，请向youtrack提交功能请求，谢谢@lena！这就是我的想法，我只是想确认一下。这对所需的道具绝对有效，但如果给定道具的类型与定义的不同，WebStorm不会发出警告。