廢話不多說直接擼碼!左側(cè)TS代碼且警,右側(cè)編譯后的JS代碼。
字符串
1.多行字符串
使用``(tab上方的按鍵)來包裹會(huì)自動(dòng)解析;2.字符串模板
3.自動(dòng)拆分字符串:注意只使用``不要加()个扰;
參數(shù)新特性
1.跟javascript相比多了些類型;
Typescript中的參數(shù)類型包括:boolean / number / string / array / tuple / enum / any /(null和undefined)/ void / never葱色。其中元祖(tuple)递宅、枚舉、任意值苍狰、void類型和never是有別于Javascript的特有類型办龄。
2.默認(rèn)參數(shù)
在Typescript中聲明變量,需要加上類型聲明(雖然現(xiàn)在存在類型推斷但是還是強(qiáng)烈建議大家加上聲明淋昭,為了自己也為了別人@睢),如boolean或string等响牛。通過靜態(tài)類型約束玷禽,在編譯時(shí)執(zhí)行類型檢查,這樣可以避免一些類型混用的低級(jí)錯(cuò)誤呀打。
示例:
3.可選參數(shù)
在Javascript里矢赁,被調(diào)用函數(shù)的每個(gè)參數(shù)都是可選的,而在Typescript中贬丛,被調(diào)用函數(shù)的每個(gè)參數(shù)都是必傳的撩银。在編譯時(shí),會(huì)檢查函數(shù)每個(gè)參數(shù)是否傳值豺憔。簡而言之额获,傳遞給一個(gè)函數(shù)的參數(shù)個(gè)數(shù)必須和函數(shù)定義時(shí)的參數(shù)個(gè)數(shù)一致够庙。但是實(shí)際開發(fā)中經(jīng)常需要根據(jù)實(shí)際需求來確定參數(shù),這時(shí)可以添加 ? 來定義可選參數(shù)抄邀。
示例:
函數(shù)新特性
1.Rest and Spread操作符 ...
用來聲明任意個(gè)數(shù)的參數(shù)
上面介紹的必選參數(shù)耘眨、默認(rèn)參數(shù)以及可選參數(shù)共同點(diǎn)是只能表示某一個(gè)參數(shù)。當(dāng)需要同時(shí)操作多個(gè)參數(shù)境肾,或者并不知道會(huì)有多少參數(shù)傳遞進(jìn)來時(shí)剔难,就需要用到Typescript 里的剩余參數(shù)。示例:
2.generator函數(shù):
function* yield
;
控制函數(shù)的執(zhí)行過程奥喻,可以手動(dòng)的干預(yù)函數(shù)執(zhí)行偶宫。這里就不多演示了
3.析構(gòu)表達(dá)式:
通過表達(dá)式將對(duì)象或數(shù)組拆解成任意個(gè)數(shù)的變量,析構(gòu)表達(dá)式又稱解構(gòu)环鲤,是ES6的一個(gè)重要特性纯趋,Typescript在1.5版本中開始增加了對(duì)結(jié)構(gòu)的支持,所謂結(jié)構(gòu)冷离,就是將聲明的一組變量與相同結(jié)構(gòu)的數(shù)組或者對(duì)象的元素?cái)?shù)值一一對(duì)應(yīng)吵冒。分?jǐn)?shù)組解構(gòu)([])和對(duì)象解構(gòu)({})兩種。
數(shù)組解構(gòu)示例:
4.箭頭函數(shù)()=>.... ()=>{....} (xxx)=>{},消除匿名函數(shù)中this指針問題西剥。
比較簡單桦锄,與es6基本一致,這里就不做演示了蔫耽。
5.循環(huán)
Typescript中涉及三種高級(jí)循環(huán)方式:forEach ()
for in
for of
foreach示例:
特點(diǎn):不支持break结耀,會(huì)忽略屬性(name);
for in 示例:
特點(diǎn):循環(huán)的結(jié)果是對(duì)象或者數(shù)組的鍵值匙铡⊥继穑可以break。
for of 示例:
特點(diǎn):忽略屬性鳖眼,可以打斷黑毅。當(dāng)循環(huán)體為字符串時(shí),會(huì)把字符串中每個(gè)字符打出來钦讳。
類
1.類的聲明
上面聲明一個(gè)汽車類Car矿瘦,這個(gè)類有三個(gè)類成員:類屬性engine,構(gòu)造函數(shù)以及drive()方法愿卒。
2.類的封裝繼承和多態(tài)
封裝缚去、繼承、多態(tài)是面向?qū)ο蟮娜筇匦郧砜I厦娴睦影哑嚨男袨閷懙揭粋€(gè)類中易结,即所謂的封裝。在Typescript中,使用extends關(guān)鍵字可以方便的實(shí)現(xiàn)繼承搞动。示例:
Jeep子類的drive()方法重寫了Car的drive()方法躏精,這樣drive()方法在不同的類中就具有不同的功能,這就是多態(tài)鹦肿。注意:子類和派生類的構(gòu)造函數(shù)中必須調(diào)用super()矗烛,它會(huì)實(shí)現(xiàn)父類的構(gòu)造方法。
3.修飾符
在類中的修飾符可以分為公共(public)箩溃、私有(private)高诺、和受保護(hù)(protected)三種類型。在Typescript里碾篡,每個(gè)成員默認(rèn)為public,可以被自由的訪問筏餐。
私有修飾符示例:
ES6并沒有提供對(duì)私有屬性的語法支持开泽,但是可以通過閉包來實(shí)現(xiàn)私有屬性。
受保護(hù)修飾符示例:
受保護(hù)的類只有子類能訪問魁瞪,實(shí)例對(duì)象不能穆律。
4.抽象類
Typescript有抽象類的概念,它是供其他類繼承的基類导俘,不能直接被實(shí)例化峦耘。不同于接口,抽象類必須包含一些抽象方法旅薄,同時(shí)也可以包含非抽象的成員辅髓。抽象類中的抽象方法必須在派生類中實(shí)現(xiàn)。
5.接口
接口在面向?qū)ο笤O(shè)計(jì)中具有極其重要的作用少梁,在Gof的23種設(shè)計(jì)模式中洛口,基本上都可見到接口的身影。長期以來凯沪,接口模式一直是Javascript這類弱類型語言的軟肋第焰,Typescript接口的使用方式類似于Java。
在Typescript中接口有屬性類型妨马、函數(shù)類型挺举、可索引類型、類類型這幾種烘跺,在Angular的開發(fā)中主要使用類類型接口湘纵,我們使用interface關(guān)鍵字定義接口并用implements關(guān)鍵字實(shí)現(xiàn)接口。
類類型接口示例:
接口更注意功能的設(shè)計(jì)滤淳,抽象類更注重結(jié)構(gòu)內(nèi)容的體現(xiàn)瞻佛。
模塊
ES6中引入了模塊的概念,在TypeScript中也支持模塊的使用。我們使用import和export關(guān)鍵字來建立兩個(gè)模塊之間的聯(lián)系伤柄。
裝飾器
裝飾器(Decorators)是一種特殊類型的聲明绊困,它可以被附加到類聲明、方法适刀、屬性或參數(shù)上秤朗。裝飾器有@符號(hào)緊接一個(gè)函數(shù)名稱,如:@expression笔喉,expression求職后必須是一個(gè)函數(shù)取视,在函數(shù)執(zhí)行的時(shí)候裝飾器的聲明方法會(huì)被執(zhí)行。裝飾器是用來給附著的主題進(jìn)行裝飾常挚,添加額外的行為作谭。(裝飾器屬于ES7規(guī)范)
在Typescript的源碼中,官方提供了方法裝飾器奄毡、類裝飾器折欠、參數(shù)裝飾器、屬性裝飾器等幾種每種裝飾器類型傳入的參數(shù)大不相同吼过。