TypeScript语法

废话不多说直接撸码!左侧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的源码中,官方提供了方法装饰器、类装饰器、参数装饰器、属性装饰器等几种每种装饰器类型传入的参数大不相同。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,406评论 6 503
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,732评论 3 393
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 163,711评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,380评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,432评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,301评论 1 301
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,145评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,008评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,443评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,649评论 3 334
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,795评论 1 347
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,501评论 5 345
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,119评论 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,731评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,865评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,899评论 2 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,724评论 2 354