Typescript React 泛型函數類型

Question

我有一個案例：

interface State {
   Mark: boolean;
   Jane: boolean;
}

React.Component<{}, State> {

   state = {
      Mark: false,
      Jane: false,
   };

   fn = (name: string) => () => {
      this.setState({ [name]: true });
                     ^^^^^^^^^^
   }

   render () {
      return
        ['Mark', 'Jane'].map((name) => <div onClick={this.fn(name)}>{name}</div>);

}

我收到錯誤：

Argument of type '{ [x: string]: boolean; }' is not assignable 
to parameter of type 'State | Pick<State, "Mark" | "Jane">

我可以為它做兩個單獨的功能，但我想保持它的通用性。 我怎樣才能使它通用以便錯誤消失？

Answer 1

事實證明這是 ts 編譯器本身的限制。 檢查此問題以了解更多信息：https ://github.com/DefinitelyTyped/DefinitelyTyped/issues/26635

現在要解決您的問題，您可以將setState與回調版本一起使用。 像下面這樣：

interface State {
    Mark: boolean;
    Jane: boolean;
}

type StateKeys = keyof State

class Test extends React.Component <{}, State > {

    state = {
        Mark: false,
        Jane: false,
    };

    fn = (name: StateKeys) => () => {
        this.setState(prev => ({ ...prev, [name]: true }));
   }

   render() {
       return ['Mark', 'Jane'].map((name: StateKeys) => <div onClick={this.fn(name)}>{name}</div>);

    }
}