类型'字符串'不能分配给类型'（URL：字符串）=>字符串'.ts（2322）

Question

我拥有此用户界面的重要版权内容：

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>
  );
}

如果我尝试这样使用它，则不会出现任何错误：

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

但是，如果我尝试这样使用它：

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

即使在其他任何地方都未指定任何“ URL”，我仍然在链接上收到此错误：

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

如何在第二种方法中使用此组件？建议使用铸造来解决类似的问题，但就我而言，将来可能会有多个链接用于调用该组件。

Answer 1

您需要这样定义道具类型

props: { link: string; text: string }

用法：

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>
  );
}