CODEWITHSUNDEEP
reactjstypescript
Mimoid
Mimoid

Reputation: 822

How to describe destructured props in React in Typescript?

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"?

Upvotes: 3

Views: 3417

Answers (2)

Gh05d
Gh05d

Reputation: 9002

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.

Upvotes: 2

johannchopin
johannchopin

Reputation: 14873

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 }) => {

Upvotes: 1

Related Questions