當我不將道具傳遞給功能組件時，為什么打字稿不會拋出錯誤？

Question

當我不將道具傳遞給功能組件時，為什么打字稿不會拋出錯誤？

此代碼將起作用：

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>

  );
} 

props 在第二個中傳遞，但不在第一個中傳遞。 為什么打字稿無法檢測到我沒有將道具傳遞給我的功能組件？

Answer 1

TypeScript 不要求您聲明所有函數變量。 這是它從 JavaScript 本身繼承的一個特性。 您可以定義一個省略變量的函數實現 - 並且仍然通過arguments變量訪問它們。

Answer 2

const Buttons: React.FC<Props>意思是“現在出現了一個需要一些特定參數的函數”。 但是沒有什么要求您實際使用這些參數。

=一側是外部接口。 另一方面是你在內部用它做什么。 也許你知道明天你會需要這些道具，但你今天不需要它們？ 繼續，已經定義了該類型，要求您傳入這些參數。 您可以稍后在需要時使用它們。