title: TypeScript partial interface object
body: <p>In React, the <a href="https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/react/react.d.ts#L161" rel="noreferrer">Component definition</a> looks something like this:</p>
  
  <pre><code>class Component&lt;S&gt; {
      state:S;
      setState(state:S):void;
  }
  </code></pre>
  
  <p>And you define a component like this:</p>
  
  <pre><code>interface MyState {
      name: string;
      age: number;
  }
  class MyComponent extends Component&lt;MyState&gt; { }
  </code></pre>
  
  <p>Now the issue I have is that in the React API <code>setState</code> is supposed to be called with a <em>partial</em> state object, representing properties to be updated, like this:</p>
  
  <pre><code>setState({name: "Aaron"});
  </code></pre>
  
  <p>Note that <code>age</code> is not declared. The problem I have is that TypeScript doesn't allow this, it gives an assignment error like <code>Property 'age' is missing</code>. By my understanding, the <code>react.d.ts</code> definition is wrong in this sense. But is there a solution?</p>
  
  <p>I tried this:</p>
  
  <pre><code>setState({name: "Aaron"} as MyState);
  </code></pre>
  
  <p>But this gives the same error, even though it <a href="http://www.typescriptlang.org/play/#src=class%20Component%3CT%3E%20%7B%0A%09state%3A%20T%3B%0A%09setState(state%3AT)%3Avoid%20%7B%7D%0A%7D%0A%0Ainterface%20MyState%20%7B%0A%09name%3A%20string%3B%0A%09age%3A%20number%3B%0A%09location%3A%20Location%3B%0A%7D%0A%0Aclass%20MyComponent%20extends%20Component%3CMyState%3E%20%7B%0A%09test()%20%7B%0A%09%09this.setState(%7Bname%3A%20%22Test%22%7D)%3B%20%2F%2F%20error%0A%09%09this.setState(%7Bname%3A%20%22Test%22%7D%20as%20MyState)%3B%20%2F%2F%20no%20error%20here%2C%20but%20error%20in%20my%20local%20build%3F%0A%09%7D%0A%7D" rel="noreferrer">works in the Playground</a> without giving an error. Why does it work in the Playground? Any ideas?</p>