TypeScrip入门—环境搭建和第一个TS代码(一)
介绍
TypeScript
扩展了 JavaScript
语法,任何已经存在的 JavaScript
程序,可以不加任何改动,在 TypeScript
环境下运行。TypeScript
只是向 JavaScript
添加了一些新的遵循 ES6
规范的语法,以及基于类的面向对象编程的这种特性。
其次,从 2016 年 9 月底发布的 Angular2
框架开始,就由 TypeScript
编写的,包括我们现在最容易的 Vue.js
的脚手架 Vue-cli 3X
也是由 TypeScript
编写的,并且 Vue-cli 3x
还支持 TypeScript
的项目生成及编写,从这一点就可以看出,其实 TypeScript
成为主流是必然的攻势,而且 TypeScript
有微软和谷歌两大巨头公司支持,肯定会越来越往好的方面发展。
TypeScript
用的是 Es6
的语法,但是大部分浏览器不支持 Es6
,所以我们必须安装它的环境,因为它的运行环境可以将我们写的 TypeScript
专成可执行的 Es5
浏览器脚本(JavaScript
)
环境搭建
要用 TypeScript
肯定首先要安装 TypeScript
,TypeScript
是需要在 NodeJs
的环境上基础上才能安装的,如何安装Node
这种傻瓜式的步骤我这里就不演示了,默认你已经安装了 Node
开发环境,我这里直接演示如何安装 TypeScript
如:
sudo npm install -g typescript
当安装完成之后,你可以通过以下命令来检测你当前安装的版本
tsc -v
我这里安装的为 3.1.6
版本,是目前最新的版本,用来学习
当我安装完成之后我在桌面新建一个目录 :TypeScript
,并且在目录里面新建一个 hello.ts
,内容如下:
export class Hello {
}
可以看到我在里面用 ES6
的语法声明了一个 class
类,其实它就是 JS
我通过命令行终端进入文件夹并且通过 typescript
的 tsc
去编译这个文件 hello.ts
的文件
cd desktop/TypeScript
tsc hello.ts
编译完成后会在当前目录下出现一个 hello.js
的可执行文件,当我打开 hello.js
的时候里面的内容被自动变成如下:
"use strict";
exports.__esModule = true;
var Hello = /** @class */ (function () {
function Hello() {
}
return Hello;
}());
exports.Hello = Hello;
可以看到他被翻译成了 Es5
可执行的 JavaScript
,其实 TS
这种写法在 Node
里面可以直接写在 JS
里面,只是浏览器还做不到真正意义上的兼容 ES6
所以我们学习 TS
对工作来说还是相当不错的,用更少的代码做更多的事情
上一篇: TypeScript获取格式化日期
下一篇: typescript中的泛型