Reusing types for functions in React + TypeScript

Question

I have a function defined in a parent component and it gets passed to a child component as a prop. Right now I do the type definitions for the function where it is declared and then I have to do the exact same type definition for the props on the child component.

This feels messy. I know that I could write a type def for the function and store it in some other file and then import that type into both the parent and child. If I do that then I either end up with a big file holding all of these type definitions or a bunch of small files holding fewer type definitions and thinking about both of those options feel a little overwhelming.

What’s the best approach here?

Parent

const foo = (str: string): void => {
    console.log(str);
}
// ...
return <Child foo={foo} />

Child

interface ChildProps {
    foo: (str: string) => void;
}
function Child(props: ChildProps) {
    // ...
}

Aleksey L. · Accepted Answer · 2020-05-08 06:58:02Z

2

You can export ChildProps, then in parent use indexed access operator to get the type of the foo prop:

const foo: ChildProps['foo'] = str => {
    console.log(str);
}

Playground

Or even without exporting child props type, you can use ComponentProps utility to get it:

import { ComponentProps } from 'react';

const foo: ComponentProps<typeof Child>['foo'] = str => {
    console.log(str);
}

Playground

edited May 8, 2020 at 6:58

answered May 8, 2020 at 6:49

Aleksey L.

38.4k11 gold badges86 silver badges90 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Reusing types for functions in React + TypeScript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related