日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
這六個(gè)TS新特性經(jīng)常用到，用了之后我再也離不開它！

今天來介紹一下 TypeScript 的一些較新的功能和進(jìn)展，這些是我在日常工作中經(jīng)常在用的功能。

創(chuàng)新互聯(lián)堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都網(wǎng)站制作、成都網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的清苑網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

在構(gòu)造函數(shù)中直接定義屬性

Typescript 中可以通過構(gòu)造函數(shù)的參數(shù)直接定義屬性，我們來先看早期的做法：

 
 
 
 
    
  
  
  
  
  1. class Note { 
    2.   
  
  
  
  2.   public title: string; 
    3.   
  
  
  
  3.   public content: string; 
    4.   
  
  
  
  4.   private history: string[]; 
    5.   
  
  
  
  5.    
    6.   
  
  
  
  6.   constructor(title: string, content: string, history: string[]) { 
    7.   
  
  
  
  7.     this.title = title; 
    8.   
  
  
  
  8.     this.content = content; 
    9.   
  
  
  
  9.     this.history = history; 
    10.   
  
  
  
  10.      
    11.   
  
  
  
  11.   } 
    12.   
  
  
  
  12. } 
    13.

采用 ts 中簡(jiǎn)寫的語(yǔ)法：

 
 
 
 
    
  
  
  
  
  1. class Note { 
    2.   
  
  
  
  2.   constructor( 
    3.   
  
  
  
  3.      public title: string,  
    4.   
  
  
  
  4.      public content: string,  
    5.   
  
  
  
  5.      private history: string[] 
    6.   
  
  
  
  6.   ){ 
    7.   
  
  
  
  7.     // 這里不用在寫 this.title = title 
    8.   
  
  
  
  8.   } 
    9.   
  
  
  
  9. } 
    10.

它可能看上去不像是有屬性的類，但它確實(shí)有，利用的是 Typescript 提供的簡(jiǎn)寫形式 — 用構(gòu)造函數(shù)的參數(shù)直接定義屬性。

這個(gè)簡(jiǎn)寫語(yǔ)法做了很多：

  • 聲明了一個(gè)構(gòu)造函數(shù)參數(shù)及其類型
  • 聲明了一個(gè)同名的公共屬性
  • 當(dāng)我們 new 出該類的一個(gè)實(shí)例時(shí)，把該屬性初始化為相應(yīng)的參數(shù)值

空值合并

??其實(shí)沒啥意思，就是Nullish Coalescing (空值合并)。聽起來有點(diǎn)懵，我們直接上代碼

 
 
 
 
    
  
  
  
  
  1. const i = undefined 
    2.   
  
  
  
  2. const k = i ?? 5 
    3.   
  
  
  
  3. console.log(k) // 5 
    4.   
  
  
  
  4.  
    5.   
  
  
  
  5. // 3.9.2編譯 
    6.   
  
  
  
  6. const i = undefined; 
    7.   
  
  
  
  7. const k = i !== null && i !== void 0 ? i : 5; 
    8.   
  
  
  
  8. console.log(k); // 5 
    9.

這個(gè)時(shí)候你肯定是想說了這樣不就完了嗎?

 
 
 
 
    
  
  
  
  
  1. let k = i || 5 
    2.

雖然這樣也用，但是你不覺得很不嚴(yán)謹(jǐn)嗎?如果i = 0呢?

私有類字段

TypeScript 3.8 將支持 ECMAScript 私有字段，千萬別和 TypeScript private 修飾符 混淆。

這是在 TypeScript 中具有私有類字段的類：

 
 
 
 
    
  
  
  
  
  1. class Animal { 
    2.   
  
  
  
  2.   #name: string; 
    3.   
  
  
  
  3.   constructor(theName: string) { 
    4.   
  
  
  
  4.     this.#name = theName; 
    5.   
  
  
  
  5.   } 
    6.   
  
  
  
  6. } 
    7.

在private關(guān)鍵字之上使用私有類字段的區(qū)別在于前者有更好的運(yùn)行時(shí)保證。用private關(guān)鍵字聲明的 TypeScript 字段將在編譯后的JavaScript代碼中成為常規(guī)字段。另一方面，私有類字段在編譯后的代碼中仍然是私有的。

