Question

我正在使用WebStorm 2018.3.4，并试图找出如何对React组件的道具进行类型检查。具体来说，如果一个道具被标记为string，但我给它一个number，我希望WebStorm显示错误。我创建了一个类型定义文件（如here所述）。该文件的外观如下：

MyComponent.d.ts

import * as React from 'react';

export interface MyComponentProps {
  /** this is the component's title */
  title: string;

  /** this is a short description of the component */
  description?: string;
}

declare class MyComponent extends React.Component<MyComponentProps, {}> {
  render(): JSX.Element;
}

export default MyComponent;

App.jsx

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

我希望WebStorm在title={7}下划线告诉我7是错误的类型。如果我在道具上Ctrl+Q肯定会告诉我类型是string，并且会给我.d.ts文件中的文档。我需要启用一个设置吗？还是WebStorm不支持此功能？还是我的应用程序使用的是JSX而不是TypeScript的问题？任何帮助将不胜感激。

Answer 1

您可以安装prop-types

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

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类型检查使用类型定义的React props

1 个答案: