介紹

TypeScript 是一種廣泛使用的開源編程語言，非常適合現(xiàn)代化開發(fā)。借助它先進的類型系統(tǒng)，TypeScript 允許開發(fā)者編寫更加強健、可維護和可擴展的代碼。但是，要真正發(fā)揮 TypeScript 的威力并構(gòu)建高質(zhì)量的項目，了解和遵循最佳實踐至關(guān)重要。在本文中，我們將深入探索 TypeScript 的世界，并探討掌握該語言的 21 個最佳實踐。這些最佳實踐涵蓋了各種主題，并提供了如何在真實項目中應(yīng)用它們的具體示例。無論你是初學(xué)者還是經(jīng)驗豐富的 TypeScript 開發(fā)者，本文都將提供有價值的見解和技巧，幫助你編寫干凈高效的代碼。

最佳實踐1：嚴格的類型檢查

我們將從最基本的實踐開始。想象一下，在問題出現(xiàn)之前就能發(fā)現(xiàn)潛在錯誤，聽起來太好不過了吧？這正是 TypeScript 中嚴格類型檢查所能為你做到的。這個最佳實踐的目的是捕捉那些可能會悄悄溜進你的代碼并在后面引發(fā)麻煩的蟲子。

嚴格類型檢查的主要作用是確保你的變量類型與你期望的類型匹配。這意味著，如果你聲明一個變量為字符串類型，TypeScript 將確保分配給該變量的值確實是字符串而不是數(shù)字，例如。這有助于您及早發(fā)現(xiàn)錯誤，并確保您的代碼按照預(yù)期工作。

啟用嚴格類型檢查只需在 tsconfig.json 文件中添加 "strict": true（默認為 true）即可。通過這樣做，TypeScript 將啟用一組檢查，以捕獲某些本應(yīng)未被發(fā)現(xiàn)的錯誤。

以下是一個例子，說明嚴格類型檢查如何可以幫助你避免常見錯誤：

let userName: string = "John";
userName = 123; // TypeScript will raise an error because "123" is not a string.

通過遵循這個最佳實踐，你將能夠及早發(fā)現(xiàn)錯誤，并確保你的代碼按照預(yù)期工作，從而為你節(jié)省時間和不必要的麻煩。

最佳實踐2：類型推斷

TypeScript 的核心理念是顯式地指定類型，但這并不意味著你必須在每次聲明變量時都明確指定類型。

類型推斷是 TypeScript 編譯器根據(jù)變量賦值的值自動推斷變量類型的能力。這意味著你不必在每次聲明變量時都顯式指定類型。相反，編譯器會根據(jù)值推斷類型。

例如，在以下代碼片段中，TypeScript 會自動推斷 name 變量的類型為字符串：

let name = "John"。

類型推斷在處理復(fù)雜類型或?qū)⒆兞砍跏蓟癁閺暮瘮?shù)返回的值時特別有用。

但是請記住，類型推斷并不是一個魔法棒，有時候最好還是顯式指定類型，特別是在處理復(fù)雜類型或確保使用特定類型時。

最佳實踐3：使用 Linters

Linters 是一種可以通過強制一組規(guī)則和指南來幫助你編寫更好代碼的工具。它們可以幫助你捕捉潛在的錯誤，提高代碼的整體質(zhì)量。

有幾個針對 TypeScript 的 Linters 可供選擇，例如 TSLint 和 ESLint，可以幫助你強制執(zhí)行一致的代碼風(fēng)格并捕捉潛在的錯誤。這些 Linters 可以配置檢查諸如缺少分號、未使用的變量和其他常見問題等事項。

最佳實踐4：使用接口

當涉及到編寫干凈、可維護的代碼時，接口是你的好朋友。它們就像是對象的藍圖，概述了你將要使用的數(shù)據(jù)的結(jié)構(gòu)和屬性。

在 TypeScript 中，接口定義了對象的形狀的約定。它指定了該類型的對象應(yīng)具有的屬性和方法，并且可以用作變量的類型。這意味著，當你將一個對象分配給帶有接口類型的變量時，TypeScript 會檢查對象是否具有接口中指定的所有屬性和方法。

