// Imagine NavBar is an external library!
export const NavBar = (props: {
title: string;
links: string[];
children: React.ReactNode;
}) => {
return <div>Some content</div>;
};
// Your app:
import { Equal, Expect } from '../helpers/type-utils';
type PropsFrom<TComponent> = TComponent extends React.FC<infer Props>
? Props
: TComponent extends React.Component<infer Props>
? Props
: never;
type NavBarProps = PropsFrom<typeof NavBar>;
type test = Expect<
Equal<
NavBarProps,
{
title: string;
links: string[];
children: React.ReactNode;
}
>
>;
Or:
import type { ComponentProps } from 'react';
type NavBarProps = ComponentProps<typeof NavBar>;
- Extracting Components Typescript Custom Reactextracting components typescript custom react typescript components propstype discriminated typescript custom tuples components typescript arguments passing components typescript generics strongly styled-components typescript components组件 components instances elements react typescript workspace monorepo react typescript component strongly react typescript component generics react