title: Infer type from parent props
body: <p>I'd like to know if it's somehow possible, in TypeScript, to infer a type based on the prop of the parent.<br />
  Let me explain better with an example: suppose I have <code>&lt;Parent&gt;</code> and <code>&lt;Child&gt;</code> components, and an interface <code>IMyComplexObject</code>.</p>
  <pre><code>interface IMyComplexObject {
      name: string;
      surname: string;
  }
  
  const MyApp = (props) =&gt; {
      const [obj, setObj] = React.useState&lt;IMyComplexObject&gt;({name: 'Foo', surname: 'Bar'});
  
      return (
          &lt;Parent context={obj}&gt;
              &lt;Child value={'name'} /&gt;
          &lt;/Parent&gt;
      );
  }
  </code></pre>
  <p>So, what I'm asking is: when I write <code>&lt;Child value={'name'} /&gt;</code>, is it possible to infer the accepted values for that <code>value</code> prop to be <code>'name' | 'surname'</code>, which are the keys of <code>obj</code>?</p>
  <p>I know that, if I had only one component, things would be easy. Suppose this:</p>
  <pre><code>interface IChildProps&lt;T&gt; {
      ctx: T;
      value: keyof T;
  }
  
  - - -
  
  return &lt;Child ctx={obj} value={'name'} /&gt;
  </code></pre>
  <p>Then, the the intellisense would telling me which are the accepted values:</p>
  <p><a href="https://i.stack.imgur.com/nZn0N.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nZn0N.png" alt="enter image description here" /></a></p>
  <p>But, things get trickier when it's the <code>&lt;Parent&gt;</code> component that defines the context, and not the component itself.</p>
  <p>EDIT:
  To answer @captain-yossarian proposal, the issue with generic type on <code>&lt;Child&gt;</code> is that I would end up with a code like:</p>
  <pre><code>&lt;Parent context={obj}&gt;
      &lt;Child&lt;IMyComplexObject&gt; value={...} /&gt;
      &lt;Child&lt;IMyComplexObject&gt; value={...} /&gt;
      &lt;Child&lt;IMyComplexObject&gt; value={...} /&gt;
      ...
  &lt;/Parent&gt;
  </code></pre>
  <p>Way too many generics (one for each child). More important, there's NO actual connection between the type of the <code>obj</code> passed to <code>&lt;Parent&gt;</code> and the generic types passed to the <code>&lt;Child&gt;</code>s component.<br />
  So, for instance, something like this would still be 'legal':</p>
  <pre><code>interface IObj_1 {
      age: number;
  }
  
  interface IObj_2 {
      name: string;
  }
  
  
  const [obj1, setObj1] = React.useState&lt;IObj_1&gt;({age: 7});
  const [obj2, setObj2] = React.useState&lt;IObj_2&gt;({name: 'Foo'});
  
  return (
      &lt;Parent context={obj1}&gt;
          &lt;Child&lt;IObj_2&gt; value={'name'} /&gt;
      &lt;/Parent&gt;
  );
  </code></pre>