TypeScript 已迅速成為像我這樣的開(kāi)發(fā)人員的首選語(yǔ)言，他們希望通過(guò)添加類(lèi)型安全、更好的工具和改進(jìn)的可維護(hù)性來(lái)改進(jìn) JavaScript 代碼庫(kù)。

隨著語(yǔ)言的發(fā)展和成熟，TypeScript 沿途獲得了一些隱藏的功能。 在本文中，我們將深入探討 10 個(gè)鮮為人知的技巧，它們將幫助您釋放 TypeScript 的全部潛力。

1. 使用 keyof 和映射類(lèi)型動(dòng)態(tài)構(gòu)建類(lèi)型

keyof 關(guān)鍵字提供了一種基于現(xiàn)有類(lèi)型的鍵動(dòng)態(tài)構(gòu)建類(lèi)型的強(qiáng)大工具。

“keyof 運(yùn)算符采用對(duì)象類(lèi)型并生成其鍵的字符串或數(shù)字文字聯(lián)合?！?/em>

— TypeScript 文檔

結(jié)合映射類(lèi)型，您可以從現(xiàn)有類(lèi)型生成新類(lèi)型，同時(shí)保留原始結(jié)構(gòu)。

type Point = { x: number; y: number };


type NullablePoint = {
  [K in keyof Point]: Point[K] | null;
};

在這里，NullablePoint 成為一種新類(lèi)型，具有與 Point 相同的鍵，但具有可為空的值。

2. 靈活類(lèi)型的條件類(lèi)型

條件類(lèi)型允許創(chuàng)建依賴于其他類(lèi)型的復(fù)雜類(lèi)型。 這可以導(dǎo)致更靈活和可重用的類(lèi)型定義。

type Flatten<T> = T extends Array<infer U> ? U : T;


type FlattenedNumbers = Flatten<number[]>; // number

在此示例中，F(xiàn)latten 類(lèi)型檢查提供的類(lèi)型 T 是否為數(shù)組，如果是，則提取內(nèi)部類(lèi)型 U。

3. 類(lèi)型柯里化的部分應(yīng)用類(lèi)型

TypeScript 對(duì)高階類(lèi)型的支持允許您創(chuàng)建部分應(yīng)用的類(lèi)型。 這種稱(chēng)為類(lèi)型套用的技術(shù)可實(shí)現(xiàn)強(qiáng)大的組合模式。

type Curried<T, U> = (arg: U) => T & U;


function merge<T, U>(fn: Curried<T, U>): T & U {
  return fn({} as U);
}


type UserDetails = { firstName: string; lastName: string };
type UserSettings = { theme: string; language: string };


const result = merge<UserDetails, UserSettings>(() => ({
  firstName: 'John',
  lastName: 'Doe',
  theme: 'dark',
  language: 'en',
}));


console.log(result);
/** {
  "firstName": "John",
  "lastName": "Doe",
  "theme": "dark",
  "language": "en"
} */

在此示例中，我們有兩種不同類(lèi)型的對(duì)象，UserDetails 和 UserSettings。 通過(guò)使用 merge 函數(shù)，我們可以將這兩種類(lèi)型組合成一個(gè)包含兩種類(lèi)型屬性的對(duì)象。 當(dāng)您想要?jiǎng)?chuàng)建一個(gè)新對(duì)象來(lái)組合來(lái)自多個(gè)來(lái)源的屬性，同時(shí)仍保持 TypeScript 類(lèi)型完整時(shí)，這會(huì)很有用。

當(dāng)然，在 TypeScript 中還有其他方法可以實(shí)現(xiàn)這一點(diǎn)，例如，使用類(lèi)型交集和直接擴(kuò)展語(yǔ)法。 此示例的主要目的是演示類(lèi)型柯里化的概念，當(dāng)在正確的上下文中應(yīng)用時(shí)，它可以成為一種強(qiáng)大的技術(shù)。

4. 編譯時(shí)類(lèi)型檢查的類(lèi)型保護(hù)

當(dāng)您需要執(zhí)行編譯時(shí)類(lèi)型檢查時(shí)，類(lèi)型保護(hù)很有用。 它們?cè)试S TypeScript 縮小特定代碼塊中值的類(lèi)型。

function isString(value: any): value is string {
  return typeof value === "string";
}


function concat(a: unknown, b: unknown) {
  if (isString(a) && isString(b)) {
    return a.concat(b);
  }
}

在 concat 函數(shù)中，TypeScript 知道 a 和 b 是字符串，因?yàn)轭?lèi)型保護(hù)是 isString。 這也可以改進(jìn) VS Code Intellisense 的提示，因?yàn)榫幾g器將能夠約束任何類(lèi)型。

