从React组件中提取道具类型

Question

我试图了解如何（以及是否有可能）从给定组件中提取道具类型。

const Component = (props: { color: string }) => <div {...props} />;

type ComponentProps = $ExtractArguments<typeof Component>[0] // pseudo-code

我发现该实用工具在搜寻，但是我不知道它是否有用...

type $Arguments<F> = $Call<<A: $ReadOnlyArray<mixed>>((...A) => mixed) => A, F>;

Answer 1

您正在寻找React.ElementProps或React.ElementConfig。最后一个考虑到defaultProps，因此在实践中更有用。

Docs

Try

import * as React from 'react';

const Component = (props: { color: string }) => <div {...props} />;

type Props = React.ElementConfig<typeof Component>;