TypeScript語法

廢話不多說直接擼碼!左側(cè)TS代碼且警,右側(cè)編譯后的JS代碼。

字符串

1.多行字符串

使用``(tab上方的按鍵)來包裹會(huì)自動(dòng)解析;
多行字符串.png
2.字符串模板
字符串模板.png
3.自動(dòng)拆分字符串:注意只使用``不要加()个扰;
字符串模板.png

參數(shù)新特性

1.跟javascript相比多了些類型;
參數(shù)特性.png

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ò)誤呀打。
示例:


默認(rèn)參數(shù).png
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ù).png

函數(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ù)。示例:


剩余參數(shù).png
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)示例:


析構(gòu)表達(dá)式.png
4.箭頭函數(shù)()=>.... ()=>{....} (xxx)=>{},消除匿名函數(shù)中this指針問題西剥。

比較簡單桦锄,與es6基本一致,這里就不做演示了蔫耽。

5.循環(huán)

Typescript中涉及三種高級(jí)循環(huán)方式:forEach () for in for of
foreach示例:
特點(diǎn):不支持break结耀,會(huì)忽略屬性(name);

foreach循環(huán).png

for in 示例:
特點(diǎn):循環(huán)的結(jié)果是對(duì)象或者數(shù)組的鍵值匙铡⊥继穑可以break。


for In 循環(huán).png

for of 示例:
特點(diǎn):忽略屬性鳖眼,可以打斷黑毅。當(dāng)循環(huán)體為字符串時(shí),會(huì)把字符串中每個(gè)字符打出來钦讳。


for of 循環(huán).png

1.類的聲明
類的聲明.png

上面聲明一個(gè)汽車類Car矿瘦,這個(gè)類有三個(gè)類成員:類屬性engine,構(gòu)造函數(shù)以及drive()方法愿卒。

2.類的封裝繼承和多態(tài)

封裝缚去、繼承、多態(tài)是面向?qū)ο蟮娜筇匦郧砜I厦娴睦影哑嚨男袨閷懙揭粋€(gè)類中易结,即所謂的封裝。在Typescript中,使用extends關(guān)鍵字可以方便的實(shí)現(xiàn)繼承搞动。示例:


類的封裝繼承多態(tài).png

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,可以被自由的訪問筏餐。
私有修飾符示例:


私有修飾符.png

ES6并沒有提供對(duì)私有屬性的語法支持开泽,但是可以通過閉包來實(shí)現(xiàn)私有屬性。

受保護(hù)修飾符示例:

受保護(hù)修飾符.png

受保護(hù)的類只有子類能訪問魁瞪,實(shí)例對(duì)象不能穆律。

4.抽象類

Typescript有抽象類的概念,它是供其他類繼承的基類导俘,不能直接被實(shí)例化峦耘。不同于接口,抽象類必須包含一些抽象方法旅薄,同時(shí)也可以包含非抽象的成員辅髓。抽象類中的抽象方法必須在派生類中實(shí)現(xiàn)。

示例:
抽象類.png
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)接口。

類類型接口示例:


接口.png
接口更注意功能的設(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ù)大不相同吼过。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末锐秦,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子盗忱,更是在濱河造成了極大的恐慌酱床,老刑警劉巖,帶你破解...
    沈念sama閱讀 206,214評(píng)論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件趟佃,死亡現(xiàn)場離奇詭異扇谣,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)闲昭,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,307評(píng)論 2 382
  • 文/潘曉璐 我一進(jìn)店門揍堕,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人汤纸,你說我怎么就攤上這事衩茸。” “怎么了贮泞?”我有些...
    開封第一講書人閱讀 152,543評(píng)論 0 341
  • 文/不壞的土叔 我叫張陵楞慈,是天一觀的道長。 經(jīng)常有香客問我啃擦,道長囊蓝,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 55,221評(píng)論 1 279
  • 正文 為了忘掉前任令蛉,我火速辦了婚禮聚霜,結(jié)果婚禮上狡恬,老公的妹妹穿的比我還像新娘。我一直安慰自己蝎宇,他們只是感情好弟劲,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,224評(píng)論 5 371
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著姥芥,像睡著了一般兔乞。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上凉唐,一...
    開封第一講書人閱讀 49,007評(píng)論 1 284
  • 那天庸追,我揣著相機(jī)與錄音,去河邊找鬼台囱。 笑死淡溯,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的簿训。 我是一名探鬼主播咱娶,決...
    沈念sama閱讀 38,313評(píng)論 3 399
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢(mèng)啊……” “哼煎楣!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起车伞,我...
    開封第一講書人閱讀 36,956評(píng)論 0 259
  • 序言:老撾萬榮一對(duì)情侶失蹤择懂,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后另玖,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體困曙,經(jīng)...
    沈念sama閱讀 43,441評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,925評(píng)論 2 323
  • 正文 我和宋清朗相戀三年谦去,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了慷丽。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,018評(píng)論 1 333
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡鳄哭,死狀恐怖要糊,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情妆丘,我是刑警寧澤锄俄,帶...
    沈念sama閱讀 33,685評(píng)論 4 322
  • 正文 年R本政府宣布,位于F島的核電站勺拣,受9級(jí)特大地震影響奶赠,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜药有,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,234評(píng)論 3 307
  • 文/蒙蒙 一毅戈、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦苇经、人聲如沸赘理。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,240評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽感憾。三九已至,卻和暖如春令花,著一層夾襖步出監(jiān)牢的瞬間阻桅,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,464評(píng)論 1 261
  • 我被黑心中介騙來泰國打工兼都, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留嫂沉,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 45,467評(píng)論 2 352
  • 正文 我出身青樓扮碧,卻偏偏與公主長得像趟章,于是被迫代替她去往敵國和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子慎王,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,762評(píng)論 2 345