摘要:引言發布了幾個新特性,主要變化是類型檢查更嚴格,對一些時髦功能拓展了類型支持。精讀這次改動意圖非常明顯,是為了跟上的新語法。基本可以算是對社區的回饋。討論地址是精讀新特性如果你想參與討論,請點擊這里,每周都有新的主題,周末或周一發布。
1 引言
Typescript 3.2 發布了幾個新特性,主要變化是類型檢查更嚴格,對 ES6、ES7 一些時髦功能拓展了類型支持。
2 概要下面挑一些相對重要配置介紹。
strictBindCallApply對 bind call apply 更嚴格的類型檢測。
比如如下可以檢測出 apply 函數參數數量和類型的錯誤:
function foo(a: number, b: string): string { return a + b; } let a = foo.apply(undefined, [10]); // error: too few argumnts
特別對一些 react 老代碼,函數需要自己 bind(this),在沒有用箭頭函數時,可能經常使用 this.foo = this.foo.bind(this),這時類型可能會不準,但升級到 TS3.2 后,可以準確捕獲到錯誤了。
Object spread 類型自動合并現在 Object spread 類型可以自動合并了:
// Returns "T & U" function mergeObject rest 類型自動剔除(x: T, y: U) { return { ...x, ...y }; }
const { x, y, z, ...rest } = obj;
當我們使用了 Object rest 語法時,rest 的類型其實是 obj 類型剔除了 x y z 這三個 key 的類型,現在 ts 已經能自動做到了!
下面是實現方式:
interface XYZ { x: any; y: any; z: any; } type DropXYZ= Pick >; function dropXYZ (obj: T): DropXYZ { let { x, y, z, ...rest } = obj; return rest; }
通過 Pick & Exclude 達到剔除 obj 屬性的效果,具體可以參考之前的精讀:精讀《Typescript2.0 - 2.9》。
tsconfig 配置集成支持 node_modules這是一個福音,以往在 tsconfig.json 為了繼承一個配置,我們需要這么寫:
{ "extends": "../node_modules/@my-team/tsconfig-base/tsconfig.json" }
TS3.2 內置了 node_modules 解析,因此就可以更清晰的描述了:
{ "extends": "@my-team/tsconfig-base" }內置 BigInt 類型
新增了 bigint 類型,再也不會把 bigint 和 number 混淆了。
declare let foo: number; declare let bar: bigint; foo = bar; // error: Type "bigint" is not assignable to type "number". bar = foo; // error: Type "number" is not assignable to type "bigint".3 精讀
這次改動意圖非常明顯,是為了跟上 JS 的新語法。隨著 JS 規范發展,TS 類型必然要得到補充,像 Object spread 與 Object rest 在項目中使用已經非常普遍了,及時完善類型支持,有助于對項目類型的約束。
strictBindCallApply 基本可以算是對 React 社區的回饋。在 React 很早期的版本是支持函數自動 bind 的,后來覺得過于 magic 就移除了,由于當時沒有箭頭函數,大家只好在調用處 .bind(this) 一下。
后來有人發現 .bind(this) 會導致函數引用變化,對 Mutable 性能優化不友好,所以許多代碼都在 constructor 位置進行類似 this.fooBind = this.foo.bind(this) 這樣的賦值,如今 TS3.2 對這種 bind 過后的函數也具備了嚴格的類型推測,將會有一大批代碼從中受益。
順帶一提,最近 Babel 7.2.0 發布,也帶來了一些新特性支持,比如:
提前支持私有屬性:
class Person { #age = 19; #increaseAge() { this.#age++; } birthday() { this.#increaseAge(); alert("Happy Birthday!"); } }
提前支持 pipleline Operator:
const result = 2 |> double |> 3 + # |> toStringBase(2, #); // "111"
整個 JS 生態一篇欣欣向榮的景象。不過 TS 對 ES 規范支持還是比較保守的,比如 Babel 6.x 就支持的 optional chain,現在也沒有得到支持,原因是 “等待進入 Stage3”。追蹤 ISSUE 可以參考:https://github.com/Microsoft/...
如果不清楚 Stage3 的含義,可以閱讀前端精讀之前的一篇文章:精讀 TC39 與 ECMAScript 提案。
4 總結這次的版本升級幾乎沒帶來什么新語法,只是純粹的類型檢測能力增強,所以如果希望進一步提高代碼質量,就盡快升級把。
討論地址是:精讀《Typescript 3.2 新特性》 · Issue #117 · dt-fe/weekly
如果你想參與討論,請點擊這里,每周都有新的主題,周末或周一發布。前端精讀 - 幫你篩選靠譜的內容。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/100096.html
摘要:比如或者都會導致函數返回值類型時。和特性一樣,等于是函數返回值中的或。注意對比下面的寫法對于,它的返回值是可迭代的對象,并且每個類型都是或者。首先是不支持方法重載的,是支持的,而類型系統一定程度在對標,當然要支持這個功能。 1 引言 精讀原文是 typescript 2.0-2.9 的文檔: 2.0-2.8,2.9 草案. 我發現,許多寫了一年以上 Typescript 開發者,對 T...
摘要:歷史上由于是作為的替代品出現,當時要解決的問題是處理瀏覽器兼容問題,打包或,做一些公共資源替換,雪碧圖等,最后可以順帶合并到一個文件,但模塊化功能遠遠比弱,基本上只能合并,但不能理解模塊概念。 1 引言 說到前端編譯方案,也就是如何打包項目,如何編譯組件,可選方案有很多,比如: 通過 webpack / parcel / gulp 構建項目。 通過 parcel / gulp / b...
摘要:發布發布節奏變化從月份的開始,將每周發布一個新的穩定版本。將于年月日開始測試,穩定版將于年月日發布。一個使用和實現了個用戶界面的頁面。實踐總結是一個現代的企業級框架,提供了強大的和許多開箱即用的功能。 .markdown-body{word-break:break-word;line-height:1.75;font-weight:400;font-size:15px;overflow-x...
摘要:而利用進一步提高了序列化速度,降低了數據包大小。帶來的最大好處是精簡請求響應內容,不會出現冗余字段,前端可以決定后端返回什么數據。再次強調,相比和,是由前端決定返回結果的反模式。請求者可以自定義返回格式,某些程度上可以減少前后端聯調成本。 1 引言 每當項目進入聯調階段,或者提前約定接口時,前后端就會聚在一起熱火朝天的討論起來。可能 99% 的場景都在約定 Http 接口,討論 URL...
閱讀 1417·2021-11-09 09:45
閱讀 1785·2021-11-04 16:09
閱讀 1448·2021-10-14 09:43
閱讀 1814·2021-09-22 15:24
閱讀 1589·2021-09-07 10:06
閱讀 1596·2019-08-30 14:15
閱讀 980·2019-08-30 12:56
閱讀 1562·2019-08-29 17:22