在TS中，编译器会对装饰器作用的值做签名一致性检查，而我们在高阶组件中一般都会返回新的组件，并且对被作用的组件的 props
进行修改（添加、删除）等。这些会导致签名一致性校验失败， TS
会给出错误提示。
为了解决此类问题。我们不能直接export高阶组件。以React为例，
使用antd的form组件时
我们需要导出组件
Form.create()(YourComponent)
如此返回的是新组件。ts校验不通过，正确的姿势为
import { Form } from 'antd';
import { FormComponentProps } from 'antd/lib/form';
interface UserFormProps extends FormComponentProps {
age: number;
name: string;
}
class UserForm extends React.Component<UserFormProps, any> {
// ...
}
const App = Form.create<UserFormProps>({
// ...
})(UserForm);
使用react-router-dom的WithRouter方法时
直接使用withRouter(YourComponent)仍然不行。正确的姿势为
import * as React from 'react'
import { withRouter } from 'react-router-dom';
import {RouteComponentProps} from "react-router";
// this.props.match.params.*的属性
type PathParamsType = {
param1: string,
}
// 组件自己的属性
type PropsType = RouteComponentProps<PathParamsType> & {
someString: string,
}
class YourComponent extends React.Component<PropsType> {
render() {
return <div>...</div>;
}
}
export default withRouter(YourComponent);
