Question

当我不将props传递给功能组件时，为什么打字稿不会抛出错误？

此代码将起作用：

interface Props{
id: string;
className?: string;


}

export const Buttons: React.FC<Props> = () => {

  return(

    <section>

      <div className="container">

        <p>Hellow World</p>

      </div>

    </section>

  );
}

与这个相同：

interface Props{
id: string;
className?: string;


}

export const Buttons: React.FC<Props> = (props) => {

  return(

    <section id={props.id}>

      <div className="container">

        <p>Hellow World</p>

      </div>

    </section>

  );
}

道具在第二个而不是第一个中传递。为什么打字稿无法检测到我没有将道具传递给功能组件？

Answer 1

TypeScript不需要您声明所有函数变量。这是它从JavaScript本身继承的功能。您可以定义一个省略变量的函数实现-仍然可以通过arguments变量访问它们。

Answer 2

const Buttons: React.FC<Props>的意思是“现在有一个需要一些特定参数的函数”。但是没有什么要求您真正使用这些参数。

=的一侧是外部接口。另一面是您内部使用的功能。也许您知道明天会需要这些道具，但是今天不需要。继续，已经定义了该类型，要求您传入这些参数。您可以在以后需要时使用它们。

当我不将props传递给功能组件时，打字稿为什么不抛出错误？

2 个答案: