TypeScript介绍与安装
本节我们来学习 TypeScript
语言。 TypeScript
看名字就和 JavaScript
很像,事实上它们两者也确实有关联。TypeScript
是 JavaScript
的超集,它对 JavaScript
进行了一些规范和补充。
TypeScript 介绍
-
TypeScript
可以编译成纯JavaScript
,编译出来的JavaScript
可以在任何游览器上运行。 -
TypeScript
可以在任何浏览器,任何计算机和任何操作系统上运行,而且它是开源的。 -
TypeScript
扩展了JavaScript
的语法,所以任何现有的JavaScript
程序可以运行在TypeScript
环境中。 -
TypeScript
起源于使用JavaScript
开发的大型项目,由于JavaScript
语言本身的局限性,难以胜任和维护大型项目开发。因此微软开发了TypeScript
,使得其能够胜任开发大型项目。
什么是超集?
上面我们说 TypeScript
是 JavaScript
的超集。那什么是超集呢?
超集的定义:如果一个集合 S2
中的每一个元素都在集合 S1
中,且集合 S1
中可能包含 S2
中没有的元素,则集合 S1
就是 S2
的一个超集。
这也就是说,JavaScript
的所有功能 TypeScript
里都有,但 TypeScript
里的功能 JavaScript
就未必有,毕竟 TypeScript
扩展提升了 JavaScript
的编写体验,例如:静态类型检查 JavaScript
就没有,而依赖 TypeScript
就可以很方便进行静态类型检查,所以 TypeScript
是 JavaScript
的超集。且 TypeScript
编写的代码,最终都可以生成标准的 JavaScript
代码。
TypeScript 的优势
-
Typescript
支持ES6
规范的语言,ES6
规范指出未来客户端脚本语言的发展方向,Typescript
脚本语言的语法会成为未来一段时间客户端语言的主流语法。 -
类型检测:在
Typescript
中为变量指定具体类型时,IDE
会做出类型检测,然后告诉你这里可能会有错误,这个特性可以帮助我们减少在开发阶段犯错几率。 -
语法提示:在
IDE
里编写Typescript
代码时,IDE
会根据你当前的上下文,把你能用的类、变量、方法和关键字都给你提示出来。直接选择,这个特性提高开发效率。 -
是
Angular2
框架的开发语言,因此Typescript
有利于我们学习Angular2
框架。Angular2
是一款开源的JavaScript
库,由谷歌维护,用来协助单一页面应用程序运行。
TypeScript 安装
在我们安装 TypeScript
之前,需要保证已经安装好了 Node.js
,如果没有安装请先安装好 Node.js
。
安装完 Node.js
之后,就可以开始安装 TypeScript
啦。
如何安装node.js
Node.js
下载地址:https://nodejs.org/en/download/,大家下载好后根据步骤安装即可。
安装完成后,我们可以在电脑上打开终端,在终端中输入 node -v
命令,如下图:
如果按下回车后,界面成功输出版本号则说明
Node.js
已经安装成功,上图表示成功安装了 v12.16.1
版本的 Node.js
。
如何安装TypeScript
Node.js
自带 npm
,我们可以通过 npm
全局安装 TypeScript
,在命令行中输入如下命令:
npm install -g typescript
按下回车键就会自动开始安装,安装完成后,显示如下图所示表示:
其中 -g
表示全局安装,typescript
表示安装的程序名。
如果想要检测安装是否成功,可以在刚刚的窗口中输入 tsc -v
命令,这样可以查看到 TypeScript
的版本号,下图中显示版本号为 3.8.3
:
Visual Studio Code
我们要学习 TypeScript
,首先选择一个适合自己的 IDE(集成开发环境)。 有很多 IDE
都支持 TypeScript
插件,例如 Visual Studio Code
、Sublime Text 2
、WebStorm
、Eclipse
等。然后我选择的是 Visual Studio Code
,所以首先我们需要下载安装 Visual Studio Code
,如果你电脑上有就不需要重新安装了。
Visual Studio Code
下载地址:https://code.visualstudio.com/。
下载后根据提示安装即可,安装完成后,打开 Visual Studio Code
软件,然后找到应用商店:
在搜索框中输入 TypeScript
,点击绿色的安装按钮,即可安装 TypeScript
插件,如下图所示(下图是已经安装好了插件,绿色按钮就会消失):
此时准备工作差不多完成了,下一节我们开始学习 Typescript
的使用。