以下是 TypeScript 中定義和使用接口的示例：

interface User {
name: string;
age: number;
}
let user: User = {name: "John", age: 25};

接口還可以使代碼重構(gòu)更容易，因為它確保了使用某個特定類型的所有位置都會被一次性更新。

最佳實踐5：類型別名

TypeScript 允許你使用類型別名（type aliases）創(chuàng)建自定義類型。類型別名和接口（interface）的主要區(qū)別在于，類型別名為類型創(chuàng)建一個新名稱，而接口為對象的形狀創(chuàng)建一個新名稱。

例如，你可以使用類型別名為二維空間中的點創(chuàng)建一個自定義類型：

type Point = { x: number, y: number };
let point: Point = { x: 0, y: 0 };

類型別名也可以用于創(chuàng)建復(fù)雜類型，例如聯(lián)合類型（union type）或交叉類型（intersection type）。

type User = { name: string, age: number };
type Admin = { name: string, age: number, privileges: string[] };
type SuperUser = User & Admin;

最佳實踐6：使用元組

元組是一種表示具有不同類型的固定大小元素數(shù)組的方式。它們允許你用特定的順序和類型表示值的集合。

例如，你可以使用元組來表示二維空間中的一個點：

let point: [number, number] = [1, 2];

你還可以使用元組來表示多個類型的集合：

let user: [string, number, boolean] = ["Bob", 25, true];

使用元組的主要優(yōu)勢之一是，它們提供了一種在集合中表達特定類型關(guān)系的方式。

此外，你可以使用解構(gòu)賦值來提取元組的元素并將它們分配給變量：

let point: [number, number] = [1, 2];
let [x, y] = point;
console.log(x, y);

最佳實踐7：使用 any 類型

有時，我們可能沒有有關(guān)變量類型的所有信息，但仍然需要在代碼中使用它。在這種情況下，我們可以利用 any 類型。但是，像任何強大的工具一樣，使用 any 應(yīng)該謹慎和有目的地使用。

使用 any 的一個最佳實踐是將其使用限制在真正未知類型的特定情況下，例如在使用第三方庫或動態(tài)生成的數(shù)據(jù)時。此外，最好添加類型斷言或類型保護，以確保變量被正確使用。盡可能縮小變量類型的范圍。

例如：

function logData(data: any) {
console.log(data);
}

const user = { name: "John", age: 30 };
const numbers = [1, 2, 3];

logData(user); // { name: "John", age: 30 }
logData(numbers); // [1, 2, 3]

另一個最佳實踐是避免在函數(shù)返回類型和函數(shù)參數(shù)中使用 any，因為它可能會削弱代碼的類型安全性。相反，你可以使用更具體的類型或使用一些提供一定程度類型安全的更通用的類型，如 unknown 或 object。

最佳實踐8：使用 unknown 類型

unknown 類型是 TypeScript 3.0 中引入的一種強大且限制性更強的類型。它比 any 類型更具限制性，并可以幫助你防止意外的類型錯誤。

與 any 不同的是，當你使用 unknown 類型時，除非你首先檢查其類型，否則 TypeScript 不允許你對值執(zhí)行任何操作。這可以幫助你在編譯時捕捉到類型錯誤，而不是在運行時。

例如，你可以使用 unknown 類型創(chuàng)建一個更加類型安全的函數(shù)：

function printValue(value: unknown) {
 if (typeof value === "string") {
 console.log(value);
 } else {
 console.log("Not a string");
 }
}

你也可以使用 unknown 類型創(chuàng)建更加類型安全的變量：

let value: unknown = "hello";
let str: string = value; // Error: Type 'unknown' is not assignable to type 'string'.

最佳實踐9：“never”

在 TypeScript 中，never 是一個特殊的類型，表示永遠不會發(fā)生的值。它用于指示函數(shù)不會正常返回，而是會拋出錯誤。這是一種很好的方式，可以向其他開發(fā)人員（和編譯器）指示一個函數(shù)不能以某種方式使用，這可以幫助捕捉潛在的錯誤。

例如，考慮以下函數(shù)，如果輸入小于 0，則會拋出錯誤：

