[React Typescript] Overriding and Removing Component Props
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;
}