Typescript - auto inherit props type in React callback

Question

Having this implementation

// CustomComponent.ts
type SaveProps = {
    date: string;
    name: string;
}

interface IProps {
    onSave: (props: SaveProps) => void;
}

const CustomComponent = ({onSave}: IProps) => {
    return (
        <button onClick={() => onSave({ date: '', name: '' })}>
            Click me
        </button>
    );
};


// ParentComponent.ts
import CustomComponent from './CustomComponent';

export default function ParentComponent () {
    
    const saveData = props => { // what type is props? how to infer this as SaveProps defined in CustomComponent.ts?
        
    }

    return (
        <CustomComponent onSave={saveData} />
    )
}

How can I infer the type of props in saveData as being Props without having to import the type? So that when reading the props in saveData callback, I would automatically know what kind of data CustomComponent is sending back.

Alexander Alexandrov · Accepted Answer · 2021-07-07 09:41:04Z

1

In most cases, it is better to export Props type along with the component. In your particular case you can do the following:

import { IProps, CustomComponent } from './CustomComponent';

function ParentComponent () {
    const saveData = React.useCallback((props => {
    }) as IProps['onSave'], []);

    return (
        <CustomComponent onSave={saveData} />
    )
}

TS Playground

answered Jul 7, 2021 at 9:41

Alexander Alexandrov

1,37110 silver badges15 bronze badges

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

2 Comments

stackoverflow Over a year ago

yes, importing does makes the deal, but isn't there any other elegant solution? :)

stackoverflow Over a year ago

I'll stick with this one

Alexander Alexandrov · Accepted Answer · 2021-07-07 13:55:02Z

1

Sorry for one more answer. Comments are restricted by max length.

https://www.typescriptlang.org/docs/handbook/type-inference.html#contextual-typing

TS is smart enough to infer types in different directions, And its managed by a bunch of heuristic algorithms. That's why we can not refactor your example according to some generic ruleset (there is no such).

One more trick without explicit export of Props:

(props => {
}) as Parameters<typeof CustomComponent>[0]['onSave']

TS Playground

answered Jul 7, 2021 at 13:55

Alexander Alexandrov

1,37110 silver badges15 bronze badges

1 Comment

stackoverflow Over a year ago

hmm, yes, that's also a way to go, but much more cumbersome that the "import one"...

Collectives™ on Stack Overflow

Typescript - auto inherit props type in React callback

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related