function divide(numerator: number, denominator: number): number {
 if (denominator === 0) {
 throw new Error("Cannot divide by zero");
 }
 return numerator / denominator;
}

這里，函數(shù) divide 聲明為返回一個數(shù)字，但如果分母為零，則會拋出錯誤。為了指示在這種情況下該函數(shù)不會正常返回，你可以使用 never 作為返回類型：

function divide(numerator: number, denominator: number): number | never {
 if (denominator === 0) {
 throw new Error("Cannot divide by zero");
 }
 return numerator / denominator;
}

最佳實踐10：使用 keyof 運算符

keyof 運算符是 TypeScript 的一個強大功能，可以創(chuàng)建一個表示對象鍵的類型。它可以用于明確指示哪些屬性是對象允許的。

例如，你可以使用 keyof 運算符為對象創(chuàng)建更可讀和可維護的類型：

interface User {
 name: string;
 age: number;
}
type UserKeys = keyof User; // "name" | "age"

你還可以使用 keyof 運算符創(chuàng)建更加類型安全的函數(shù)，將對象和鍵作為參數(shù)：

function getProperty<T, K extends keyof T>(obj: T, key: K) {
return obj[key];
}

這將允許你在編譯時檢查 key 是否為對象 T 的鍵之一，并返回該鍵對應(yīng)的值。

function getValue<T, K extends keyof T>(obj: T, key: K) {
 return obj[key];
}
let user: User = { name: "John", age: 30 };
console.log(getValue(user, "name")); // "John"
console.log(getValue(user, "gender")); // Error: Argument of type '"gender"' is not assignable to parameter of type '"name" | "age"'.

最佳實踐11：使用枚舉

枚舉（Enums）是 TypeScript 中定義一組命名常量的一種方式。它們可以用于創(chuàng)建更具可讀性和可維護性的代碼，通過給一組相關(guān)的值賦予有意義的名稱。

例如，你可以使用枚舉來定義一個訂單可能的狀態(tài)值：

enum OrderStatus {
  Pending,
  Processing,
  Shipped,
  Delivered,
  Cancelled
}
let orderStatus: OrderStatus = OrderStatus.Pending;

枚舉還可以有自定義的一組數(shù)字值或字符串值：

enum OrderStatus {
  Pending = 1,
  Processing = 2,
  Shipped = 3,
  Delivered = 4,
  Cancelled = 5
}
let orderStatus: OrderStatus = OrderStatus.Pending;

在命名約定方面，枚舉應(yīng)該以第一個大寫字母命名，并且名稱應(yīng)該是單數(shù)形式。

最佳實踐12：使用命名空間

命名空間（Namespaces）是一種組織代碼和防止命名沖突的方法。它們允許你創(chuàng)建一個容器來定義變量、類、函數(shù)和接口。

例如，你可以使用命名空間來將所有與特定功能相關(guān)的代碼分組：

namespace OrderModule {
  export class Order { /* … / }
  export function cancelOrder(order: Order) { / … / }
  export function processOrder(order: Order) { / … */ }
}
let order = new OrderModule.Order();
OrderModule.cancelOrder(order);

你也可以使用命名空間來為你的代碼提供一個獨特的名稱，以防止命名沖突：

namespace MyCompany.MyModule {
 export class MyClass { /* … */ }
}
let myClass = new MyCompany.MyModule.MyClass();

需要注意的是，命名空間類似于模塊，但它們用于組織代碼和防止命名沖突，而模塊用于加載和執(zhí)行代碼。

最佳實踐13：使用實用類型

實用類型（Utility Types）是 TypeScript 中內(nèi)置的一種特性，提供了一組預(yù)定義類型，可以幫助你編寫更好的類型安全代碼。它們允許你執(zhí)行常見的類型操作，并以更方便的方式操作類型。

例如，你可以使用 Pick 實用類型從對象類型中提取一組屬性：

type User = { name: string, age: number, email: string };
type UserInfo = Pick<User, "name" | "email">;

你也可以使用 Exclude 實用類型從對象類型中刪除屬性：

type User = { name: string, age: number, email: string };
type UserWithoutAge = Exclude<User, "age">;

你可以使用 Partial 實用類型將類型的所有屬性設(shè)置為可選的：

