import { Equal, Expect } from "../helpers/type-utils";
type InputProps = React.ComponentProps<"input">;
const COMPONENTS = {
text: (props) => {
return <input {...props} type="text" />;
},
number: (props) => {
return <input {...props} type="number" />;
},
password: (props) => {
return <input {...props} type="password" />;
},
} satisfies Record<string, (props: InputProps) => JSX.Element>;
export const Input = (
props: Record<"type", keyof typeof COMPONENTS> & InputProps
) => {
const Component = COMPONENTS[props.type];
return <Component {...props} />;
};
<>
<Input
type="number"
onChange={(e) => {
// e should be properly typed!
type test = Expect<Equal<typeof e, React.ChangeEvent<HTMLInputElement>>>;
}}
></Input>
<Input type="text"></Input>
<Input type="password"></Input>
{/* @ts-expect-error */}
<Input type="email"></Input>
</>;
- Get the props for
input
, we can usingReact.ComponentProps<"input">
- Improve:
(props: InputProps) => JSX.Element
toReact.FC<InputProps>
const COMPONENTS = {
text: (props) => {
return <input {...props} type="text" />;
},
number: (props) => {
return <input {...props} type="number" />;
},
password: (props) => {
return <input {...props} type="password" />;
},
} satisfies Record<string, React.FC<InputProps>>;
- React Typescript components propsType Stronglyreact typescript components propstype typescript component strongly react react typescript component strongly components typescript generics strongly typescript strongly render react typescript component generics react components typescript arguments passing extracting components typescript custom styled-components typescript components组件 composable component context react