7個好用的TypeScript新功能

更新時間：2021年05月06日 09:55:31 作者：淺笑·

這篇文章主要介紹了7個好用的TypeScript新功能，想了解TypeScript的同學(xué)，一定要看一下

1. 可選鏈

從 v3.7 可用

這是當(dāng)你嘗試訪問嵌套數(shù)據(jù)時的一個痛點，嵌套數(shù)據(jù)越多，代碼就會變得越繁瑣。

在下面的例子中，要訪問address，你必須遍歷data.customer.address，而且data或customer有可能是undefined，所以通常使用&&運算符或類似例子中的技巧遍歷檢查每個層次的定義。

現(xiàn)在你可以用.?運算符來選擇性地對數(shù)據(jù)訪問。通過這種方式，如果存在尚未定義的父級對象，則會在鏈中的任何位置返回未定義，而不是在運行時崩潰。

// v3.7 以前
if (data && data.customer && data.customer.address) {
   const {address} = data.customer
   const fullAddress = `${address.street}, ${address.city}, ${address.state }${address.zipcode}`
}

// v3.7

// data access
const address = data?.customer?.address
const fullAddress = `${address?.street}, ${address?.city}, ${address?.state } ${address?.zipcode}`

// 也適用于數(shù)組
customers?.[0]?.['address']

// 檢查方法是否已定義并調(diào)用
customer.approve?.()

2. 空值合并

從 v3.7 可用

空值合并運算符是||的替代方法，如果左側(cè)是null或undefined，則它返回右側(cè)的表達(dá)式。這和||有什么不同？||本質(zhì)上是JavaScript中的布爾 OR 運算符，我們嘗試?yán)枚搪贩祷氐谝粋€非 false 值。這可能會產(chǎn)生意想不到的結(jié)果，因為當(dāng)要求數(shù)字 0 或空字符串作為有效輸入時，將會被視為false。讓我們用一個例子來說明：

// 以前
passPhrase = data.inputString || 'Unknown'  //不會接受 "" (空字符串)
passCode =  data.number || '-1111' // 不會接受 0 
rememberMe = data.rememberFlag || true // 將會總是 true!!!


// 現(xiàn)在
passPhrase = data.inputString ?? 'Unknown'  //僅在 inputString 未定義時為 Unknown
passCode =  data.number ?? '-1111' // 0 可以通過
rememberMe = data.rememberFlag ?? true // false 是有效值

通過這種方式可以明確地區(qū)分undefined與false的值。

3. 遞歸類型別名

從 v3.7 可用

現(xiàn)實世界中的很多數(shù)據(jù)類型都是遞歸的。例如，當(dāng)你嘗試處理分層數(shù)據(jù)時，會發(fā)現(xiàn)存在相同類型數(shù)據(jù)的重復(fù)模式。jsON 是一個很好的例子，它本質(zhì)上是一個哈希映射，而哈希映射本身可以包含另一個映射或映射數(shù)組。

在 v3.6 之前，如果必須定義一個簡單的jsON 類型，則必須像下面這樣：

interface JSONObject { [x: string]: JSONValue; }
interface JSONArray extends Array<JSONValue> { }
type JSONValue = string | number | boolean | JSONObject | JSONArray

如果你嘗試將第 1 行和第 2 行的類型在像第 3 那樣內(nèi)聯(lián)，則可能會出現(xiàn)以下錯誤：Type alias JSONValue circularly references itself。

在 v3.7 中已經(jīng)有效解決了這個問題，可以像下面這樣簡單地進(jìn)行編碼：

type JSONValue = string | number | boolean | { [x: string]: JSONValue } | Array<JSONValue>

4. 斷言簽名

從 v3.7 可用

你應(yīng)該知道 TypeScript 具有類型保護(hù)，可以很好地與JavaScript中的typeof和instanceOf運算符一起使用。這有助于為函數(shù)的參數(shù)添加前提條件，以便將其限制為特定的類型。

讓我們寫一段把上面提到的這些東西都用到的代碼，通過添加類型保護(hù)來確保給定的輸入是日期，并從中提取年份：

function isDate(input: unknown) : asserts input is Date { 
  if (input instanceof Date) 
    return; 
  else 
    throw new Error('Input must be a Date!'); 
} 

function getYear(input: unknown) : number { 
  isDate(input); 
  return input.getFullYear()  // TypeScripts knows that input is Date 
} 


console.log(getYear(new Date('2019-01-01'))); 
console.log(getYear('2019-01-01'));

上面的代碼看起來很不錯，但 TypeScript 仍然會提示getFullYear 在未知類型上不可用。

從 v3.7 開始，TypeScript 添加了一個名為asserts的新關(guān)鍵字，它能夠使編譯器從斷言起就知道正確的類型。對于斷言函數(shù)，應(yīng)該添加asserts <param> as <type>而不是返回類型。

這樣，如果斷言通過，TypeScript 將假定參數(shù)是前面定義的類型。修改后的代碼如下所示：

function isDate(input: unknown) : asserts input is Date { 
  if (input instanceof Date) 
    return; 
  else 
    throw new Error('Input must be a Date!'); 
} 

function getYear(input: unknown) : number { 
  isDate(input); 
  return input.getFullYear()  // TypeScripts knows that input is Date 
} 


console.log(getYear(new Date('2019-01-01'))); 
console.log(getYear('2019-01-01'));

5. 為 Promise 提供更好的反饋

從 3.6 起改進(jìn)

在代碼中直接使用 Promise 而忘記使用await或then是常見的錯誤，如下所示：

interface Customer {
    name: string
    phone: string
}

declare function getCustomerData(id: string): Promise<Customer>;
declare function payCustomer(customer: Customer): void;

async function f() {
    const customer = getCustomerData('c1')
    payCustomer(customer)
}

以前的 TypeScript 完全不了解 Promise，并顯示一條與其無關(guān)的錯誤消息，如下所示：