type User = { name: string, age: number, email: string };
type PartialUser = Partial<User>;

除了上述實用類型外，還有許多其他實用類型，如 Readonly、Record、Omit、Required 等，可以幫助你編寫更好的類型安全代碼。

最佳實踐 14：“只讀”和“只讀數(shù)組”

當在 TypeScript 中處理數(shù)據(jù)時，你可能希望確保某些值無法更改。這就是“只讀”和“只讀數(shù)組”的用武之地。

“只讀”關(guān)鍵字用于使對象的屬性只讀，意味著在創(chuàng)建后它們無法被修改。例如，在處理配置或常量值時，這非常有用。

interface Point {
  x: number;
  y: number;
}
let point: Readonly<Point> = {x: 0, y: 0};
point.x = 1; // TypeScript會報錯，因為“point.x”是只讀的

“只讀數(shù)組”與“只讀”類似，但是用于數(shù)組。它使一個數(shù)組變成只讀狀態(tài)，在創(chuàng)建后不能被修改。

let numbers: ReadonlyArray<number> = [1, 2, 3];
numbers.push(4); // TypeScript會報錯，因為“numbers”是只讀的

最佳實踐15: 類型保護

在 TypeScript 中，處理復(fù)雜類型時，很難跟蹤變量的不同可能性。類型保護是一種強大的工具，可以根據(jù)特定條件縮小變量的類型范圍。

以下是如何使用類型保護檢查變量是否為數(shù)字的示例：

function isNumber(x: any): x is number {
  return typeof x === "number";
}
let value = 3;
if (isNumber(value)) {
  value.toFixed(2); // TypeScript 知道 "value" 是一個數(shù)字，因為有了類型保護
}

類型保護還可以與“in”運算符、typeof 運算符和 instanceof 運算符一起使用。

最佳實踐16：使用泛型

泛型是 TypeScript 的一個強大特性，可以讓你編寫可以與任何類型一起使用的代碼，從而使其更具有可重用性。泛型允許你編寫一個單獨的函數(shù)、類或接口，可以與多種類型一起使用，而不必為每種類型編寫單獨的實現(xiàn)。

例如，你可以使用泛型函數(shù)來創(chuàng)建任何類型的數(shù)組：

function createArray<T>(length: number, value: T): Array<T> {
  let result = [];
  for (let i = 0; i < length; i++) {
  result[i] = value;
  }
  return result;
}
let names = createArray<string>(3, "Bob");
let numbers = createArray<number>(3, 0);

你也可以使用泛型來創(chuàng)建一個可以處理任何類型數(shù)據(jù)的類：

class GenericNumber<T> {
 zeroValue: T;
 add: (x: T, y: T) => T;
}
let myGenericNumber = new GenericNumber<number>();
myGenericNumber.zeroValue = 0;
myGenericNumber.add = function(x, y) { return x + y; };

最佳實踐 17：使用 infer 關(guān)鍵字

infer 關(guān)鍵字是 TypeScript 的一個強大特性，它允許你從一個類型中提取出變量的類型。

例如，你可以使用 infer 關(guān)鍵字為返回特定類型數(shù)組的函數(shù)創(chuàng)建更精確的類型：

type ArrayType<T> = T extends (infer U)[] ? U : never;
type MyArray = ArrayType<string[]>; // MyArray 類型是 string

你也可以使用 infer 關(guān)鍵字為返回具有特定屬性的對象的函數(shù)創(chuàng)建更精確的類型：

type Person = { name: string, age: number };
type PersonName = keyof Person;
type PersonProperty<T> = T extends { [K in keyof T]: infer U } ? U : never;
type Name = PersonProperty<Person>;

在上面的例子中，我們使用了 infer 關(guān)鍵字來提取出對象的屬性類型，這個技巧可以用于創(chuàng)建更準確的類型定義。

type ObjectType<T> = T extends { [key: string]: infer U } ? U : never;
type MyObject = ObjectType<{ name: string, age: number }>; // MyObject is of type {name:string, age: number}

最佳實踐 18：使用條件類型

條件類型允許我們表達更復(fù)雜的類型關(guān)系。基于其他類型的條件創(chuàng)建新類型。

