Повторное использование типов для функций в React + TypeScript

Question

У меня есть функция, определенная в родительском компоненте, и она передается дочернему компоненту как опора. Прямо сейчас я делаю определения типа для функции, в которой она объявлена, а затем я должен сделать точно такое же определение типа для свойств дочернего компонента.

Это кажется беспорядочным. Я знаю, что могу написать определение типа для функции и сохранить его в другом файле, а затем импортировать этот тип как в родительский, так и в дочерний. Если я это сделаю, то получу либо большой файл, содержащий все эти определения типов, либо кучу маленьких файлов, содержащих меньше определений типов, и размышления об обоих этих вариантах кажутся мне немного подавляющими.

подход сюда?

Родитель

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

Ребенок

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

Answer 1

Вы можете экспортировать ChildProps, затем в родительском элементе используйте индексированный оператор доступа , чтобы получить тип foo prop:

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

Playground

---

Или даже без экспорта дочернего типа props, вы можете использовать ComponentProps утилиту, чтобы получить его:

import { ComponentProps } from 'react';

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

Playground