QuikieApps

反应打字稿:这是您需要知道的一切

什么是React Typescript?

您想增强React应用程序的稳定性吗?然后,打字稿就是您要找的答案! Typescript是使您的应用程序更加清晰和整洁的出色工具。 Typescript软件包一直在引入新的软件包,以稳定地在React中提供更多支持。我们可以看到这些功能特别是从3.0版本升级到3.1版本。 Typescript与React的集成曾经让开发人员感到头疼。但是目前,这是一个非常简单的过程,我们将在当前文章中进行讨论。

在之前的一篇文章中,我们非常详细地介绍了Create 反应 App。当前,Create 反应 App还具有内置于其包中的Typescript的支持。打字稿只是通过模板成绩单的标志来引入一个新项目。在这里,我们将专门使用CRA引导基于Typescript的React应用程序。但是在探索之前,我们先来看一下它的设置。

如果看到基于JavaScript的CRA样板,我们可以发现各种明显的变化:

当我们运行纱头时,在该阶段我们将编译并运行我们的应用程序。 

安装Tslint-React?

对于Typescript和React来说,非常有用的一点是安装所需的整理工具。在这里,我们将参考工具提示以获取特定类型,这对于事件尤其如此。 

纱线全局添加打字稿tslint反应

作为示例,您可以使用我们显示的示例:

 

此命令将生成一个tslint.json文件。它具有一些默认选项,但是也可以用自定义文件替换它们。选择完全取决于您。作为示例,您可以使用我们显示的示例:

我们可以总结出此文件中实际发生的情况,如下所示:

到目前为止,我们已经进行了讨论,现在可以进入建立开发环境的最后一步。

Sublime Text 3软件包: 

最后一步是安装SublimeLinter,然后通过软件包控件安装SublimeLinter-eslint软件包。当我们重新启动Sublime Text时,这些工具已经可用。您应该记住,很可能会收到错误消息。这将显示,当我们重新启动Sublime Text时,tslint模块无法找到。如果您必须面对这个问题,最好的方法是在本地重新安装软件包,而不是像我们先前选择的那样在全局进行安装。按照文档说明,应该可以解决所有这些问题。

纱添加tslint tslint反应

Vs代码扩展: 

对于Visual Studio Code的编辑器,我们必须安装TSLint扩展以获得完整的Typescript支持。现在,我们的IDE已经可以处理Typescript开发了,现在该让我们深入一些代码并学习如何将接口和类型添加到React中的props和state中。

使用Redux的打字稿: 

我们之前已经详细讨论了Redux如何与React一起使用,在这里我们将讨论Typescript与Redux的配合使用。此过程涉及的步骤为:

键入商店: 

第一步是为我们选择的Redux存储库定义一个接口。如果我们定义期望状态结构,那么这对于我们的团队将非常有益,并且还将有助于维护应用程序的期望状态。

定义动作类型和动作: 

操作类型基于const模式的用法&类型。这些对象随后被导入,我们可以在其中轻松定义动作接口和动作本身。我们可以一路输入。

定义减速器: 

为了使我们简化指定reducer内任何动作的过程,我们可以做的就是利用Typescript 4.1中引入的并集类型。联合类型的作用只是使我们能够将两个或多个类型组合为一个类型。

创建初始商店: 

现在,我们可以在index.tsx中启动商店,并再次使用尖括号将类型与createStore()一起传递。 

接口在组件上的应用:

如果您想知道我们可以在哪里应用这些接口,那么您想知道我们可以对类组件和无状态函数组件进行操作。对于类组件,我们将利用尖括号语法分别应用属性和状态接口。如果您想定义状态但没有任何道具,那么有一种方法可以做到。我们可以使用{}或object代替FormProps。这两个值都是有效对象和空对象。当涉及到无状态函数组件时,我们可以做的是传递props接口,该接口后面可以跟任何其他参数以及它们具有的特定接口。

结论: 

在本文中,我们介绍了Typescript和React,以及如何利用tslint-react进行更平滑的开发。我们讨论了如何在我们拥有的所有组件中接口和键入道具和状态,以及如何处理添加事件的Typescript。最后但并非最不重要的一点是,我们知道可以将Typescript与Redux集成在一起。也可以使用Redux设置集成类型。 Typescript的作用是在我们正在构建的React项目中引入其他考虑因素,而我们为支持该语言而进行的额外投资最终将提高在扩展应用程序时管理我们应用程序的能力。

 

Exit mobile version