React with Typescript passing objects via props

Question

I'm trying to pass an object via props and having an issue understanding what Typescript wants.

Do I create an interface for Props than a separate interface for the properties within the object?

What I have:

import React from 'react';

interface Props { 
  link: object;
}

interface link {
  description: string;
  url: string;
}

const Link = (props: Props) => {
  const { link } = props;
  return (
    <div>
      <div>
        { link.description }({ link.url })
      </div>
    </div>
  );
};

export default Link;

Errors I'm getting:

Property 'description' does not exist on type 'object'.  TS2339
Property 'url' does not exist on type 'object'.  TS2339

The type of link should be link, but I would just inline thag object — DownloadPizza
– DownloadPizza, Commented Dec 6, 2021 at 20:20

Daniel Baldi · Accepted Answer · 2021-12-06 20:34:06Z

4

object is never a good way to type things in TS, as you can't retrieve any information from the object (its properties and much less its properties' types). Also, you're not using this link interface that you're creating! You need to use it to type your props:

interface Link {
  description: string;
  url: string;
}

interface Props { 
  link: Link;
}

edited Dec 6, 2021 at 20:34

answered Dec 6, 2021 at 20:27

Daniel Baldi

9205 silver badges10 bronze badges

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

Comments

Jamal · Accepted Answer · 2021-12-06 20:31:20Z

1

use it like this, because Typescript can't detect that if the object has property or not:

interface Props {
  link: {
    description: string;
    url: string;
  };
}

const Link = (props: Props) => {
  const { link } = props;
  return (
    <div>
      <div>
        {link.description}({link.url})
      </div>
    </div>
  );
};

export default Link;

answered Dec 6, 2021 at 20:31

Jamal

8465 silver badges16 bronze badges

Collectives™ on Stack Overflow

React with Typescript passing objects via props

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related