十個高級開發者需要知道的TypeScript 技巧
TypeScript 已迅速成為像我這樣的開發人員的首選語言，他們希望通過添加類型安全、更好的工具和改進的可維護性來改進 JavaScript 代碼庫。
隨著語言的發展和成熟，TypeScript 沿途獲得了一些隱藏的功能。 在本文中，我們將深入探討 10 個鮮為人知的技巧，它們將幫助您釋放 TypeScript 的全部潛力。
1. 使用 keyof 和映射類型動態構建類型
keyof 關鍵字提供了一種基于現有類型的鍵動態構建類型的強大工具。
“keyof 運算符采用對象類型并生成其鍵的字符串或數字文字聯合。”
— TypeScript 文檔
結合映射類型，您可以從現有類型生成新類型，同時保留原始結構。
type Point = { x: number; y: number };
type NullablePoint = {
[K in keyof Point]: Point[K] | null;
};在這里，NullablePoint 成為一種新類型，具有與 Point 相同的鍵，但具有可為空的值。
2. 靈活類型的條件類型
條件類型允許創建依賴于其他類型的復雜類型。 這可以導致更靈活和可重用的類型定義。
type Flatten<T> = T extends Array<infer U> ? U : T;
type FlattenedNumbers = Flatten<number[]>; // number在此示例中，Flatten 類型檢查提供的類型 T 是否為數組，如果是，則提取內部類型 U。
3. 類型柯里化的部分應用類型
TypeScript 對高階類型的支持允許您創建部分應用的類型。 這種稱為類型套用的技術可實現強大的組合模式。
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"
} */在此示例中，我們有兩種不同類型的對象，UserDetails 和 UserSettings。 通過使用 merge 函數，我們可以將這兩種類型組合成一個包含兩種類型屬性的對象。 當您想要創建一個新對象來組合來自多個來源的屬性，同時仍保持 TypeScript 類型完整時，這會很有用。
當然，在 TypeScript 中還有其他方法可以實現這一點，例如，使用類型交集和直接擴展語法。 此示例的主要目的是演示類型柯里化的概念，當在正確的上下文中應用時，它可以成為一種強大的技術。
4. 編譯時類型檢查的類型保護
當您需要執行編譯時類型檢查時，類型保護很有用。 它們允許 TypeScript 縮小特定代碼塊中值的類型。
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 函數中，TypeScript 知道 a 和 b 是字符串，因為類型保護是 isString。 這也可以改進 VS Code Intellisense 的提示，因為編譯器將能夠約束任何類型。
5. 帶返回類型的高級類型推斷
Return Type 實用程序類型可以推斷函數的返回類型，從而更容易使用高階函數及其類型。
type MyFunction = (x: number, y: number) => { result: number };
type MyFunctionReturnType = ReturnType<MyFunction>; // { result: number }在這里，MyFunctionReturnType 成為 MyFunction 的推斷返回類型。
6. 遞歸類型的類型級編程
TypeScript 支持遞歸類型，允許您創建復雜的類型級計算和轉換。
type TupleToUnion<T extends any[]> = T[number];
type MyTuple = [string, number, boolean];
type MyUnion = TupleToUnion<MyTuple>; // string | number | boolean在此示例中，TupleToUnion 將元組類型轉換為聯合類型，這在處理復雜數據結構時非常有用。
就個人而言，我更喜歡聯合類型而不是枚舉，以至于我會將我看到的任何枚舉重構為聯合類型。 智能感知更好！
7. 不可變類型只讀
TypeScript 提供了一個內置的 Readonly 實用程序類型，它使對象的所有屬性都成為只讀的。 當您想在代碼庫中強制執行不變性時，這很有用。
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通過使用 Readonly 實用程序，我們確保用戶對象不會發生變化。
8. 類型斷言以獲得更多控制
當您對值的類型的了解比 TypeScript 的類型推斷所能推斷的更多時，類型斷言很有用。 它們允許您為值指定更精確的類型，而無需執行任何運行時檢查。
const unknownValue: unknown = "hello world";
const stringValue: string = unknownValue as string;在此示例中，我們斷言 unknownValue 確實是一個字符串，TypeScript 將信任此斷言。
9. 更安全常量的唯一符號
TypeScript 獨特的符號類型可以創建獨特的非字符串值，非常適合更安全的常量定義和避免名稱沖突。
const MyConstant = Symbol("MyConstant") as unique symbol;
type MyType = {
[MyConstant]: string;
};
const obj: MyType = { [MyConstant]: "hello world" };
console.log(obj[MyConstant]); // "hello world"在這里，MyConstant 是一個獨特的符號，確保沒有其他屬性可以與它沖突。
10.代碼組織的合并類型聲明
TypeScript 允許合并類型聲明，這在跨多個文件拆分類型定義或從外部庫擴展類型時非常有用。
// file1.ts
interface Point {
x: number;
y: number;
}
// file2.ts
interface Point {
z: number;
}
// Merged Point type: { x: number; y: number; z: number }通過在 file1.ts 和 file2.ts 中聲明 Point，TypeScript 會將兩個聲明合并為一個類型。 我認為這種行為只發生在 interface 關鍵字上，而不是 type 關鍵字，所以我更喜歡 type。
這 10 個 TypeScript 提示和技巧應該可以幫助您提升 TypeScript 技能并編寫更強大、靈活和可維護的代碼。
不要害怕探索 TypeScript 的高級功能，并在您的項目中利用它們來實現更干凈、更安全的代碼。
