介紹

隨著 TypeScript 的日益流行，開發人員因其在現代 Web 應用程式中的類型安全性、可擴展性和強大的工具而接受它。無論您是初學者還是高級開發人員，提升 TypeScript 技能都可以對程式碼庫的品質、可維護性和可讀性產生重大影響。本指南將引導您了解實用技巧和最佳實踐，以幫助您編寫更好的 TypeScript 程式碼。

為什麼要專注於編寫更好的 TypeScript 程式碼？

TypeScript 帶來了強大的類型和工具，但在交付價值、減少錯誤和維護乾淨、可讀的程式碼方面，編寫程式碼的方式很重要。了解如何有效利用 TypeScript 的功能可以確保：

• 減少錯誤：強類型可以透過在編譯時捕獲問題來幫助防止許多執行時錯誤。

• 提高程式碼品質：乾淨的 TypeScript 程式碼更易於理解、測試和維護。

• 增強協作：清晰的類型和介面使您的程式碼庫更容易被其他人學習和使用。

1.利用嚴格的打字選項

TypeScript 的編譯器選項可讓您執行更嚴格的類型檢查規則。在tsconfig.json中設定"strict": true是一個很好的起點，但請考慮啟用其他選項，例如：

• "noImplicitAny" ：避免無意中使用 any 類型。

• “strictNullChecks” ：確保變數不能為空或未定義，除非明確允許。

• “strictFunctionTypes” ：強制執行正確的函數類型推斷，防止細微的錯誤。

更嚴格的輸入通常會揭示隱藏的錯誤，並使您的程式碼庫更加可靠。

2. 明智地使用類型和接口

type和interface都允許您定義物件的形狀，但每種都有其優點：

• 接口：在定義物件時使用接口，特別是當您希望物件具有一致的形狀，以便從繼承或將來的擴展中受益時。

interface User {
  id: number;
  name: string;
  email: string;
}

類型：使用聯合類型或建立不需要擴充的更複雜的資料結構。

type Status = "active" | "inactive" | "pending";

了解何時使用每種方法將帶來更易於維護、更可預測的程式碼。

3. 寧願unknown勝過any

any類型經常被誤用，因為它允許任何類型的資料，違背了 TypeScript 類型安全的目的。相反，當類型不確定時選擇unknown 。與any不同， unknown需要先進行類型檢查，然後才能對其執行操作，從而增強安全性。

function processInput(input: unknown) {
  if (typeof input === "string") {
    console.log(input.toUpperCase());
  }
}

4. 使用唯讀和不可變類型以確保安全

向屬性加入readonly可以防止意外突變，這在許多情況下都很有價值，特別是在處理初始化後不應更改的資料結構時。

interface Product {
  readonly id: number;
  readonly name: string;
  price: number;
}

對不應更改的屬性使用readonly可以減少錯誤並闡明程式碼中某些資料的不變性。

5. 定義可重複使用性實用程式類型

TypeScript 提供了多種實用程式類型（ Partial 、 Pick 、 Omit 、 Readonly等），讓您的程式碼更簡潔，並有助於避免重複的定義。例如，如果您想要具有所有可選屬性的User版本，請使用Partial<User> 。

type OptionalUser = Partial<User>;

這些實用程式類型簡化了類型變更的處理，使您的程式碼更加通用。

6.明確定義返回類型

定義函數時，始終指定返回類型。這不僅使程式碼更具可預測性，而且還有助於 TypeScript 在函數行為稍後發生變化時捕獲錯誤。

function getUser(id: number): User | null {
  // logic to fetch user
}

明確傳回類型可減少歧義並有助於確保函數按預期執行。

7. 安全地處理 Null 和未定義

如果處理不當，像null和undefined類型通常會導致執行時期錯誤。 TypeScript 提供了optional chaining ( ?. ) 和nullish coalescing ( ?? ) 運算子來優雅地處理這些情況。

const userName = user?.profile?.name ?? "Guest";

這些運算符可幫助您避免圍繞空值的常見陷阱，而無需複雜的嵌套檢查。

8.利用枚舉來取得有意義的值

TypeScript 中的枚舉可讓您定義一組命名常數。它們使您的程式碼更具表現力並防止使用任意字串或數字。

enum UserRole {
  Admin = "ADMIN",
  User = "USER",
  Guest = "GUEST",
}

function assignRole(role: UserRole) {
  // logic here
}

枚舉在處理一組固定選項時特別有用，可以使程式碼自我記錄並減少錯誤。

9. 不要使用never進行詳盡檢查

使用聯合類型時，請使用never來確保對switch case 進行詳盡的檢查。這確保瞭如果將新案例加入到聯合中，如果不處理它們，TypeScript 將拋出錯誤。

type Shape = Circle | Square | Triangle;

function getArea(shape: Shape) {
  switch (shape.type) {
    case "circle":
      return Math.PI * shape.radius ** 2;
    case "square":
      return shape.side * shape.side;
    default:
      const _exhaustiveCheck: never = shape;
      return _exhaustiveCheck;
  }
}

這種never進行類型檢查的技術降低了未處理情況的風險，確保您的程式碼是詳盡且類型安全的。

10.保持函數的純粹和簡潔

編寫純函數（沒有副作用的函數）有助於防止不可預測的行為並使測試更簡單。 TypeScript 在函數式程式設計中使用時表現出色，因為它增強了函數設計的純粹性，鼓勵您保持函數簡潔且可預測。

function add(a: number, b: number): number {
  return a + b;
}

純函數更容易測試、除錯和理解，讓您的 TypeScript 程式碼更加健壯。

結論

編寫更好的 TypeScript 程式碼意味著專注於強類型、程式碼一致性和最佳實踐，使您的程式碼庫更具彈性、可維護性和可擴展性。當您套用這些技巧時，您會發現您的 TypeScript 程式碼變得更乾淨、更不容易出錯並且使用起來更愉快。請記住，編寫更好的 TypeScript 是一個持續的旅程，這些實踐只會進一步提高您的技能。

號召性用語

準備好提升您的 TypeScript 技能了嗎？嘗試在您的下一個專案中實施這些技巧，看看它們如何改進您的開發流程。讓我們一次一行地改進 TypeScript 程式碼！

喜歡閱讀嗎？如果您發現這篇文章有洞察力或有幫助，請考慮為我買杯咖啡來支持我的工作。您的貢獻有助於推動更多此類內容。點擊此處請我喝杯虛擬咖啡。乾杯!

原文出處：https://dev.to/yugjadvani/how-to-write-better-typescript-code-best-practices-for-clean-effective-and-scalable-code-38d2