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

Posted 2023-02-21

【中文标题】对 React 中如何使用接口（TypeScript）感到困惑

【英文标题】：Confusion with how interface (TypeScript) is used in React

【发布时间】：2020-02-19 12:00:59

【问题描述】：

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

【问题讨论】：

typescriptlang.org/docs/handbook/interfaces.html

【参考方案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）并将您的接口导入组件文件中。