Infer type from parent props

Question

I'd like to know if it's somehow possible, in TypeScript, to infer a type based on the prop of the parent.
Let me explain better with an example: suppose I have and components, and an interface IMyComplexObject.

interface IMyComplexObject {
    name: string;
    surname: string;
}

const MyApp = (props) => {
    const [obj, setObj] = React.useState({name: 'Foo', surname: 'Bar'});

    return (
        
            
        
    );
}

So, what I'm asking is: when I write , is it possible to infer the accepted values for that value prop to be 'name' | 'surname', which are the keys of obj?

I know that, if I had only one component, things would be easy. Suppose this:

interface IChildProps {
    ctx: T;
    value: keyof T;
}

- - -

return

Then, the the intellisense would telling me which are the accepted values:

But, things get trickier when it's the component that defines the context, and not the component itself.

EDIT: To answer @captain-yossarian proposal, the issue with generic type on is that I would end up with a code like:


     value={...} />
     value={...} />
     value={...} />
    ...

Way too many generics (one for each child). More important, there's NO actual connection between the type of the obj passed to and the generic types passed to the s component.
So, for instance, something like this would still be 'legal':

interface IObj_1 {
    age: number;
}

interface IObj_2 {
    name: string;
}


const [obj1, setObj1] = React.useState({age: 7});
const [obj2, setObj2] = React.useState({name: 'Foo'});

return (
    
         value={'name'} />
    
);

user_8495254 · Answer

Yes , it is possible.

You need to provide an explicit generic argument to Child component.

 value={"name"} >

and Child implementation:

const Child=(props: {value: keyof T})=>null

Or

const Child=(props: {ctx: T, value: keyof T})=>null

UPDATE

I think the most simple approach will be to provide Parent with extra props: items and callback

items - array of keys of IMyComplexObject. items itself is a primitive value which goes straight to value property of Child

callback - Array.prototype.map callback.

import React, { useState } from 'react'


interface IMyComplexObject {
  name: string;
  surname: string;
}

type ParentProps = {
  context: Context;
  items: Array;
  callback: (prop: keyof Context) => JSX.Element
}

type ChildProps = { value: string }

const Parent = ({ items, callback }: ParentProps) =>
  <>
    {items.map(callback)}
  

const Child = ({ value }: ChildProps) => {value}

const MyApp = () => {
  const [context, setContext] = useState({ name: 'Foo', surname: 'Bar' });

  return (
    <>
       
        }
      />

       
        }
      />
    
  );
}

Playground

Infer type from parent props

1 Answers