7個好用的TypeScript新功能
1. 可選鏈
從 v3.7 可用
這是當你嘗試訪問巢狀資料時的一個痛點，巢狀資料越多，程式碼就會變得越繁瑣。
在下面的例子中，要訪問address，你必須遍歷data.customer.address，而且data或customer有可能是undefined，所以通http://www.cppcns.com常使用&&運算子或類似例子中的技巧遍歷檢查每個層次的定義。
現在你可以用.?運算子來選擇性地對資料訪問。通過這種方式，如果存在尚未定義的父級物件，則會在鏈中的任何位置返回未定義，而不是在執行時崩潰。
// 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 fullAddreKtwYFFp
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的新關鍵字，它能夠使編譯器從斷言起就知道正確的類www.cppcns.com型。對於斷言函式，應該新增asserts <param> as <type>而不是返回型別。
這樣，如果斷言通過，TypeScript 將假定引數是前面定義的型別。修改後的程式碼如下所示：
function isDate(input: unknown) : asserts input is Date {
if (input instanceof DatKtwYFFpe)
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，並顯示一條與其無關的錯誤訊息，如下所示：
從 v3. 6 開始，編譯器變得非常聰明，可以建議你應該兌現 Promise。注意最新的編譯器是如何處理相同的錯誤的：
下面簡單討論一下不需要深入瞭解細節的一些功能：
6. Unicode 識別符號
從 v3.6 可用
const hello = "world"
上面的程式碼可能不能夠在早期版本的 TypeScript 上編譯，但是現在你可以從更廣泛的 unicode 集中定義識別符號。
7. 增量編譯
從 v3.4 起可用
如果你在大型專案上使用 TypeScript，則編譯器可能需要很長時間才能響應你對該代專案中檔案所做的更改。現在有了新的--incremental標誌，你可以將www.cppcns.com其新增到tsc（typescript 編譯器）命令列中，這個命令列將會遞增地編譯修改過的檔案。
TypeScript 通過把自從上次編譯以來的專案資訊儲存在程式碼庫內的本地快取目錄中來實現這一目的。在react程式碼庫上，一定要記住在Webpack或Parcel進行正確的配置，這樣才能在構建管道中利用增量編譯。
以上就是7個好用的TypeScript新功能的詳細內容，更多關於TypeScript新功能的資料請關注我們其它相關文章！