7 個好用的 TypeScript 新功能

時間 2020-01-08

標籤好用 typescript 功能简体版

原文原文鏈接

做者：RC
翻譯：瘋狂的技術宅javascript

原文：https://blog.bitsrc.io/7-new-...html

未經容許嚴禁轉載前端

TypeScript 語言小組一直在以驚人的速度推出新功能。從最新的《 Javascript 語言情況調查》（https://2019.stateofjs.com/ja...）中能夠看出，該語言的使用率愈來愈高。java

本文將會總結你應該使用的最重要的功能。我會重點介紹如下最新版本的功能：webpack

注意：在探究這些功能以前，你應該先去看一下 TypeScript playground，在這裏能夠測試全部的功能。我建議你切換到較舊的版本（單擊左上角的版本下拉列表），來查看較新的版本是怎樣處理之前不支持的用例的：程序員

1. 可選鏈

從 v3.7 可用web

這是當你嘗試訪問嵌套數據時的一個痛點，嵌套數據越多，代碼就會變得越繁瑣。面試

在下面的例子中，要訪問 address ，你必須遍歷 data.customer.address，並且 data 或 customer 有多是 undefined，因此一般使用 && 運算符或相似例子中的技巧遍歷檢查每一個層次的定義。typescript

如今你能夠用 .? 運算符來選擇性地對數據訪問。經過這種方式，若是存在還沒有定義的父級對象，則會在鏈中的任何位置返回未定義，而不是在運行時崩潰。segmentfault

// 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}`

// 也適用於數組
customers?.[0]?.['address']

// 檢查方法是否已定義並調用
customer.approve?.()

2. 空值合併

從 v3.7 可用

空值合併運算符是 || 的替代方法，若是左側是 null 或 undefined，則它返回右側的表達式。這和 || 有什麼不一樣？ || 本質上是 JavaScript 中的布爾 OR 運算符，咱們嘗試利用短路返回第一個非 false 值。這可能會產生意想不到的結果，由於當要求數字 0 或空字符串做爲有效輸入時，將會被視爲 false。讓咱們用一個例子來講明：

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


// 如今
passPhrase = data.inputString ?? 'Unknown'  //僅在 inputString 未定義時爲 Unknown
passCode =  data.number ?? '-1111' // 0 能夠經過
rememberMe = data.rememberFlag ?? true // false 是有效值

經過這種方式能夠明確地區分 undefined 與 false 的值。

3. 遞歸類型別名

從 v3.7 可用

現實世界中的不少數據類型都是遞歸的。例如，當你嘗試處理分層數據時，會發現存在相同類型數據的重複模式。 JSON 是一個很好的例子，它本質上是一個哈希映射，而哈希映射自己能夠包含另外一個映射或映射數組。

在 v3.6 以前，若是必須定義一個簡單的 JSON 類型，則必須像下面這樣：

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

若是你嘗試將第 1 行和第 2 行的類型在像第 3 那樣內聯，則可能會出現如下錯誤：Type alias JSONValue circularly references itself。

在 v3.7 中已經有效解決了這個問題，能夠像下面這樣簡單地進行編碼：

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

4. 斷言簽名

從 v3.7 可用

你應該知道 TypeScript 具備類型保護，能夠很好地與 JavaScript 中的 typeof 和 instanceOf 運算符一塊兒使用。這有助於爲函數的參數添加前提條件，以便將其限制爲特定的類型。

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

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 的新關鍵字，它可以使編譯器從斷言起就知道正確的類型。對於斷言函數，應該添加 asserts <param> as <type> 而不是返回類型。

這樣，若是斷言經過，TypeScript 將假定參數是前面定義的類型。修改後的代碼以下所示：

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 起改進

在代碼中直接使用 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，並顯示一條與其無關的錯誤消息，以下所示：