TypeScript 简介
TypeScript 是由微软公司在 2012 年正式发布,现在也有 8 年的不断更新和维护了,TypeScript 的成长速度是非常快的,现在已经变成了前端必会的一门技能。TypeScript 其实就是 JavaScript 的超集,也就是说 TypeScript 是建立在 JavaScript 之上的,最后都会转变成 JavaScript。这就好比漫威里的钢铁侠,没穿装甲之前,他实力一般,虽然聪明有钱,但还是接近人类。但是有了装甲,他就厉害太多了,甚至可以和神干一架。
也许你会觉的我这说的太夸张,我刚开始学习时,也是这样想的,但是用了 2 年左右,特别是大型项目中,真的好用。比如说它的扩展语法、面向对象、静态类型。如果一个前端项目我可以做主,我会在强烈的要求所有人都使用 TypeScript 的语法进行编程。
使用VSCode进行编写代码
如果你已经参加了工作,我相信你身边至少有 80%以上的前端,在使用这款编辑器。
使用 VSCode 讲解,还有一个主要的愿意就是他们都是微软出的产品,所以有很好的兼容性和支持,VSCode 上有很多专门为 TypeScript 专门作的语法适配,所以在编写时就会轻松快乐起来。
TypeScript开发环境搭建
如果你想使用 TypeScript 来编写代码,你需要先安装一下它的开发环境,这并不复杂。
1.安装Node的运行环境
你可以到Node.js
官网去下载 Node 进行安装(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文件
在你电脑的某个地方新建一个文件夹,存放typeScript的练习代码,然后拖进VSCode中,新建一个 Demo1.ts
文件,写入下面代码:
function test() {
let web: string = "Hello World";
console.log(web);
}
test();
这时候你使用node Demo1.ts
是执行不成功的,因为 Node 不能直接运行TypeScript
文件,需要用tsc Demo1.ts
转换一下,转换完成后typeScript
代码被编译成了javaScript
代码,新生成一个Demo1.js
的文件,这时候你在命令行输入node Demo1.js
,在终端里就可以顺利的输出字符了。
4.ts-node 的安装和使用
但是这样操作的效率实在是太低了,你可以使用ts-node
插件来解决这个问题,有了这个插件,我们就不用再编译了,而使用ts-node
就可以直接看到编写结果。
使用npm
命令来全局安装,直接在命令行输入下面的命令:
npm install -g ts-node
安装完成后,就可以在命令中直接输入如下命令,来查看结果了。
ts-node Demo1.ts
好了,今天就学这么多吧,恭喜你有学会了新的编程技能,小伙伴们,加油!!!