react 中使用 TypeScript 的幾點總結

https://blog.csdn.net/sinat_17775997/article/details/84203095 大佬文章，留着備用。

寫在最前面

• 為了在 react 中更好的使用 ts，進行一下討論
• 怎么合理的再 react 中使用 ts 的一些特性讓代碼更加健壯

討論幾個問題，react 組件的聲明？react 高階組件的聲明和使用？class組件中 props 和 state 的使用？...

在 react 中使用 ts 的幾點原則和變化

• 所有用到jsx語法的文件都需要以tsx后綴命名
• 使用組件聲明時的Component<P, S>泛型參數聲明，來代替PropTypes！
• 全局變量或者自定義的window對象屬性，統一在項目根下的global.d.ts中進行聲明定義
• 對於項目中常用到的接口數據對象，在types/目錄下定義好其結構化類型聲明

聲明React組件

• react中的組件從定義方式上來說，分為類組件和函數式組件。

• 類組件的聲明

1.  
   class App extends Component<IProps, IState> {
2.  
   static defaultProps = {
3.  
   // ...
4.  
   }
5.  
    
6.  
   readonly state = {
7.  
   // ...
8.  
   };
9.  
   // 小技巧：如果state很復雜不想一個個都初始化，可以結合類型斷言初始化state為空對象或者只包含少數必須的值的對象： readonly state = {} as IState;
10.  
    }
11.  
    復制代碼

• ts 斷言參考資料

需要特別強調的是，如果用到了state，除了在聲明組件時通過泛型參數傳遞其state結構，還需要在初始化state時聲明為 readonly

這是因為我們使用 class properties 語法對state做初始化時，會覆蓋掉Component<P, S>中對state的readonly標識。

函數式組件的聲明

1.  
   // SFC: stateless function components
2.  
   // v16.7起，由於hooks的加入，函數式組件也可以使用state，所以這個命名不准確。新的react聲明文件里，也定義了React.FC類型^_^
3.  
   const List: React.SFC<IProps> = props => null
4.  
   復制代碼

class組件都要指明props和state類型嗎？

• 是的。只要在組件內部使用了props和state，就需要在聲明組件時指明其類型。
• 但是，你可能發現了，只要我們初始化了state，貌似即使沒有聲明state的類型，也可以正常調用以及setState。沒錯，實際情況確實是這樣的，但是這樣子做其實是讓組件丟失了對state的訪問和類型檢查！

1.  
   // bad one
2.  
   class App extends Component {
3.  
   state = {
4.  
   a: 1,
5.  
   b: 2
6.  
   }
7.  
    
8.  
   componentDidMount() {
9.  
   this.state.a // ok: 1
10.  
     
11.  
    // 假如通過setState設置並不存在的c，TS無法檢查到。
12.  
    this.setState({
13.  
    c: 3
14.  
    })；
15.  
     
16.  
    this.setState( true)； // ???
17.  
    }
18.  
    // ...
19.  
    }
20.  
     
21.  
    // React Component
22.  
    class Component<P, S> {
23.  
    constructor(props: Readonly<P>);
24.  
    setState<K extends keyof S>(
25.  
    state: ((prevState: Readonly<S>, props: Readonly<P>) => (Pick<S, K> | S | null)) | (Pick<S, K> | S | null),
26.  
    callback?: () => void
27.  
    ): void;
28.  
    forceUpdate(callBack?: () => void): void;
29.  
    render(): ReactNode;
30.  
    readonly props: Readonly<{ children?: ReactNode }> & Readonly<P>;
31.  
    state: Readonly<S>;
32.  
    context: any;
33.  
    refs: {
34.  
    [key: string]: ReactInstance
35.  
    };
36.  
    }
37.  
     
38.  
     
39.  
    // interface IState{
40.  
    // a: number,
41.  
    // b: number
42.  
    // }
43.  
     
44.  
    // good one
45.  
    class App extends Component<{}, { a: number, b: number }> {
46.  
     
47.  
    readonly state = {
48.  
    a: 1,
49.  
    b: 2
50.  
    }
51.  
     
52.  
    //readonly state = {} as IState,斷言全部為一個值
53.  
     
54.  
    componentDidMount() {
55.  
    this.state.a // ok: 1
56.  
     
57.  
    //正確的使用了 ts 泛型指示了 state 以后就會有正確的提示
58.  
    // error: '{ c: number }' is not assignable to parameter of type '{ a: number, b: number }'
59.  
    this.setState({
60.  
    c: 3
61.  
    })；
62.  
    }
63.  
    // ...
64.  
    }
65.  
    復制代碼

使用react高階組件

什么是 react 高階組件？裝飾器？