5. 帶返回類(lèi)型的高級(jí)類(lèi)型推斷

Return Type 實(shí)用程序類(lèi)型可以推斷函數(shù)的返回類(lèi)型，從而更容易使用高階函數(shù)及其類(lèi)型。

type MyFunction = (x: number, y: number) => { result: number };


type MyFunctionReturnType = ReturnType<MyFunction>; // { result: number }

在這里，MyFunctionReturnType 成為 MyFunction 的推斷返回類(lèi)型。

6. 遞歸類(lèi)型的類(lèi)型級(jí)編程

TypeScript 支持遞歸類(lèi)型，允許您創(chuàng)建復(fù)雜的類(lèi)型級(jí)計(jì)算和轉(zhuǎn)換。

type TupleToUnion<T extends any[]> = T[number];


type MyTuple = [string, number, boolean];


type MyUnion = TupleToUnion<MyTuple>; // string | number | boolean

在此示例中，TupleToUnion 將元組類(lèi)型轉(zhuǎn)換為聯(lián)合類(lèi)型，這在處理復(fù)雜數(shù)據(jù)結(jié)構(gòu)時(shí)非常有用。

就個(gè)人而言，我更喜歡聯(lián)合類(lèi)型而不是枚舉，以至于我會(huì)將我看到的任何枚舉重構(gòu)為聯(lián)合類(lèi)型。 智能感知更好！

7. 不可變類(lèi)型只讀

TypeScript 提供了一個(gè)內(nèi)置的 Readonly 實(shí)用程序類(lèi)型，它使對(duì)象的所有屬性都成為只讀的。 當(dāng)您想在代碼庫(kù)中強(qiáng)制執(zhí)行不變性時(shí)，這很有用。

type User = { name: string; age: number };
type ReadonlyUser = Readonly<User>;


const user: ReadonlyUser = { name: "Alice", age: 30 };


user.age = 31;
// Error: Cannot assign to 'age' because it is a read-only property

通過(guò)使用 Readonly 實(shí)用程序，我們確保用戶對(duì)象不會(huì)發(fā)生變化。

8. 類(lèi)型斷言以獲得更多控制

當(dāng)您對(duì)值的類(lèi)型的了解比 TypeScript 的類(lèi)型推斷所能推斷的更多時(shí)，類(lèi)型斷言很有用。 它們?cè)试S您為值指定更精確的類(lèi)型，而無(wú)需執(zhí)行任何運(yùn)行時(shí)檢查。

const unknownValue: unknown = "hello world";


const stringValue: string = unknownValue as string;

在此示例中，我們斷言 unknownValue 確實(shí)是一個(gè)字符串，TypeScript 將信任此斷言。

9. 更安全常量的唯一符號(hào)

TypeScript 獨(dú)特的符號(hào)類(lèi)型可以創(chuàng)建獨(dú)特的非字符串值，非常適合更安全的常量定義和避免名稱(chēng)沖突。

const MyConstant = Symbol("MyConstant") as unique symbol;


type MyType = {
  [MyConstant]: string;
};


const obj: MyType = { [MyConstant]: "hello world" };


console.log(obj[MyConstant]); // "hello world"

在這里，MyConstant 是一個(gè)獨(dú)特的符號(hào)，確保沒(méi)有其他屬性可以與它沖突。

10.代碼組織的合并類(lèi)型聲明

TypeScript 允許合并類(lèi)型聲明，這在跨多個(gè)文件拆分類(lèi)型定義或從外部庫(kù)擴(kuò)展類(lèi)型時(shí)非常有用。

// file1.ts
interface Point {
  x: number;
  y: number;
}


// file2.ts
interface Point {
  z: number;
}


// Merged Point type: { x: number; y: number; z: number }

通過(guò)在 file1.ts 和 file2.ts 中聲明 Point，TypeScript 會(huì)將兩個(gè)聲明合并為一個(gè)類(lèi)型。 我認(rèn)為這種行為只發(fā)生在 interface 關(guān)鍵字上，而不是 type 關(guān)鍵字，所以我更喜歡 type。

這 10 個(gè) TypeScript 提示和技巧應(yīng)該可以幫助您提升 TypeScript 技能并編寫(xiě)更強(qiáng)大、靈活和可維護(hù)的代碼。

不要害怕探索 TypeScript 的高級(jí)功能，并在您的項(xiàng)目中利用它們來(lái)實(shí)現(xiàn)更干凈、更安全的代碼。