對 React 中如何使用接口（TypeScript）感到困惑

Question

我是 React 中 TypeScript 的新手，正在學習如何將 TypeScript 正確集成到 React 項目中，並被接口卡住了，也就是說，為什么我們需要在 React 中使用接口？ 請幫忙

Answer 1

正如@adiga 指出的那樣，接口決定了值的形狀。 將 TypeScript 與 React 一起使用時，您可以鍵入 state 和帶有接口的道具。

使用 class 組件的示例（另請參閱此答案）：

interface MyProps {}

interface MyState {
    foo: string;
    bar?: boolean;
}

class MyComponent extends React.Component <MyProps, MyState>  {
    constructor(props) {
        super(props);

        this.state = {
            // populate state fields according to props fields
        };
    }

    render() {
        ...
    }
}

使用功能組件的示例：

  function MyForm(props: myProps) {
      ...
  }

正如這篇Medium 文章所指出的，輸入 state 和道具可能有助於跟蹤 state 和道具的形狀（並防止錯誤）。 例如，您可能決定在單個文件中定義所有接口（例如src/types/index.tsx ）並將接口導入組件文件中。