How to describe destructured props in React in Typescript?

user_7732543 0
Viewed 1545

My component:

interface Props {
  label: string;
}

const FormDate: React.FC<Props> = ({ label, ...props }) => {

This is how I use that component:

<FormDate label="Data" name="date" type="date" />

How can i describe ...props in Typescript if I don't want to destruct "name" and "type" separately as I did with "label"?

typescript reactjs
2 Answers

In case you have an unknown amount of properties, you can also use a string index signature:

interface Props {
  label: string;
  [propName: string]: any;
}

Now you can pass any amount of properties without Typescript complaining.

user_74908710

Just add them to the interface with the correct type and use them:

interface Props {
  label: string;
  name: string;
  type: string; // or here give a more precise type like 'date'
}

const FormDate: React.FC<Props> = ({ label, ...props }) => {
user_85836690
Related