保持联系
印度班加罗尔
[电子邮件  protected]
电话:+91 8919786847
工作查询
[电子邮件  protected]
电话:+91 8919786847

反应打字稿:这里’s Everything to Know

什么是React Typescript?

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

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

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

  • 现在包括tsconfig.json文件,用于配置Typescript编译器选项。
  • 在较新的版本中,.js文件现在被视为.tsx文件。伴随着Typescript编译器本身将拾取所有.tsx文件。 
  • @types软件包的依赖关系包含在package.json中。它还支持开箱即用的节点,笑话,响应dom甚至响应。
  • 我们还可以找到一个react-app-env.d.ts文件来引用react-scripts类型。当我们使用yarn start启动开发服务器时,会自动生成此文件。

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

安装Tslint-React?

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

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

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

 

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

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

  • defaultSeverity是将在其中处理错误的级别。错误在此处称为默认值。
  • 我们扩展的规则仅基于React。我们删除了不符合React语法的规则。
  • 我们还可以做的是忽略规则块中的规则。
  • 考虑另一个示例,ordered-imports会提示我们以字母顺序对import语句进行排序。
  • 使用LinterOptions,我们可以从TSLint检查中排除config目录中的文件中的所有Javascript文件以及node_modules中Typescript文件中存在的文件。 

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

Sublime Text 3软件包:  

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

纱添加tslint tslint反应

Vs代码扩展:  

对于Visual Studio Code的编辑器,我们必须安装TSLint扩展以获得完整的Typescript支持。利用我们现在可以处理Typescript开发的IDE,它可以’是时候让我们深入研究一些代码,学习如何将接口和类型添加到React中存在的道具和状态中。

使用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项目中引入其他考虑因素,而我们为支持该语言而进行的额外投资最终将提高在扩展应用程序时管理我们应用程序的能力。

 

 作者头像
QuikieApps
//www.qinheli.com.cn/blog

发表评论

您的电子邮件地址不会被公开。 必需的地方已做标记 *

我们使用cookie为您提供最佳体验。