javascript - 如何在 Typescript 中进行后期绑定(bind)

Question

以下是用 Javascript 实现的一个简单的 React App 组件...

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      setting: "def",
      limit: 2
    }
  }
  updateState(element,  data)
  {
    this.setState({ [element]: data});
  }
  componentDidMount()
  {
    this.updateState("setting", "ghi");
    this.updateState("limit", 4);
  }
  render() {
    return (
      <div className="App">
        <div className="App-header">
          <h2>Welcome to React</h2>
        </div>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
        <p>
          setting = {this.state.setting}, limit = {this.state.limit}
        </p>
      </div>
    );
  }
}

export default App;

请注意，updateState 方法使用后期绑定(bind)来设置状态成员。

在 Typescript 中不能使用相同的方法。这是 typescript 中的相同组件...

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

interface IProps {
}

interface IState {
  setting: string;
  limit: number;
}
class App extends Component<IProps, IState> {
  constructor(props: IProps) {
    super(props);
    this.state = {
      setting: "def",
      limit: 2
    }
  }
  updateState(element: string, data: any)
  {
//    this.setState({ [element]: data});  // generates error
  }
  componentDidMount()
  {
    this.updateState("setting", "ghi");
    this.updateState("limit", 4);
  }
  render() {
    return(
      <div className="App">
        <div className="App-header">
          <h2>Welcome to React</h2>
        </div>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
        <p>
          setting = {this.state.setting}, limit = {this.state.limit}
        </p>
      </div>

    );
  }
}

export default App;

请注意，由于 typescript 编译器错误，updateState 的内容被注释掉了。如何在不使用 switch 语句的情况下解决此问题？

Answer 1

错误可能是因为省略了属性。

使 IState 中的属性可选。

interface IState {
  setting?: string;
  limit?: number;
}