526互联

[React Typescript] Overriding and Removing Component Props

发布时间 2023-05-22 14:04:34作者: Zhentiw

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;
}