日韩成人免费在线_国产成人一二_精品国产免费人成电影在线观..._日本一区二区三区久久久久久久久不

當前位置:首頁 > 科技  > 軟件

TypeScript 5.3 來了,一大波新特性

來源: 責編: 時間:2023-11-16 09:39:51 246觀看
導讀根據 TypeScript 路線圖,TypeScript 5.3 計劃于 11 月 14 日發布。下面是該版本帶來的新特性:導入屬性導入類型中穩定支持 resolution-mode所有模塊模式均支持 resolution-modeswitch (true) 縮小范圍對布爾值進行比較

Cdv28資訊網——每日最新資訊28at.com

根據 TypeScript 路線圖,TypeScript 5.3 計劃于 11 月 14 日發布。Cdv28資訊網——每日最新資訊28at.com

圖片Cdv28資訊網——每日最新資訊28at.com

下面是該版本帶來的新特性:Cdv28資訊網——每日最新資訊28at.com

  • 導入屬性
  • 導入類型中穩定支持 resolution-mode
  • 所有模塊模式均支持 resolution-mode
  • switch (true) 縮小范圍
  • 對布爾值進行比較的縮小范圍
  • 通過 Symbol.hasInstance 進行 instanceof 類型縮小
  • 實例字段上的 super 屬性訪問檢查
  • 嵌入提示支持跳轉到類型的定義
  • 通過跳過 JSDoc 解析進行優化
  • 通過比較非標準交集進行優化
  • 整合 tsserverlibrary.js 和 typescript.js

導入屬性

TypeScript 5.3 支持導入屬性提案的最新更新。導入屬性的一個用例是向運行時提供有關模塊的預期格式的信息。Cdv28資訊網——每日最新資訊28at.com

// 希望將這個文件解釋為 JSON 數據,而不是一個帶有 .json 擴展名的可執行/惡意的 JavaScript 文件。import obj from "./something.json" with { type: "json" };

這些屬性的內容不會被 TypeScript 檢查,因為它們是特定于宿主環境的,并且會被直接保留,以便瀏覽器和運行時環境可以處理它們(并可能會出現錯誤)。Cdv28資訊網——每日最新資訊28at.com

// TypeScript 對此沒有問題,但是瀏覽器可能不支持。import * as foo from "./foo.js" with { type: "fluffy bunny" };

動態 import() 調用還可以通過第二個參數使用導入屬性。Cdv28資訊網——每日最新資訊28at.com

const obj = await import("./something.json", {    with: { type: "json" }});

第二個參數的預期類型由名為 ImportCallOptions 的類型定義,該類型默認情況下只需要一個名為 with 的屬性。Cdv28資訊網——每日最新資訊28at.com

注意,導入屬性是早期提案“導入斷言”的演進版本,該提案已在 TypeScript 4.5 中實現。最明顯的區別是使用 with 關鍵字而不是 assert 關鍵字。但不太明顯的區別在于,現在運行時可以自由地使用屬性來引導導入路徑的解析和解釋,而導入斷言只能在加載模塊后斷言某些特征。Cdv28資訊網——每日最新資訊28at.com

隨著時間的推移,TypeScript 將逐漸棄用舊的導入斷言語法,并傾向于使用導入屬性的提案語法。現有使用 assert 的代碼應該遷移到使用 with 關鍵字。需要使用導入屬性的新代碼應該使用 with。Cdv28資訊網——每日最新資訊28at.com

resolution-mode

導入類型中穩定支持 resolution-mode

在 TypeScript 4.7 中,TypeScript 增加了對 /// <reference types="..." /> 中的 resolution-mode 屬性的支持,以控制特定規范符號是應該通過 import 還是 require 語義進行解析。Cdv28資訊網——每日最新資訊28at.com

/// <reference types="pkg" resolution-mode="require" />// 或/// <reference types="pkg" resolution-mode="import" />

考慮到導入屬性可以引導解析,并且已經看到了合理的使用案例,TypeScript 5.3 現在支持 import type 的 resolution-mode 屬性。Cdv28資訊網——每日最新資訊28at.com

// 以使用 `require()` 進行導入的方式解析 `pkg`import type { TypeFromRequire } from "pkg" with {  "resolution-mode": "require"};// 以使用 `import` 進行導入的方式解析 `pkg`import type { TypeFromImport } from "pkg" with {  "resolution-mode": "import"};export interface MergedType extends TypeFromRequire, TypeFromImport {}

這些導入屬性也可以用于 import() 類型。Cdv28資訊網——每日最新資訊28at.com

export type TypeFromRequire =  import("pkg", { with: { "resolution-mode": "require" } }).TypeFromRequire;export type TypeFromImport =  import("pkg", { with: { "resolution-mode": "import" } }).TypeFromImport;export interface MergedType extends TypeFromRequire, TypeFromImport {}