例如，可以使用條件類型來提取函數(shù)的返回類型：

type ReturnType<T> = T extends (...args: any[]) => infer R ? R : any;
type R1 = ReturnType<() => string>; // string
type R2 = ReturnType<() => void>; // void

還可以使用條件類型來提取對象類型的屬性，滿足特定條件：

type PickProperties<T, U> = { [K in keyof T]: T[K] extends U ? K : never }[keyof T];
type P1 = PickProperties<{ a: number, b: string, c: boolean }, string | number>; // "a" | "b"

最佳實踐 19：使用映射類型

映射類型是一種基于現(xiàn)有類型創(chuàng)建新類型的方式。通過對現(xiàn)有類型的屬性應(yīng)用一組操作來創(chuàng)建新類型。

例如，可以使用映射類型創(chuàng)建一個表示現(xiàn)有類型只讀版本的新類型：

type Readonly<T> = { readonly [P in keyof T]: T[P] };
let obj: { a: number, b: string } = { a: 1, b: "hello" };
let readonlyObj: Readonly<typeof obj> = { a: 1, b: "hello" };

還可以使用映射類型創(chuàng)建一個表示現(xiàn)有類型可選版本的新類型：

type Optional<T> = { [P in keyof T]?: T[P] };
let obj: { a: number, b: string } = { a: 1, b: "hello" };
let optionalObj: Optional<typeof obj> = { a: 1 };

映射類型可以以不同的方式使用：創(chuàng)建新類型、從現(xiàn)有類型中添加或刪除屬性，或更改現(xiàn)有類型的屬性類型。

最佳實踐20：使用裝飾器

裝飾器是一種使用簡單語法來為類、方法或?qū)傩蕴砑宇~外功能的方式。它們是一種增強類的行為而不修改其實現(xiàn)的方式。

例如，可以使用裝飾器為方法添加日志記錄：

function logMethod(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
    let originalMethod = descriptor.value;
    descriptor.value = function(…args: any[]) {
    console.log(Calling ${propertyKey} with args: ${JSON.stringify(args)});
    let result = originalMethod.apply(this, args);
    console.log(Called ${propertyKey}, result: ${result});
    return result;
  }
}
class Calculator {
  @logMethod
  add(x: number, y: number): number {
    return x + y;
  }
}

還可以使用裝飾器為類、方法或?qū)傩蕴砑釉獢?shù)據(jù)，這些元數(shù)據(jù)可以在運行時使用。

function setApiPath(path: string) {
 return function (target: any) {
 target.prototype.apiPath = path;
 }
}
@setApiPath("/users")
class UserService {
 // …
}
console.log(new UserService().apiPath); // "/users"

總結(jié)

本文主要介紹了 TypeScript 的 20 個最佳實踐，旨在提高代碼質(zhì)量和開發(fā)效率。其中，一些最佳實踐包括盡可能使用 TypeScript 的類型系統(tǒng)、使用函數(shù)和方法參數(shù)默認值、使用可選鏈操作符等。此外，該文章還強調(diào)了在使用類時，應(yīng)該使用訪問修飾符，以避免出現(xiàn)不必要的錯誤。

該文章指出，使用 TypeScript 的類型系統(tǒng)可以幫助開發(fā)人員避免一些常見的錯誤，例如在運行時引發(fā)異常。此外，還提供了一些關(guān)于如何編寫類型注釋的最佳實踐。例如，應(yīng)該盡可能使用函數(shù)和方法參數(shù)默認值，以避免參數(shù)為空或未定義時的錯誤。

文章中還介紹了一些如何使用 TypeScript 的高級特性的最佳實踐，例如使用類型別名和枚舉，以提高代碼的可讀性和可維護性。此外，該文章還強調(diào)了如何使用可選鏈操作符來避免一些運行時錯誤。

總之，該文章提供了許多有用的 TypeScript 最佳實踐，這些實踐可以幫助開發(fā)人員編寫更高質(zhì)量的代碼，提高開發(fā)效率，避免一些常見的錯誤。

本文轉(zhuǎn)載自微信公眾號「大遷世界」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請聯(lián)系大遷世界公眾號。