TypeScript是一种由微软开发的支持ES6标准的编程语言,它是Angular2的开发语言,是javascript的超集。TypeScript扩展了Javascript的语法,任何已
经存在的Javascript程序可以不加任何改动的在TypeScript的环境下运行。TypeScript只是向Javascript添加了一些新的遵循ES6规范的语法以及基于类
的面向对象编程的特性。它可以编译成纯Javascript,可以在任何浏览器,任何计算机和任何操作系统上运行,并且是开源的。
ES5 ES6 JavaScript TypeScript间的关系
ES是客户端脚本语言的规范,ES5、ES6是这个规范不同的版本,JavaScript和TypeScript是两种客户端脚本语言,JavaScript实现了ES5规范,
TypeScript实现了ES6规范。
TypeScript相对于JavaScript的优势
1. TypeScript支持ES6规范
ES6规范在2015年发布,它指出了未来一段时间内客户端脚本语言的发展方向。也就是说TypeScript语法在未来一段时间内将成为客户端脚本语言的主流语法。
2. 强大的IDE支持
强大的IDE支持主要体现在三个特性上:
<1>. 类型检查:在TypeScript里面是允许你为变量指定类型的,比如声明了一个字符串变量,那么当我为变量制定一个数字类型的值的时候,IDE会做出类型检查,会告诉你这
里可能有错误。这个特性会减少在开发阶段犯错误的几率。
<2>. 语法提示:在IDE里编写TypeScript的代码时,IDE会根据你当前所处的上下文把你能用的类、变量、方法和关键字都提示出来,我们只要直接去选就可以了。这个特性会
大大提高开发效率。
<3>. 重构:可以很方便的去修改你的变量、方法的名字或者是文件的名字。当我们做了这些修改的时候,IDE会自动帮你吧引用的变量或者调用这个方法的代码自动帮你修改
掉。这个特性可以提高开发效率,提高代码质量。
推荐WebStorm开发TypeScript程序,查看《使用WebSorm开发TypeScript的设置》。
3. Angular2的开发语言
最新的Angular2就是由TypeScript写成的,所以熟悉TypeScript对学习Angular有很大帮助。
搭建TypeScript开发环境
有两种主要的方式安装TypeScript工具
- 通过npm(Node.js包管理器)
- 安装TypeScript的Visual Studio插件
这里只讲述通过npm的方式安装TypeScript:
1.安装npm
$ curl http://npmjs.org/install.sh | sh
$ npm --v
4.4.1
2.安装TypeScript npm包
$ npm install -g typescript
安装完成后我们就可以使用 TypeScript 编译器,名称叫 tsc,可将编译结果生成 js 文件。
要编译 TypeScript 文件,可使用如下命令:
tsc filename.ts
一旦编译成功,就会在相同目录下生成一个同名 js 文件,你也可以通过命令参数来修改默认的输出名称。默认情况下编译器以ECMAScript 3(ES3)
为目标但ES5也是受支持的一个选项。TypeScript增加了对ECMAScript 6标准所建议的特性的支持。
创建Hello World示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Learning TypeScript</title>
</head>
<body>
<script src="js/hello.js"></script>
</body>
</html>
创建hello.ts文件,*.ts是TypeScript文件的后缀,向hello.ts文件添加如下代码:
alert('hello world in TypeScript!');
接下来,打开命令行,使用tsc命令编译hello.ts文件: