对 React 中如何使用接口（TypeScript）感到困惑答案

【问题标题】：Confusion with how interface (TypeScript) is used in React对 React 中如何使用接口（TypeScript）感到困惑
【发布时间】：2020-02-19 12:00:59
【问题描述】：

我是 React 中的 TypeScript 新手，正在学习如何将 TypeScript 正确集成到 React 项目中，并且卡在了 Interface 上，即为什么我们需要在 React 中使用 interface？请帮忙

【问题讨论】：

typescriptlang.org/docs/handbook/interfaces.html

标签： javascript reactjs typescript

【解决方案1】：

正如@adiga 所指出的，接口决定了值的形状。将 TypeScript 与 React 一起使用时，您可以使用接口输入您的状态和道具。

使用类组件的示例（另请参阅this 答案）：

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) {
      ...
  }

正如thisMedium 文章指出的那样，键入您的状态和道具可能有助于跟踪您的状态和道具的形状（并防止错误）。例如，您可能决定在一个文件中定义所有接口（例如src/types/index.tsx）并将您的接口导入组件文件中。

【讨论】：