介紹

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

最佳實(shí)踐1：嚴(yán)格的類型檢查

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

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

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

以下是一個(gè)例子，說明嚴(yán)格類型檢查如何可以幫助你避免常見錯(cuò)誤：

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

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

最佳實(shí)踐2：類型推斷

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

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

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

let name = "John"。

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

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

最佳實(shí)踐3：使用 Linters

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

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

最佳實(shí)踐4：使用接口

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

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

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

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

接口還可以使代碼重構(gòu)更容易，因?yàn)樗_保了使用某個(gè)特定類型的所有位置都會(huì)被一次性更新。

最佳實(shí)踐5：類型別名

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

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

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;

最佳實(shí)踐6：使用元組

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

例如，你可以使用元組來表示二維空間中的一個(gè)點(diǎn)：

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

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

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

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

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

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

最佳實(shí)踐7：使用 any 類型

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

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

例如：

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]

另一個(gè)最佳實(shí)踐是避免在函數(shù)返回類型和函數(shù)參數(shù)中使用 any，因?yàn)樗赡軙?huì)削弱代碼的類型安全性。相反，你可以使用更具體的類型或使用一些提供一定程度類型安全的更通用的類型，如 unknown 或 object。

最佳實(shí)踐8：使用 unknown 類型

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

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

例如，你可以使用 unknown 類型創(chuàng)建一個(gè)更加類型安全的函數(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'.

最佳實(shí)踐9：“never”

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

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

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

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

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

最佳實(shí)踐10：使用 keyof 運(yùn)算符

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

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

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

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

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

這將允許你在編譯時(shí)檢查 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"'.

最佳實(shí)踐11：使用枚舉

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

例如，你可以使用枚舉來定義一個(gè)訂單可能的狀態(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)該以第一個(gè)大寫字母命名，并且名稱應(yīng)該是單數(shù)形式。

最佳實(shí)踐12：使用命名空間

命名空間（Namespaces）是一種組織代碼和防止命名沖突的方法。它們允許你創(chuàng)建一個(gè)容器來定義變量、類、函數(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);

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

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

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

最佳實(shí)踐13：使用實(shí)用類型

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

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

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

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

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

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

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

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

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

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

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

interface Point {
  x: number;
  y: number;
}
let point: Readonly<Point> = {x: 0, y: 0};
point.x = 1; // TypeScript會(huì)報(bào)錯(cuò)，因?yàn)椤皃oint.x”是只讀的

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

let numbers: ReadonlyArray<number> = [1, 2, 3];
numbers.push(4); // TypeScript會(huì)報(bào)錯(cuò)，因?yàn)椤皀umbers”是只讀的

最佳實(shí)踐15: 類型保護(hù)

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

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

function isNumber(x: any): x is number {
  return typeof x === "number";
}
let value = 3;
if (isNumber(value)) {
  value.toFixed(2); // TypeScript 知道 "value" 是一個(gè)數(shù)字，因?yàn)橛辛祟愋捅Ｗo(hù)
}

類型保護(hù)還可以與“in”運(yùn)算符、typeof 運(yùn)算符和 instanceof 運(yùn)算符一起使用。

最佳實(shí)踐16：使用泛型

泛型是 TypeScript 的一個(gè)強(qiáng)大特性，可以讓你編寫可以與任何類型一起使用的代碼，從而使其更具有可重用性。泛型允許你編寫一個(gè)單獨(dú)的函數(shù)、類或接口，可以與多種類型一起使用，而不必為每種類型編寫單獨(dú)的實(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)建一個(gè)可以處理任何類型數(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; };

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

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

例如，你可以使用 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)鍵字來提取出對象的屬性類型，這個(gè)技巧可以用于創(chuàng)建更準(zhǔn)確的類型定義。

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}

最佳實(shí)踐 18：使用條件類型

條件類型允許我們表達(dá)更復(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"

最佳實(shí)踐 19：使用映射類型

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

例如，可以使用映射類型創(chuàng)建一個(gè)表示現(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)建一個(gè)表示現(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)有類型的屬性類型。

最佳實(shí)踐20：使用裝飾器

裝飾器是一種使用簡單語法來為類、方法或?qū)傩蕴砑宇~外功能的方式。它們是一種增強(qiáng)類的行為而不修改其實(shí)現(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ù)可以在運(yùn)行時(shí)使用。

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

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

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

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

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