你所不知道的TypeScript简介

Posted 2021-11-22 枯木前头万木春

TypeScript是由微软公司在2012年正式发布，现在也有8年的不断更新和维护了，TypeScript的成长速度是非常快的，现在已经变成了前端必会的一门技能。TypeScript其实就是javascript的超集，也就是说TypeScript是建立在JavaScript之上的，最后都会转变成JavaScript。这就好比漫威里的钢铁侠，没穿装甲之前，他实力一般，虽然聪明有钱，但还是接近人类。但是有了装甲，他就厉害太多了，甚至可以和神干一架。

---

也许你会觉得我这说的太夸张，我刚开始学习时，也是这样想的，但是用了2年左右，特别是大型项目中，真的好用。比如说它的扩展语法、面向对象、静态类型。如果一个前端项目我可以做主，我会在强烈的要求所有人都使用TypeScript的语法进行编程。

使用VSCode进行编写代码

我的所有前端课程都是使用VSCode进行编写代码的，因为这是我在工作中用的最多的编辑器，也是目前我认为最好用的编辑器。

下载地址：https://code.visualstudio.com/

如果你已经参加了工作，我相信你身边至少有80%以上的前端，在使用这款编辑器。

使用VSCode讲解，还有一个主要的愿意就是他们都是微软出的产品，所以有很好的兼容性和支持，VSCode上有很多专门为TypeScript专门作的语法适配，所以在编写时就会轻松快乐起来。

TypeScript开发环境搭建

如果你想使用TypeScript来编写代码，你需要先安装一下它的开发环境，这并不复杂。

1.安装Node的运行环境

你可以到Node.js官网去下载Node进行安装(https://node.js.org)，建议你下载LTS版本,也就是长期支持版本。安装的过程我就不演示了，这个过程就和安装QQ一样，没有任何难度。

如果你已经安装了，可以打开命令行工具，然后使用node -v命令查看安装的版本，但是一般还有一个命令需要检测一下，就是npm -v,如果两个命令都可以输出版本号，说明你的Node安装已经没有任何问题了。

2.全局安装typeScript

你要使用TypeScript先要在你的系统中全局安装一下TypeScript，这里你可以直接在VSCode中进行安装，安装命令可以使用npm也可以使用yarn

npm install typescript -g

yarn global add typescript

这两个你使用那个都是可以的，根据喜好自行选择，我在视频中使用的npm进行安装。

3.建立项目目录和编译TS文件

在E盘(当然你可以在你喜欢的任何一个地方安装)，新建一个目录，我这里起的目录名字叫做TypeScriptDemo，然后把这个文件在VSCode中打开。我在视频里用了命令行的形式建立，直接使用ctrl+r打开运行，然后在运行的文本框里输入cmd，回车后，打开命令行工具，在命令行中输入下面的命令。

e:

mkdir TypeScriptDemo

完成后，打开E盘，打开VSCode，把新建立的文件夹拖入到VSCode当中，新建一个Demo1.ts文件，写入下面代码：

 function jspang(){
    let web: string="Hello World"
    console.log(web)
 }

 jspang()

这时候你使用node Demo1.ts是执行不成功的，因为Node不能直接运行TypeScript文件，需要用tsc Demo1.ts转换一下，转换完成后typeScript代码被编译成了javaScript代码,新生成一个demo1.js的文件，这时候你在命令行输入node Demo1.js,在终端里就可以顺利的输出jspang的字符了。

4.ts-node的安装和使用

但是这样操作的效率实在是太低了，你可以使用ts-node插件来解决这个问题，有了这个插件，我们就不用再编译了，而使用ts-node就可以直接看到编写结果。

使用npm命令来全局安装，直接在命令行输入下面的命令：

npm install -g ts-node

安装完成后，就可以在命令中直接输入如下命令，来查看结果了。

ts-node Demo1.ts

---