正文 

当前位置： 首页 > 源码 >

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

     2023-02-21     145

关键词：

【中文标题】对 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）并将您的接口导入组件文件中。

【讨论】：

在基于vue-next-admin的vue3+typescript前端项目中，为了使用方便全局挂载的对象接口(代码片段)

在基于vue-next-admin的Vue3+TypeScript前端项目中，可以整合自己的.NET后端，前端操作一些功能的时候，为了使用方便全局挂载的对象接口，以便能够快速处理一些特殊的操作，如消息提示、辅助函数、正则测试等等。本篇随笔介绍在... 查看详情

如何在带有 Jest 的 react-native 中使用模拟的 fetch() 对 API 调用进行单元测试

】如何在带有Jest的react-native中使用模拟的fetch()对API调用进行单元测试【英文标题】：HowtounittestAPIcallswithmockedfetch()inreact-nativewithJest【发布时间】：2016-07-0408:13:56【问题描述】：在ReactNative中，我使用fetch来执行网络请求，但是fet... 查看详情

如何对未使用的导入进行 create-react-app 检查

】如何对未使用的导入进行create-react-app检查【英文标题】：Howtomakecreate-react-appcheckforunusedimports【发布时间】：2021-02-1821:36:24【问题描述】：我主要使用create-react-app来启动一个新的React项目。几天前，我第一次尝试了Vue，它有这... 查看详情

如何使用 react-table 对数据进行自动换行？

】如何使用react-table对数据进行自动换行？【英文标题】：Howtodoword-wrapfordatausingreact-table?【发布时间】：2018-07-2821:52:49【问题描述】：我使用https://react-table.js.org/#/story/readme来显示来自服务器响应的表格。但对于长度较长的列数... 查看详情

React，如何在 axios 请求的对象中对数组进行包含

】React，如何在axios请求的对象中对数组进行包含【英文标题】：React,howtodoanincludeonanarraywithinanaxiosrequestedobject【发布时间】：2020-01-1713:22:34【问题描述】：我正在做一个项目，我有一个可以有多个类别的项目。类别ID作为数组存... 查看详情

浏览器可以直接调用react项目里的代码接口吗

...览器中访问React项目的代码接口，可以通过暴露API接口或使用跨域方案来实现。具体步骤如下：1.在React项目中定义API接口可以使用Express.js或其他Web框架定义API接口，将接口暴露给浏览器端。2.使用跨域解决方案通过设置CORS（跨... 查看详情

如何使用样式组件扩展（MUI）React 组件的 TS 接口？

】如何使用样式组件扩展（MUI）React组件的TS接口？【英文标题】：HowtoextendTSinterfacefor(MUI)ReactComponentusingstyled-components?【发布时间】：2021-09-1906:19:42【问题描述】：我一直在试图弄清楚如何解决这个过载问题，但到目前为止还没... 查看详情

如何在 React 中使用带有钩子的生命周期方法？

】如何在React中使用带有钩子的生命周期方法？【英文标题】：HowtouselifecyclemethodswithhooksinReact?【发布时间】：2019-04-1208:36:19【问题描述】：我已经了解了reactv16.7.0中引入的钩子。https://reactjs.org/docs/hooks-intro.html所以我对钩子的理... 查看详情

React - 如何使用上下文从对象中应用多个值

】React-如何使用上下文从对象中应用多个值【英文标题】：React-Howtoapplymultiplevaluesfromanobjectusingcontext【发布时间】：2021-04-2920:52:15【问题描述】：为此，我在我的项目中使用了一个颜色主题，我使用了一个React上下文来传递几个... 查看详情

如何在 React 和 Webpack 中使用 Jest

】如何在React和Webpack中使用Jest【英文标题】：HowtouseJestwithReactandWebpack【发布时间】：2017-03-3009:36:05【问题描述】：我试图将Jest配置为与React和Webpack一起使用。由于我使用Webpack别名和ES6模块导出的方式，我在配置它时遇到了很... 查看详情

使用类型别名与接口在 Typescript 中注释 React 功能组件

】使用类型别名与接口在Typescript中注释React功能组件【英文标题】：AnnotatingReactfunctionalcomponentinTypescriptwithTypeAliasvsInterface【发布时间】：2020-05-0618:42:49【问题描述】：问题：我正在用Typescript重写我的React应用程序。我正在尝试... 查看详情

如何在 React 中使用 Tailwind CSS 来配置 Create React App？ [关闭]

】如何在React中使用TailwindCSS来配置CreateReactApp？[关闭]【英文标题】：HowtouseTailwindCSSinReacttoconfigureCreateReactApp?[closed]【发布时间】：2021-09-0615:23:44【问题描述】：我对使用tailwindcss和react应用程序很陌生。我已经按照tailwindcss的指... 查看详情

如何使用postman对http协议接口测试

...行测试，通过测试后才开始在开发中使用。这里介绍一下如何在chrome浏览器利用postman应用进行restfulapi接口请求测试。 查看详情

如何在 React.js 中按字母顺序对数组中的对象进行排序

】如何在React.js中按字母顺序对数组中的对象进行排序【英文标题】：howtosortanobjectalphabeticallywithinanarray,inReact.js【发布时间】：2018-06-0810:52:47【问题描述】：我正在使用React.js和firebase制作一个应用程序，用户可以在其中输入姓... 查看详情

如何在 React Native 中使用 Node Events 模块

】如何在ReactNative中使用NodeEvents模块【英文标题】：HowtorequireNodeEventsmoduleinReactNative【发布时间】：2015-10-1304:52:07【问题描述】：如何在我的ReactNative项目中需要eventsNode模块？我遇到了util和http的一些模块依赖问题，我通过使用Br... 查看详情

如何解决 create-react-app 的问题？

】如何解决create-react-app的问题？【英文标题】：howtosolveproblemwithcreate-react-app?【发布时间】：2021-12-2805:48:07【问题描述】：npmERR!errnoERR_SOCKET_TIMEOUTnpmERR!networkInvalidresponsebodywhiletryingtofetchhttps://registry.npmjs.org/@typescrip 查看详情

在 Typescript/React 中使用一种或另一种接口类型

】在Typescript/React中使用一种或另一种接口类型【英文标题】：UseoneoranotherinterfacetypeinTypescript/React【发布时间】：2022-01-1917:59:08【问题描述】：有这种类型：exportinterfaceIMyTypesFirst:name:string;city:string;country:string;status:string;;Second:name... 查看详情

如何使用 GO + REACT 在浏览器中保存 cookie？

】如何使用GO+REACT在浏览器中保存cookie？【英文标题】：HowtosavecookiesinbrowserusingGO+REACT?【发布时间】：2021-04-2423:57:16【问题描述】：我使用reactoverGorest-API创建了一个登录页面，但我发现Browser没有保存在登录阶段建立的cookie。我... 查看详情