Advanced typings

Lets assume you're trying to create a generic component that receives a data-fetching function, lets call it fn, which returns an item or an array of some type and another prop, lets call it key, with one of the keys of the function's return type.

In order to get autocompletion for the key prop.

The data-fetching function

async function getData() {

  return {key1: "b", key2: 4, key3: false};

}

The Question

How to declare the type of another component's prop to accept only the keys of the data type returned by the data-fetching function.

The Process

You could "easily" type the props as follows:

type ReturnedType = {

  key1: string

  key2: number

  key3: boolean

}

type ComponentProps = {

  fn: () => Promise<ReturnedType>

  key: "key1" | "key2" | "key3"

}

But this doesn't really scale as the component is not generic, meaning the data-fetching function can only be one that returns an object with the shape of ReturnedType.

Also, every time the type ReturnedType changes, we need to make changes to the type of the key prop.

Note

We could also declare the key's prop type as keyof ReturnedType.

The Fix: Inferring

Then we can define our component's type and use keyof to define the type of key prop resulting in the type being the keys of the awaited response of the function we passed on fn.

TL;DR:

type ComponentType = <

  F extends () => Promise<Record<string, unknown>>, 

  D extends Awaited<ReturnType<F>>

> ({

  fn,

  key

}: {

  fn: F,

  key: keyof D

}) => React.JSX.Element | null

In this case we need to check for the type of key prop to be "string":

// Server component

const Component: ComponentType = async ({fn, key}) => {

  const item = await fn();

  if (typeof key !== "string") return null;

  return <>{item[key]}</>

}

// Client component

const Component: ComponentType = ({fn, key}) => {

  const [item, setItem] = useState();

  useEffect(() => {

    fn().then(setItem)

  }, [])

  if (typeof key !== "string") return null;

  return <>{item[key]}</>

}

Another way to do it (with a function returning an array and using a helper):

type KeyOf<T> = T extends Record<infer K extends string, unknown> ? K : never;

async function Component<F extends () => Promise<Record<string, unknown>[]>>(fn: F, key: KeyOf<Awaited<ReturnType<F>>[number]>): React.JSX.Element {

  const item = await fn()

  // there is no need to check for key to be string

  return <>{item[key]}</>;

}