Typescript 程式碼整潔之道

Turkyden發表於2019-02-14
TypeScript

Typescript

適用於 Typescript 的程式碼整潔之道。 受到 clean-code-javascript 的啟發。

目錄

  1. 介紹
  2. 變數
  3. 函式
  4. Objects and Data Structures
  5. Classes
  6. SOLID
  7. Testing
  8. Concurrency
  9. Error Handling
  10. Formatting
  11. Comments
  12. Translations

介紹

Humorous image of software quality estimation as a count of how many expletives you shout when reading code

軟體工程原理，源自 Robert C. Martin's 的書 Clean Code, 適用於 TypeScript。 這不是風格指南，它是在 TypeScript 中生成 可讀，可重用和可重構 軟體的指南。

並非每個原則都必須嚴格遵守，普遍認同的甚至更少。這些只是準則，僅此而已，但他們卻是 Clean Code 一書的作者根據自身多年的程式設計體會而提煉撰寫出來的。

我們的軟體工程技術只有50多年的歷史，我們還有很多東西需要學習。當軟體架構與架構本身一樣古老時，也許那時我們會有更難遵循的規則。現在，讓這些指導方針作為一個試金石，用來評估您和您的團隊所生成的 Typescript 程式碼的質量.

除此之外：知道這些並不會立即使你成為一個更好的軟體開發者，這些規則伴隨你工作多年後並不意味著你就不會犯錯誤了。每一段程式碼都是作為初稿開始的，就像溼粘土被塑造成最終形狀一樣。最終，當我們與小夥伴們一起審查時，我們會鑿掉不完美之處。不要因為這些需要改進的初稿而阻礙自己技術的提升。先幹掉程式碼吧！

⬆ 返回頂部

變數

使用有意義的變數名

以這樣的方式區分名稱，以便讀者知道他們的差異到底是什麼。

反例:

function between<T>(a1: T, a2: T, a3: T): boolean {
  return a2 <= a1 && a1 <= a3;
}

複製程式碼

正例:

function between<T>(value: T, left: T, right: T): boolean {
  return left <= value && value <= right;
}
複製程式碼

⬆ 返回頂部

使用可拼讀的變數名

如果你不能拼讀他，你只能像個白痴一樣去宣告它。

反例:

type DtaRcrd102 = {
  genymdhms: Date;
  modymdhms: Date;
  pszqint: number;
}
複製程式碼

正例:

type Customer = {
  generationTimestamp: Date;
  modificationTimestamp: Date;
  recordId: number;
}
複製程式碼

⬆ 返回頂部

對於相同型別的變數只使用同一個單詞

反例:

function getUserInfo(): User;
function getUserDetails(): User;
function getUserData(): User;
複製程式碼

正例:

function getUser(): User;
複製程式碼

⬆ 返回頂部

使用可搜尋的名稱

我們閱讀的程式碼往往比我們要寫的程式碼多。因此我們編寫的程式碼的可讀性和可搜尋性是非常重要的。不給那些具有意義且有助於理解程式的變數命名，就會傷害了閱讀程式碼的人。讓您的名字可搜尋。像 TSLint 這樣的工具可以幫助識別未命名的常量。

反例:

// 86400000 到底是什麼？
setTimeout(restart, 86400000);
複製程式碼

正例:

// 將它們宣告為大寫的命名常量。
const MILLISECONDS_IN_A_DAY = 24 * 60 * 60 * 1000;

setTimeout(restart, MILLISECONDS_IN_A_DAY);
複製程式碼

⬆ 返回頂部

使用變數展開

反例:

declare const users: Map<string, User>;

for (const keyValue of users) {
  // 迭代使用者地圖
}
複製程式碼

正例:

declare const users: Map<string, User>;

for (const [id, user] of users) {
  // 迭代使用者地圖
}
複製程式碼

⬆ 返回頂部

避免心照不宣

顯式優於隱式。
清晰是王道。

反例:

const u = getUser();
const s = getSubscription();
const t = charge(u, s);
複製程式碼

正例:

const user = getUser();
const subscription = getSubscription();
const transaction = charge(user, subscription);
複製程式碼

⬆ 返回頂部

不要新增不需要的上下文

如果你的 類/型別/物件 名稱中已經有說明，不要在你的變數中重複它們。

反例:

type Car = {
  carMake: string;
  carModel: string;
  carColor: string;
}

function print(car: Car): void {
  console.log(`${car.carMake} ${car.carModel} (${car.carColor})`);
}
複製程式碼

正例:

type Car = {
  make: string;
  model: string;
  color: string;
}

function print(car: Car): void {
  console.log(`${car.make} ${car.model} (${car.color})`);
}
複製程式碼

⬆ 返回頂部

使用預設引數而不是短路表示式或條件語句

預設引數通常比短路表示式更清晰。

反例:

function loadPages(count?: number) {
  const loadCount = count !== undefined ? count : 10;
  // ...
}
複製程式碼

正例:

function loadPages(count: number = 10) {
  // ...
}
複製程式碼

⬆ 返回頂部

相關文章