Type 'string' is not assignable to type '(url: string) => string'.ts(2322)

Question

I have this material ui copyright component:

export default function Copyright(link: string, text: string) {
  return (
    <Typography variant="body2" color="textSecondary" align="center">
      {'Copyright © '}
      <Link color="inherit" href={link}>
        {text}
      </Link>{' '}
      {new Date().getFullYear()}
      {'.'}
    </Typography>
  );
}

If I try to use it like this, I don't get any errors:

{Copyright('https://hello.com', 'HELLO')}

However, if I try to use it like this:

<Copyright link={'https://hello.com'} text={'hello'}></Copyright>

I get this error on link even though I have not specified any 'url' anywhere else:

Type 'string' is not assignable to type '(url: string) => string'.ts(2322)

How can I use this component with the second method? A similar question suggested to use casting but in my case, there can be multiple links with which I want to call the component in the future.

keikai · Accepted Answer · 2020-03-24 15:34:30Z

4

If you want to use

<Copyright link={"https://hello.com"} text={"hello"} />

You need to define the props type like this

props: { link: string; text: string }

Usage:

function Copyright(props: { link: string; text: string }) {
  return (
    <Typography variant="body2" color="textSecondary" align="center">
      {"Copyright © "}
      <Link color="inherit" href={props.link}>
        {props.text}
      </Link>{" "}
      {new Date().getFullYear()}
      {"."}
    </Typography>
  );
}

answered Mar 24, 2020 at 15:34

keikai

15.3k10 gold badges56 silver badges73 bronze badges

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

1 Comment

Fayaz Over a year ago

Laugh on me, I don't care because I am not a web developer. But I got to learn to use props without a type from this answer. All these days I have been using a type for each function to have multiple props. Thanks!

Collectives™ on Stack Overflow

Type 'string' is not assignable to type '(url: string) => string'.ts(2322)

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related