前端开发让前端飞程序猿阵线联盟-汇总各类技术干货

TypeScript语法

2017-12-10  本文已影响163人  香榭的落叶wZw

废话不多说直接撸码!左侧TS代码,右侧编译后的JS代码。

字符串

1.多行字符串
使用``(tab上方的按键)来包裹会自动解析; 多行字符串.png
2.字符串模板
字符串模板.png
3.自动拆分字符串:注意只使用``不要加();
字符串模板.png

参数新特性

1.跟javascript相比多了些类型;
参数特性.png

Typescript中的参数类型包括:boolean / number / string / array / tuple / enum / any /(null和undefined)/ void / never。其中元祖(tuple)、枚举、任意值、void类型和never是有别于Javascript的特有类型。

2.默认参数

在Typescript中声明变量,需要加上类型声明(虽然现在存在类型推断但是还是强烈建议大家加上声明,为了自己也为了别人!),如boolean或string等。通过静态类型约束,在编译时执行类型检查,这样可以避免一些类型混用的低级错误。
示例:


默认参数.png
3.可选参数

在Javascript里,被调用函数的每个参数都是可选的,而在Typescript中,被调用函数的每个参数都是必传的。在编译时,会检查函数每个参数是否传值。简而言之,传递给一个函数的参数个数必须和函数定义时的参数个数一致。但是实际开发中经常需要根据实际需求来确定参数,这时可以添加 ? 来定义可选参数。
示例:


可选参数.png

函数新特性

1.Rest and Spread操作符 ...用来声明任意个数的参数

上面介绍的必选参数、默认参数以及可选参数共同点是只能表示某一个参数。当需要同时操作多个参数,或者并不知道会有多少参数传递进来时,就需要用到Typescript 里的剩余参数。示例:


剩余参数.png
2.generator函数:

function* yield;

控制函数的执行过程,可以手动的干预函数执行。这里就不多演示了

3.析构表达式:

通过表达式将对象或数组拆解成任意个数的变量,析构表达式又称解构,是ES6的一个重要特性,Typescript在1.5版本中开始增加了对结构的支持,所谓结构,就是将声明的一组变量与相同结构的数组或者对象的元素数值一一对应。分数组解构([])和对象解构({})两种。
数组解构示例:


析构表达式.png
4.箭头函数()=>.... ()=>{....} (xxx)=>{},消除匿名函数中this指针问题。

比较简单,与es6基本一致,这里就不做演示了。

5.循环

Typescript中涉及三种高级循环方式:forEach () for in for of
foreach示例:
特点:不支持break,会忽略属性(name);

foreach循环.png

for in 示例:
特点:循环的结果是对象或者数组的键值。可以break。


for In 循环.png

for of 示例:
特点:忽略属性,可以打断。当循环体为字符串时,会把字符串中每个字符打出来。


for of 循环.png

1.类的声明
类的声明.png

上面声明一个汽车类Car,这个类有三个类成员:类属性engine,构造函数以及drive()方法。

2.类的封装继承和多态

封装、继承、多态是面向对象的三大特性。上面的例子把汽车的行为写到一个类中,即所谓的封装。在Typescript中,使用extends关键字可以方便的实现继承。示例:


类的封装继承多态.png

Jeep子类的drive()方法重写了Car的drive()方法,这样drive()方法在不同的类中就具有不同的功能,这就是多态。注意:子类和派生类的构造函数中必须调用super(),它会实现父类的构造方法。

3.修饰符

在类中的修饰符可以分为公共(public)、私有(private)、和受保护(protected)三种类型。在Typescript里,每个成员默认为public,可以被自由的访问。
私有修饰符示例:


私有修饰符.png

ES6并没有提供对私有属性的语法支持,但是可以通过闭包来实现私有属性。

受保护修饰符示例:

受保护修饰符.png

受保护的类只有子类能访问,实例对象不能。

4.抽象类

Typescript有抽象类的概念,它是供其他类继承的基类,不能直接被实例化。不同于接口,抽象类必须包含一些抽象方法,同时也可以包含非抽象的成员。抽象类中的抽象方法必须在派生类中实现。

示例: 抽象类.png
5.接口

接口在面向对象设计中具有极其重要的作用,在Gof的23种设计模式中,基本上都可见到接口的身影。长期以来,接口模式一直是Javascript这类弱类型语言的软肋,Typescript接口的使用方式类似于Java。
在Typescript中接口有属性类型、函数类型、可索引类型、类类型这几种,在Angular的开发中主要使用类类型接口,我们使用interface关键字定义接口并用implements关键字实现接口。

类类型接口示例:


接口.png
接口更注意功能的设计,抽象类更注重结构内容的体现。

模块

ES6中引入了模块的概念,在TypeScript中也支持模块的使用。我们使用import和export关键字来建立两个模块之间的联系。

装饰器

装饰器(Decorators)是一种特殊类型的声明,它可以被附加到类声明、方法、属性或参数上。装饰器有@符号紧接一个函数名称,如:@expression,expression求职后必须是一个函数,在函数执行的时候装饰器的声明方法会被执行。装饰器是用来给附着的主题进行装饰,添加额外的行为。(装饰器属于ES7规范)
在Typescript的源码中,官方提供了方法装饰器、类装饰器、参数装饰器、属性装饰器等几种每种装饰器类型传入的参数大不相同。

上一篇下一篇

猜你喜欢

热点阅读