TypeScript 4.9 釋出！

微軟技術棧發表於2022-12-20
TypeScript

TypeScript 是一種透過新增型別和型別檢查構建在 JavaScript 之上的語言。型別可以描述諸如物件的形狀、如何呼叫函式以及屬性是否可以為 null 或 undefined 之類的東西。TypeScript 可以檢查這些型別，以確保我們不會在程式中出錯，這樣我們就可以自信地編碼。它還可以為編輯器中的自動完成、轉到定義和重構等其他工具提供支援。事實上，如果您使用過 Visual Studio 或 VS Code for JavaScript 等編輯器，您其實已經體驗過由 TypeScript 提供的支援了！

satisfies 運算子

TypeScript 開發人員經常面臨兩難境地：我們既要確保某些表示式匹配某些型別，又要保留該表示式的最具體型別以用於推理目的。

新的 satisfies 運算子讓我們驗證表示式的型別是否匹配某種型別，而不更改該表示式的結果型別。例如，我們可以使用 satisfies 來驗證 palette 的所有屬性是否與 string | number[] 相容：

type Colors = "red" | "green" | "blue";

type RGB = [red: number, green: number, blue: number];

const palette = {
    red: [255, 0, 0],
    green: "#00ff00",
    bleu: [0, 0, 255]
//  ~~~~ The typo is now caught!
} satisfies Record<Colors, string | RGB>;

// Both of these methods are still accessible!
const redComponent = palette.red.at(0);
const greenNormalized = palette.green.toUpperCase();

使用 in 運算子縮小未列出屬性的範圍

作為開發人員，我們經常需要處理在執行時不完全已知的值。事實上，我們通常不知道屬性是否存在，無論我們是從伺服器獲得響應還是讀取配置檔案。JavaScript 的 in 運算子可以檢查物件上是否存在屬性。

以前，TypeScript 允許我們縮小任何未明確列出屬性的型別的範圍。

interface RGB {
red: number;
green: number;
blue: number;
}

interface HSV {
hue: number;
saturation: number;
value: number;
}

function setColor(color: RGB | HSV) {
if ("hue" incolor) {
// 'color' now has the type HSV
 }
// ...
}

在這裡，RGB 型別沒有列出色調並縮小範圍，留給我們的是 HSV 型別。

TypeScript 4.9 使 in 運算子在縮小未列出屬性的型別時更加強大。該語言不會按原樣保留它們，而是將它們的型別與 Record<"property-key-being-checked", unknown> 相交。

interface Context {
 packageJSON: unknown;
}

function tryGetPackageName(context: Context): string | undefined {
const packageJSON = context.packageJSON;
// Check to see if we have an object.
if (packageJSON && typeof packageJSON === "object") {
// Check to see if it has a string name property.
if ("name" in packageJSON && typeof packageJSON.name === "string") {
// Just works!
return packageJSON.name;
 }
 }
return undefined;
}

TypeScript 4.9 還加強了一些關於如何使用 in 的檢查，確保左側可分配給型別 string | number | symbol，右側可分配給物件。這有助於檢查我們是否使用了有效的屬性鍵，而不是不小心檢查基元。

自動訪問器

TypeScript 4.9 支援 ECMAScript 中即將推出的功能，稱為自動訪問器。自動訪問器的宣告就像類的屬性一樣，除了它們是用 accessor 關鍵字宣告。

class Person {
    accessor name: string;
    
    constructor(name: string) {
        this.name = name;
    }
}

檢查 NaN 是否相等

JavaScript 開發人員的一個主要難題是使用內建的相等運算子檢查值 NaN。對於某些背景，NaN 是一個特殊的數值，代表“不是數字”。沒有什麼能等於 NaN——即使是 NaN！但至少對稱，一切總是不等於 NaN。

嚴格來說，這不是特定於 JavaScript 的問題，因為任何包含 IEEE-754 浮點數的語言都具有相同的行為。但是 JavaScript 的主要數字型別是浮點數，而 JavaScript 中的數字解析通常會導致 NaN。反過來，檢查 NaN 最終變得相當普遍，正確的方法是使用 Number.isNaN——但正如我們提到的，很多人不小心最終使用 someValue === NaN 進行檢查。

TypeScript 現在與 NaN 直接比較時會出錯，並且會建議使用 Number.isNaN 的一些變體。

function validate(someValue: number) {
return someValue !== NaN;
//    ~~~~~~~~~~~~~~~~~
// error: This condition will always return 'true'.
//       Did you mean '!Number.isNaN(someValue)'?
}

我們認為，此更改應該嚴格有助於捕獲初學者錯誤，類似於 TypeScript 當前在與物件和陣列文字進行比較時發出錯誤的方式。

File-Watching 使用檔案系統事件

在 TypeScript 4.9 中，檔案監視預設由檔案系統事件提供支援，只有在我們未能設定基於事件的監視程式時才會回退到輪詢。對於大多數開發人員來說，當以 --watch 模式執行或使用 TypeScript 支援的編輯器（如 Visual Studio 或 VS Code）執行時，這應該會提供更少的資源密集型體驗。

檔案監視的工作方式仍然可以透過環境變數和 watchOptions 進行配置。一些編輯器如 VS Code 可以獨立支援 watchOptions。使用原始碼駐留在網路檔案系統（如 NFS 和 SMB）上的更奇特設定的開發人員可能需要選擇回到舊行為。不過，如果伺服器具有合理的處理能力，則啟用 SSH 並遠端執行 TypeScript 可能會更好，這樣它就可以直接訪問本地檔案。VS Code 有很多遠端擴充套件來簡化這件事。

編輯器的“Remove Unused Imports”和“Sort Imports”命令

在 TypeScript 4.3 中，我們引入了一個名為“Sort Imports”的命令，它只會對檔案中的匯入進行排序，但不會刪除它們——並且會像這樣重寫檔案。

import { bar, foo } from "./helper";
import { HoneyBadger, Moose, Zebra } from"./zoo";

let x: Moose | HoneyBadger = foo();

“Sort Imports”的警告是，在 Visual Studio Code 中，此功能僅可用作儲存時命令，而不是可手動觸發的命令。

TypeScript 4.9 增加了另一半，現在提供了“Remove Unused Imports”。TypeScript 現在將刪除未使用的匯入名稱和語句，但會單獨保留相對順序。

import { Moose, HoneyBadger } from"./zoo";
import { foo } from "./helper";

let x: Moose | HoneyBadger = foo();

所有希望使用任一命令的編輯器都可以使用此功能；但值得注意的是，Visual Studio Code（1.73 及更高版本）將內建支援，並將透過其命令皮膚顯示這些命令。

更多 TypeScript 4.9 釋出資訊請前往原部落格檢視~

相關文章