試圖在運(yùn)行時(shí)訪問私有類字段將導(dǎo)致語(yǔ)法錯(cuò)誤。我們也使用瀏覽器開發(fā)工具也檢查不了私有類字段。

有了私有類字段，我們終于在JavaScript中得到了真正的隱私。

命名元組類型(Labeled tuple types)

命名元組類型適需要 TypeScript 4.0及以上版本才能使用，它極大的改善了我們的開發(fā)體驗(yàn)及效率，先來看一個(gè)例子:

 
 
 
 
    
  
  
  
  
  1. type Address = [string, number] 
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3. function setAddress(...args: Address) { 
    4.   
  
  
  
  4.   // some code here 
    5.   
  
  
  
  5.   console.log(args) 
    6.   
  
  
  
  6. } 
    7.

當(dāng)我們這樣定義函數(shù)入?yún)⒑?，在使用函?shù)時(shí)，編輯器的智能提示只會(huì)提示我們參數(shù)類型，丟失了對(duì)參數(shù)含義的描述。

為了改善這一點(diǎn)，我們可以通過 Labeled tuple types，我們可以這樣定義參數(shù)：

 
 
 
 
    
  
  
  
  
  1. type Address = [streetName: string, streetNumber: number] 
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3. function setAddress(...args: Address) { 
    4.   
  
  
  
  4.   // some code here 
    5.   
  
  
  
  5.   console.log(args) 
    6.   
  
  
  
  6. } 
    7.

這樣，在調(diào)用函數(shù)時(shí)，我們的參數(shù)就獲得了相應(yīng)的語(yǔ)義，這使得代碼更加容易維護(hù)。

模板字面量類型

自 ES6 開始，我們就可以通過模板字面量(Template Literals)的特性，用反引號(hào)來書寫字符串，而不只是單引號(hào)或雙引號(hào)：

 
 
 
 
    
  
  
  
  
  1. const message = `text`; 
    2.

正如 Flavio Copes 所言，模板字面量提供了之前用引號(hào)寫的字符串所不具備的特性：

  • 定義多行字符串非常方便
  • 可以輕松地進(jìn)行變量和表達(dá)式的插值
  • 可以用模板標(biāo)簽創(chuàng)建 DSL(Domain Specific Language，領(lǐng)域特定語(yǔ)言)

模板字面量類型和 JavaScript 中的模板字符串語(yǔ)法完全一致，只不過是用在類型定義里面：

 
 
 
 
    
  
  
  
  
  1. type topBottom = "top" | "bottom" 
    2.   
  
  
  
  2. type leftRight = "left" | "right" 
    3.   
  
  
  
  3.  
    4.   
  
  
  
  4. type Position = `${topBottom }-${leftRight }` 
    5.

當(dāng)我們定義了一個(gè)具體的字面量類型時(shí)，TypeScript 會(huì)通過拼接內(nèi)容的方式產(chǎn)生新的字符串字面量類型。

實(shí)用類型

TypeScript為你提供了一組實(shí)用類型，讓你在現(xiàn)有類型的基礎(chǔ)上構(gòu)建新的類型。有許多實(shí)用類型涵蓋了不同的情況，例如選擇類型屬性來復(fù)制，大寫字母，或使所有的屬性都是可選的。

下面是一個(gè)使用 Omit工具的例子，它復(fù)制了原始類型的所有屬性，除了我們選擇不包括的那些。

 
 
 
 
    
  
  
  
  
  1. type User = { 
    2.   
  
  
  
  2.   name: string 
    3.   
  
  
  
  3.   age: number 
    4.   
  
  
  
  4.   location: string 
    5.   
  
  
  
  5. } 
    6.   
  
  
  
  6.  
    7.   
  
  
  
  7. type MyUser = Omit 
    8.

上面這些就是我工作經(jīng)常使用的一部分，另外一些后面在分享，就這?


本文名稱：這六個(gè)TS新特性經(jīng)常用到，用了之后我再也離不開它！
當(dāng)前地址：http://www.5511xx.com/article/dhjedsi.html