在TS中办桨，編譯器會(huì)對裝飾器作用的值做簽名一致性檢查，而我們在高階組件中一般都會(huì)返回新的組件站辉，并且對被作用的組件的 props
進(jìn)行修改（添加呢撞、刪除）等。這些會(huì)導(dǎo)致簽名一致性校驗(yàn)失敗饰剥， TS
會(huì)給出錯(cuò)誤提示殊霞。
為了解決此類問題。我們不能直接export高階組件汰蓉。以React為例绷蹲，
使用antd的form組件時(shí)
我們需要導(dǎo)出組件
Form.create()(YourComponent)
如此返回的是新組件。ts校驗(yàn)不通過顾孽，正確的姿勢為
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方法時(shí)
直接使用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);
