Using Omit
import { ComponentProps } from 'react';
import { Equal, Expect } from '../helpers/type-utils';
export const Input = (
props: Omit<ComponentProps<'input'>, 'onChange'> & {
onChange: (value: string) => void;
}
) => {
return (
<input
{...props}
onChange={(e) => {
props.onChange(e.target.value);
}}
></input>
);
};
const Parent = () => {
return (
<Input
onChange={(e) => {
console.log(e);
type test = Expect<Equal<typeof e, string>>;
}}
></Input>
);
};
Better
import { ComponentProps } from 'react';
import { Equal, Expect } from '../helpers/type-utils';
type InputProps = Omit<ComponentProps<'input'>, 'onChange'> & {
onChange: (value: string) => void;
}
export const Input = (
props: InputProps
) => {
return (
<input
{...props}
onChange={(e) => {
props.onChange(e.target.value);
}}
></input>
);
};
const Parent = () => {
return (
<Input
onChange={(e) => {
console.log(e);
type test = Expect<Equal<typeof e, string>>;
}}
></Input>
);
};
Even Better:
type OverrideProps<T, TOverriden> = Omit<T, keyof TOverridden> & TOverridden;
type InputProps = OverrideProps<ComponentProps<"input">, {onChange: (value: string) => void}>
Using interface:
interface InputProps extends Omit<ComponentProps<"input">, "onChange"> {
onChange: (value: string) => void;
}
- Overriding Typescript Component Removing Reactoverriding typescript component removing typescript component strongly react typescript component generics react react typescript component strongly typescript component function generic composable component context react handlechange component function react component server react 项目react component不断 typescript workspace monorepo react