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项目中试试写写看吧。

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180222G0ZOJD00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券