How to describe destructured props in React in Typescript?

Question

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

Depends on where are those props placed. Is it a div tag?

Rashomon
– Rashomon

2020-09-25 07:43:08 +00:00
Commented Sep 25, 2020 at 7:43 — Rashomon
– Rashomon, Commented Sep 25, 2020 at 7:43

Gh05d · Accepted Answer · 2020-09-25 08:09:24Z

2

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.

answered Sep 25, 2020 at 8:09

Gh05d

9,08211 gold badges42 silver badges84 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

johannchopin Over a year ago

Correct but what's the goal of using TypeScript in this case?

Gh05d Over a year ago

Make your coworkers happy and reduce the impact on your personal productivity ;-)

johannchopin Over a year ago

How can they be happy? If you should use a tool, use it the right way.

Gh05d Over a year ago

In a perfect world, yes.

johannchopin · Accepted Answer · 2020-09-25 07:39:04Z

1

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

answered Sep 25, 2020 at 7:39

johannchopin

15k11 gold badges64 silver badges125 bronze badges

Collectives™ on Stack Overflow

How to describe destructured props in React in Typescript?

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related