React Typescript take part of props-CodePudding

I'm relatively new to React & TypeScript. I'm trying to extend an existing component by making a wrapper around it, but I am having issues trying to add my own values to the properties.

I want it so that the default properties (in a predefined type "TextFieldProps" from the MUI library) carry over, and I can add my own values to it. I'm doing this by making my own type as such:

type PinnableTextFieldProps = TextFieldProps & {
  pinned: boolean;
  onPin: (newValue: boolean) => void;
};

I then use it as follows:

export function PinnableTextField(props: PinnableTextFieldProps) {
  return (
    <TextField
      {...props}
      InputProps={{}}
    />
  );
}

This works fine, except that the "pinned" and "onPin" values are copied over to the TextField while they shouldn't be (TextField doesn't know what they are, and an error is printed to the console because of it)

I tried to cast it using ...(props as TextFieldProps) but it still included the properties in the spread.

How would I properly split up the props spread to only include all values inside of the TextFieldProps type, so excluding the 2 values I added?

I hope someone can point me in the right direction!

Many thanks!

CodePudding user response：

You could do something like this:

export function PinnableTextField(props: PinnableTextFieldProps) {
  const { pinned, onPin, ...rest } = props; // <= Splitting props into pinned, onPin and all other properties into rest
  // Use pinned, onPin here
  // Pass the rest of the props down to the TextField
  return (
    <TextField
      {...rest}
      InputProps={{}}
    />
  );
}