typescript+react 如何在不使用PropTypes的情况下，可以使导出的组件智能提示Props？

Question

我们知道在ES6 React中使用PropTypes，如果组件定义了proptypes，在组件被导出后IDE是能够提示我们组件有用的props类型，这在多人协同开发的时候是非常有用的，在TypeScript中，如何实现该功能？是我的代码写的不对？还是IDE缺少插件支持？ 忘了说IDE用的WebStorm，如您不吝指点，不胜感激~

代码如下

export interface NewSwitchProps extends BaseControlProps{
    size?: 'small' | 'default';
    checked?: boolean;
    defaultChecked?: boolean;
    onChange?: (checked: boolean) => any;
    checkedChildren?: React.ReactNode;
    unCheckedChildren?: React.ReactNode;
    disabled?: boolean;

}

export class NewSwitchControl extends Component<NewSwitchProps, any> {
    static defaultProps = {
        hidden: true
    }
    render(){
        const {label, hidden, ...restProps} = this.props;
        return (
            <BaseControl label={label} hidden={hidden || true} >
                <Switch {...restProps} />
            </BaseControl>
        )
    }
}

我把TSX文件导入到js文件后，并没有出现props的智能提示，求指点

Answer 1

你的问题里面也描述了，你把TSX文件导入到js文件后，并没有出现props的智能提示，这是肯定的啊，提示是ts的语言服务带来的功能，只能用在ts文件上，如果你是把一个tsx文件导入到ts文件或者tsx文件都会有语法提示的

Answer 2

react typescript可以通过interface来约定react组件props，还有必要用react的propTypes吗？