当前您所在的位置:首页>新闻中心>新品发布
新品发布
行业动态
营销活动

TypeScript :Microsoft的一种开源,强类型,面向对象的编译语言

发布时间:2021/03/03 浏览量:2054

在这篇文章中,将用简单明了的术语来介绍TypeScript中mixins的概念,所以即使你对这个概念很生,你也可以跟着学,并且有足够的动力将这个工具采用到你的工作流程中。

 

 

 

 

TypeScript

TypeScript是Microsoft开发和维护的一种开源,强类型,面向对象的编译语言。它是数百万个项目(在GitHub上超过200万个)使用的非常流行的JavaScript的超集,该项目旨在将静态类型引入现代JavaScript。 TypeScript编译器读取TypeScript代码,该代码具有类型声明和类型批注之类的内容,并发出经过转换和删除的那些结构的清晰可读的JavaScript。

 

您将学到什么

本文介绍了TypeScript中混合宏的概念和用法以及它们为什么很重要。它将涵盖语法,类型和参数的构建方式,并附带清晰定义的示例,您可以在所选的集成开发环境中进行后续操作。

 

前提条件

为了正确地进行操作并从本文中学习,您将需要在计算机上准备以下内容:

 

安装Node:可以通过以下命令检查是否已经安装了Node:

节点-v

安装Node软件包管理器:Node通常带有必需版本的npm。

TypeScript的安装:如果安装了Node软件包管理器,则可以使用它通过以下命令在计算机上全局安装TypeScript:

npm install -g TypeScript

集成开发环境(IDE):在本文中,您将使用Microsoft团队提供的Visual StudioCode。您可以在这里下载。转至下载文件的位置,并按照提示进行安装,并记住单击“使用代码添加打开”选项,以便您可以轻松地从计算机中的任何文件夹访问VS Code。

在您选择的位置创建一个新文件夹,然后在您的IDE中打开它。

在此新文件夹中创建一个名为test.ts的文件,您将在使用过程中亲自测试本教程中的所有示例。

本文是为具有各种知识水平的TypeScript开发人员编写的,其中包括但不完全针对初学者。但是,添加了设置工作环境的步骤,以使TypeScript和Visual Studio Code应用程序的新开发人员受益。

 

TypeScript中扩展类

就像许多面向对象的编程语言一样,TypeScript也具有类。类是用于创建对象的蓝图-它们基本上用于封装在对象中找到的数据。可以像下面这样定义TypeScript类:

 

 

 

 

此类包含一个称为提醒的函数,该函数将一个字符串记录在DOM的控制台中。如果您有新分类,请:

 

 

而且,如果您想拥有一个扩展了我们已经定义的两个类的类,以便可以在新类中访问它们,TypeScript不允许这样做,因此将其标记为错误。您可以这样尝试:

 

 

 

问题

如果你试过这样做,你会看到吱吱作响的线条,当你把目光停留在IDE上时,会告诉你TypeScript类只能扩展一个类。这个问题,当你在第一时间遇到的时候,你可能会想起接口。

 

接口

在TypeScript中,类只能扩展一个类,但一个接口可以扩展多个类。使用TypeScript接口来解决我们的问题。

 

 

 

我们创建一个接口,然后尝试查看是否可以访问我们已经定义的两个类中的函数。如果您在终端中运行build:

 

 

 

您将在构建的终端中看到一个错误,提示提醒和结尾均不起作用。这是因为TypeScript接口即使可以扩展类,也没有类的实现。这使我们回到最初的问题,即在TypeScript的新类中不能访问多个类。

 

解决方案: Mixins

Mixins是一种在面向对象的编程范例中实现重用组件的方法。因此,对于我们的问题空间,我们可以仅使用带有一个辅助函数的mixins来指定所需的行为,即在TypeScript的新类中扩展两个类。因此,如果您是前端开发人员并使用SASS,则您可能熟悉mixins。这是相同的概念,但用于扩展类。可以在TypeScript的官方文档中找到帮助程序功能。

 

 

现在,您可以使用ApplyMixins函数描述您想要的内容,因此对于我们的ts文件,它们将全部组合在一起,如下所示:

 

引入辅助函数后,它会通过遍历每个mixins的属性并将其复制到mixins的目标,并通过其实现填充替代属性来为我们进行混合。现在,ApplyMixins函数可以帮助您指定要查看的确切接口并执行扩展。

 

如果您再次重新运行构建代码,则应该看到终端现在已经成功地从订阅类中的提醒功能中打印了“记住要订阅我的频道”,并在YouTube的结束功能中成功打印了“谢谢您观看我的视频” 课,就像我们想要的。

 

总结

这是有关TypeScript中的mixin的介绍性文章,它们如何帮助实现扩展类以及如何在工作流中使用它们。

北京哲想软件有限公司