I have a simple react component that I created with typescript and I encountered the following strange error. Here is my code.

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

```

And this is the error that I got.

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

This error got me thinking that perhaps this was typescript's way of enforcing the rule of not mutating state. To test this theory I did the following.

```
this.state.value = e.target.value

```

In this case I am clearly mutating state directly and sure enough I get the same error.

Then I had the idea of changing my interface to this.

```
interface State {
  value: Ivalue
}

interface Ivalue {
  value: string;
}

```

And then I refactored my component to use this new interface like this.

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

```

And sure enough this compiled! 
My question is really 2 questions. First, why was typescript not satisfied with my copy of state, like I have in my first snippet of code where I used `Object.assign`?
Second, why does nesting my state object one level further down solve this issue?