所有模塊模式均支持 resolution-mode

以前,只有在 moduleResolution 選項為 node16 和 nodenext 時才允許使用 resolution-mode。為了更容易地專門查找用于類型的模塊,現在 resolution-mode 在所有其他 moduleResolution 選項中都能正常工作,比如 bundler、node10,在 classic 模式下則不會報錯。Cdv28資訊網——每日最新資訊28at.com

類型縮小優化

switch (true)

現在 TypeScript 5.3 能夠根據 switch 中每個 case 子句的條件進行類型細化。Cdv28資訊網——每日最新資訊28at.com

function f(x: unknown) {    switch (true) {        case typeof x === "string":            // 這里,'x' 是一個 'string'            console.log(x.toUpperCase());        case Array.isArray(x):            // 這里 'x' 是一個 'string | any[]'            console.log(x.length);        default:          // 這里 'x' 是 'unknown'          // ...    }}

布爾值比較

有時候你可能會在條件語句中直接與 true 或 false 進行比較。通常這些比較是不必要的,但可能出于代碼風格或避免 JavaScript 真值方面的某些問題而偏好這種寫法。然而,在之前的 TypeScript 版本中,它不能正確地識別這種形式來執行類型縮小。Cdv28資訊網——每日最新資訊28at.com

TypeScript 5.3 現在在縮小變量范圍時可以跟上并理解這些表達式。Cdv28資訊網——每日最新資訊28at.com

interface A {    a: string;}interface B {    b: string;}type MyType = A | B;function isA(x: MyType): x is A {    return "a" in x;}function someFn(x: MyType) {    if (isA(x) === true) {        console.log(x.a); // works!    }}

Symbol.hasInstance

JavaScript 的一個特性是可以重寫 instanceof 運算符的行為。要實現這一點,需要在 instanceof 運算符右側的值上定義一個名為 Symbol.hasInstance 的特定方法。Cdv28資訊網——每日最新資訊28at.com

class Weirdo {    static [Symbol.hasInstance](testedValue) {        return testedValue === undefined;    }}// falseconsole.log(new Thing() instanceof Weirdo);// trueconsole.log(undefined instanceof Weirdo);

為了更好地模擬 instanceof 運算符的行為,TypeScript 現在會檢查是否存在 [Symbol.hasInstance] 方法,并且該方法被聲明為類型斷言函數。如果存在這樣的方法,那么通過 instanceof 運算符對左側測試的值將會被相應地進行類型縮小。Cdv28資訊網——每日最新資訊28at.com

interface PointLike {    x: number;    y: number;}class Point implements PointLike {    x: number;    y: number;    constructor(x: number, y: number) {        this.x = x;        this.y = y;    }    distanceFromOrigin() {        return Math.sqrt(this.x ** 2 + this.y ** 2);    }    static [Symbol.hasInstance](val: unknown): val is PointLike {        return !!val && typeof val === "object" &&            "x" in val && "y" in val &&            typeof val.x === "number" &&            typeof val.y === "number";    }}function f(value: unknown) {    if (value instanceof Point) {        // 可以訪問這兩個屬性 - 正確!        value.x;        value.y;        // 無法訪問這個屬性,有 'PointLike' 類型的對象,但實際上并沒有 'Point' 類型的對象。        value.distanceFromOrigin();    }}

在這個例子中,Point 定義了自己的 [Symbol.hasInstance]方法。它實際上充當了一個對稱為 PointLike 的獨立類型的自定義類型保護程序。在函數 f 中,我們能夠通過 instanceof 將 value 縮小到 PointLike 類型,但無法縮小到 Point 類型。這意味著可以訪問屬性 x 和 y,但無法訪問 distanceFromOrigin 方法。Cdv28資訊網——每日最新資訊28at.com

實例字段上的 super 屬性訪問檢查

在 JavaScript 中,可以通過 super 關鍵字訪問基類中的聲明。Cdv28資訊網——每日最新資訊28at.com

class Base {    someMethod() {        console.log("Base method called!");    }}class Derived extends Base {    someMethod() {        console.log("Derived method called!");        super.someMethod();    }}new Derived().someMethod();// 輸出結果://   Derived method called!//   Base method called!

這與編寫像 this.someMethod() 這樣的代碼是不同的,因為那樣可能會調用一個被重寫的方法,如果一個聲明根本沒有被重寫,那么通常這兩種方式是可以互換的。Cdv28資訊網——每日最新資訊28at.com

class Base {    someMethod() {        console.log("someMethod called!");    }}class Derived extends Base {    someOtherMethod() {        // These act identically.        this.someMethod();        super.someMethod();    }}new Derived().someOtherMethod();// 輸出結果://   someMethod called!//   someMethod called!

問題在于這兩種方式是不能互換使用的,因為 super 只能用于在原型上聲明的成員,而不能用于實例屬性。這意味著如果你寫了 super.someMethod(),但 someMethod 被定義為一個字段,那么就會出現運行時錯誤!Cdv28資訊網——每日最新資訊28at.com

class Base {    someMethod = () => {        console.log("someMethod called!");    }}class Derived extends Base {    someOtherMethod() {        super.someMethod();    }}new Derived().someOtherMethod();

TypeScript 5.3 現在更仔細地檢查 super 屬性訪問/方法調用,以查看它們是否對應于類字段。如果是的話,現在會得到一個類型檢查錯誤。Cdv28資訊網——每日最新資訊28at.com

嵌入提示支持跳轉到類型的定義

TypeScript 的嵌入提示現在支持跳轉到類型的定義!Cdv28資訊網——每日最新資訊28at.com

Cdv28資訊網——每日最新資訊28at.com

按住 Ctrl 鍵單擊嵌入提示可跳轉至參數類型的定義。Cdv28資訊網——每日最新資訊28at.com

通過跳過 JSDoc 解析進行優化

通過 tsc 運行 TypeScript 時,編譯器現在將避免解析 JSDoc。這不僅減少了解析時間,還減少了存儲注釋的內存使用量以及垃圾收集所花費的時間。可以在 --watch 模式下看到稍快的編譯速度和更快的反饋。Cdv28資訊網——每日最新資訊28at.com

通過比較非標準交集進行優化

在 TypeScript 中,并集和交集始終遵循特定的形式,其中交集不能包含并集類型。這意味著當我們在 A & (B | C) 這樣的并集上創建交集時,該交集將被標準化為 (A & B) | (A & C)。盡管如此,在某些情況下,類型系統仍會出于顯示目的而保留原始形式。Cdv28資訊網——每日最新資訊28at.com

舉個例子,假設我們有 SomeType & (Type1 | Type2 | ... | Type99999NINE),我們想要確定它是否可以賦值給 SomeType,源類型是一個看起來像 (SomeType & Type1) | (SomeType & Type2) | ... |(SomeType & Type99999NINE) 的聯合類型。在檢查一個聯合類型是否可以賦值給某個目標類型時,必須檢查聯合類型的每個成員是否可以賦值給目標類型,這可能會非常慢。Cdv28資訊網——每日最新資訊28at.com

在 TypeScript 5.3 中,當比較類型時,會快速檢查目標類型是否存在于源交集中的任何成員中。Cdv28資訊網——每日最新資訊28at.com

整合 tsserverlibrary.js 和 typescript.js

TypeScript 本身提供了兩個庫文件:tsserverlibrary.js 和 typescript.js。在 tsserverlibrary.js 中只有特定的 API(例如 ProjectService API)。然而,這兩個是不同包,它們有許多重疊之處,在包中重復了很多代碼。更重要的是,由于自動導入或肌肉記憶,要始終一致地使用其中一個可能會很具有挑戰性。意外加載兩個模塊太容易了,代碼在不同的 API 實例上可能無法正常工作。即使它能夠正常工作,加載第二個包會增加資源使用率。Cdv28資訊網——每日最新資訊28at.com

鑒于此,TypeScript 團隊決定整合兩者。 typescript.js 現在包含 tsserverlibrary.js 的內容,并且 tsserverlibrary.js 現在只是重新導出 typescript.js。整合之后,包大小減少了 20.5%。Cdv28資訊網——每日最新資訊28at.com

本文鏈接:http://www.www897cc.com/showinfo-26-26564-0.htmlTypeScript 5.3 來了,一大波新特性

聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。郵件:2376512515@qq.com

上一篇: 怎么理解 React Server Component 和 Next.js 的關系

下一篇: 線程剖析 - 助力定位代碼層面高耗時問題

標簽:
  • 熱門焦點
Top 主站蜘蛛池模板: 工布江达县| 洱源县| 泗洪县| 沅江市| 麦盖提县| 咸宁市| 株洲县| 大余县| 盐山县| 曲麻莱县| 社旗县| 泉州市| 临猗县| 那坡县| 德清县| 天津市| 靖江市| 祥云县| 高陵县| 福泉市| 屏东县| 鹤壁市| 巫山县| 砚山县| 玉屏| 图片| 镇江市| 阿图什市| 竹山县| 怀仁县| 永定县| 玉龙| 周口市| 北辰区| 腾冲县| 新野县| 治多县| 富裕县| 城口县| 东阳市| 平南县|