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>);

    }
}

Typescript React泛型函数类型

1 个答案: