Angular航海日志 D2.初识TypeScript

我们在第一篇《Angular航海日志 D1.快速创建第一个Angular Web应用》中学习了快速搭建一个Angular应用。在文中提过，ng2是用TypeScript写的，那TS到底是啥呢？我们今天来简单学习一下。

首先，TypeScript是谷歌和微软的合作项目，巨头出品。

其次，TypeScript是ES6的超集，啥叫超集呢？H5就是H4的超集。包含关系。

如图：

ES5就是我们之前理解的JS，也被称为“普通的JS”。目前ES6和TS还并没有获得所有浏览器的支持，我们可以使用转译器来将我们的代码编译成ES5的，以支持所有浏览器。

这部分暂且按下不表。

我们先来看看TS提供了哪些特性。

TS相对于ES5有五大改善：

类型

类

注解

模块导入

语言工具包（结构、箭头函数）

我们首先看下类型：

很多人觉得，缺乏类型检查正是JS这种弱类型语言的优点，可以随便传参随便返回。但其实有强类型之后也是很爽的，比如可以再编译时就预防BUG，也可以增加代码的可读性，比如我们可以明确地知道这个变量或者这个方法是干嘛用的。

我们来看看怎么使用：

这里要解释一下的就是冒号，之前我们学js时冒号一般用于对象的键值对比如，但在TS用法就不止如此了。我们现在用来表示变量的类型，也可以作为函数参数和返回值的指定类型：

比如var name1:string = "Simba" 的意思就是定义一个string类型的变量叫name，值是Simba。

而sayHello这个函数的意思想必你也猜到了，定义一个函数，返回类型为string， 同时接收一个string类型的参数。

如果变量值和变量的类型不一致，就会报错

显然还可以定义其他类型：

这几个是比较简单的类型，如果学过Java或者C#会非常容易理解，其实我们前面已经说了一堆废话了。

可以注意一下的是数组类型，有两种写法：

还有个枚举，大家也应该熟悉吧：

枚举大家都知道，名称对应数值，默认从0开始，也就是boy=0,girl=1，我们也可以手动设置值，比如boy=3，那girl自然就递增为4了。

那如果我们啥类型都不写呢？默认其实就是any类型。

这两句话的意思是一样的。顾名思义嘛。

还有个void类型，大家更不会陌生了，无返回值。

接下来介绍下类，之前ES5采用的是基于原型的面向对象设计。在ES6中终于有了熟悉的class了。

我们学过java都知道类中，有构造函数，如果不写则默认有个无参构造，在ES6中可以存在构造函数重载，但TS中只能有一个构造函数。构造必须叫constructor。

既然有类，当然有继承，之前ES5中是基于原型链实现继承的，而在ES6中我们只需要像java一样，使用extends关键字。

这个大家也不会陌生吧，在子类构造中使用super关键字调用父类构造。

再次声明，本系列不针对0基础的前端人员。至少要把前面的文章都看完才行。

那既然有父子类继承了，当然也有接口实现了。

还有个比较有趣的箭头函数：

之前我们都是使用fuction

要注意的是，function拥有自己的this对象，而箭头函数没有，她跟环绕她的外部代码共享一个this。所以比较好的一点就是不需要self来代替了。

泛型，懂的就懂了，只是告诉你有这么个东西：

常量：

模块的导入导出：

其实很多东西都在之前的《[JavaScript从入门到放弃系列] 高级篇2.掌握ECMAScirpt6常用语法（下）》讲过了，但既然是个独立的系列，我们就再讲一下吧。

模板字符串：

好了，差不多咯。大家在昨天的ng项目中试试写写看吧。