• 因為react中的高階組件本質上是個高階函數的調用，所以高階組件的使用，我們既可以使用函數式方法調用，也可以使用裝飾器。但是在TS中，編譯器會對裝飾器作用的值做簽名一致性檢查，而我們在高階組件中一般都會返回新的組件，並且對被作用的組件的props進行修改（添加、刪除）等。這些會導致簽名一致性校驗失敗，TS會給出錯誤提示。這帶來兩個問題：

第一，是否還能使用裝飾器語法調用高階組件？

• 這個答案也得分情況：如果這個高階組件正確聲明了其函數簽名，那么應該使用函數式調用，比如 withRouter：

1.  
   import { RouteComponentProps } from 'react-router-dom';
2.  
    
3.  
   const App = withRouter( class extends Component<RouteComponentProps> {
4.  
   // ...
5.  
   });
6.  
    
7.  
   // 以下調用是ok的
8.  
   <App />
9.  
   復制代碼

如上的例子，我們在聲明組件時，注解了組件的props是路由的RouteComponentProps結構類型，但是我們在調用App組件時，並不需要給其傳遞RouteComponentProps里說具有的location、history等值，這是因為withRouter這個函數自身對齊做了正確的類型聲明。

第二，使用裝飾器語法或者沒有函數類型簽名的高階組件怎么辦？

---

如何正確的聲明高階組件？

• 就是將高階組件注入的屬性都聲明可選（通過Partial這個映射類型），或者將其聲明到額外的injected組件實例屬性上。 我們先看一個常見的組件聲明：

1.  
   import { RouteComponentProps } from 'react-router-dom';
2.  
    
3.  
   // 方法一
4.  
   @withRouter
5.  
   class App extends Component<Partial<RouteComponentProps>> {
6.  
   public componentDidMount() {
7.  
   // 這里就需要使用非空類型斷言了
8.  
   this.props.history!.push( '/');
9.  
   }
10.  
    // ...
11.  
    });
12.  
     
13.  
    // 方法二
14.  
    @withRouter
15.  
    class App extends Component<{}> {
16.  
    get injected() {
17.  
    return this.props as RouteComponentProps
18.  
    }
19.  
     
20.  
    public componentDidMount() {
21.  
    this.injected.history.push( '/');
22.  
    }
23.  
    // ...
24.  
    復制代碼

如何正確的聲明高階組件？

1.  
   interface IUserCardProps {
2.  
   name: string;
3.  
   avatar: string;
4.  
   bio: string;
5.  
    
6.  
   isAdmin?: boolean;
7.  
   }
8.  
   class UserCard extends Component<IUserCardProps> { /* ... */}
9.  
   復制代碼

上面的組件要求了三個必傳屬性參數：name、avatar、bio，isAdmin是可選的。加入此時我們想要聲明一個高階組件，用來給UserCard傳遞一個額外的布爾值屬性visible，我們也需要在UserCard中使用這個值，那么我們就需要在其props的類型里添加這個值：

1.  
   interface IUserCardProps {
2.  
   name: string;
3.  
   avatar: string;
4.  
   bio: string;
5.  
   visible: boolean;
6.  
    
7.  
   isAdmin?: boolean;
8.  
   }
9.  
   @withVisible
10.  
    class UserCard extends Component<IUserCardProps> {
11.  
    render() {
12.  
    // 因為我們用到visible了，所以必須在IUserCardProps里聲明出該屬性
13.  
    return <div className={this.props.visible ? '' : 'none'}>...</div>
14.  
    }
15.  
    }
16.  
     
17.  
    function withVisiable(WrappedComponent) {
18.  
    return class extends Component {
19.  
    render() {
20.  
    return <WrappedComponent {..this.props} visiable={true} />
21.  
    }
22.  
    }
23.  
    }
24.  
    復制代碼

• 但是這樣一來，我們在調用UserCard時就會出現問題，因為visible這個屬性被標記為了必需，所以TS會給出錯誤。這個屬性是由高階組件注入的，所以我們肯定是不能要求都再傳一下的。

可能你此時想到了，把visible聲明為可選。沒錯，這個確實就解決了調用組件時visible必傳的問題。這確實是個解決問題的辦法。但是就像上一個問題里提到的，這種應對辦法應該是對付哪些沒有類型聲明或者聲明不正確的高階組件的。

所以這個就要求我們能正確的聲明高階組件：

1.  
   interface IVisible {
2.  
   visible: boolean;
3.  
   }
4.  
    
5.  
   //排除 IVisible
6.  
   function withVisible<Self>(WrappedComponent: React.ComponentType<Self & IVisible>): React.ComponentType<Omit<Self, 'visible'>> {
7.  
   return class extends Component<Self> {
8.  
   render() {
9.  
   return <WrappedComponent {... this.props} visible={ true} />
10.  
    }
11.  
    }
12.  
    }
13.  
    復制代碼

如上，我們聲明withVisible這個高階組件時，利用泛型和類型推導，我們對高階組件返回的新的組件以及接收的參數組件的props都做出類型聲明。