我有一个使用 typescript 创建的简单 react 组件，遇到了以下奇怪的错误。 这是我的代码。

interface State {
  value: string
}

class App extends React.Component<{}, State> {
  constructor() {
    super();
    this.state = {
      value: ''
    }
  }

  changeHandler = (e: any) => {
    let state = Object.assign({}, this.state);
    state.value = e.target.value;
    this.setState(state);
  }

  render() {
    return (
      <div className="App">
        <input
          type="text"
          value={this.state.value}
          name="value"
          onChange={this.changeHandler} />
      </div>
    );
  }
}

export default App;

这是我得到的错误。

error TS2540: Cannot assign to 'value' because it is a constant or a read-only property.

这个错误让我想到，也许这是 typescript 强制执行不改变状态规则的方式。 为了测试这个理论，我做了以下事情。

this.state.value = e.target.value

在这种情况下，我显然直接改变了状态，果然我得到了同样的错误。

然后我想到将我的界面改为这样。

interface State {
  value: Ivalue
}

interface Ivalue {
  value: string;
}

然后我重构了我的组件以像这样使用这个新接口。

class App extends React.Component<{}, State> {
  constructor() {
    super();
    this.state = {
      value: {
        value: ''
      }
    }
  }

  changeHandler = (e: any) => {
    let value = Object.assign({}, this.state.value);
    value.value = e.target.value;
    this.setState({value});
  }

  render() {
    return (
      <div className="App">
        <input
          type="text"
          value={this.state.value.value}
          name="value"
          onChange={this.changeHandler} />
      </div>
    );
  }
}

export default App;

果然这样编译了！ 我的问题实际上是 2 个问题。首先，为什么 TypeScript 对我的状态副本不满意，就像我在第一段代码中使用 Object.assign 一样？ 其次，为什么将状态对象进一步嵌套一层可以解决这个问题？