ตั้งชื่อตัวแปรให้มีความหมาย

แต่ละชื่อควรตั้งให้คนที่อ่านรู้ได้ทันทีว่ามีอะไรอยู่บ้าง

👎 ไม่ดี:

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 สามารถช่วยหาค่าคงที่ที่ไม่มีชื่อได้

👎 ไม่ดี:

// What the heck is 86400000 for?
setTimeout(restart, 86400000);

👍 ดี:

// Declare them as capitalized named constants.
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) {
  // iterate through users map
}

👍 ดี:

declare const users: Map<string, User>;

for (const [id, user] of users) {
  // iterate through users map
}

หลีกเลี่ยงการใช้ตัวแปรเป็นชื่อย่อ

ชัดเจนดีกว่าโดยปริยาย.
ความชัดเจนคือราชา.

👎 ไม่ดี:

const u = getUser();
const s = getSubscription();
const t = charge(u, s);

👍 ดี:

const user = getUser();
const subscription = getSubscription();
const transaction = charge(user, subscription);

อย่าเพิ่มบริบทโดยไม่จำเป็น

ถ้าชื่อ class/type/object บอกอะไรคุณบางอย่างได้อยู่แล้ว อย่าไปตั้งซ้ำในชื่อตัวแปรอีกที

👎 ไม่ดี:

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})`);
}

กำหนดค่าอาร์กิวเมนต์เริ่มต้นแทนการใช้ short circuiting หรือเขียนเงื่อนไข

กำหนดค่าอาร์กิวเมนต์เริ่มต้นไปเลยจะดูสะอาดกว่าการใช้ short circuiting.

👎 ไม่ดี:

function loadPages(count?: number) {
  const loadCount = count !== undefined ? count : 10;
  // ...
}

👍 ดี:

function loadPages(count: number = 10) {
  // ...
}

ใช้ enum เพื่อจำกัดค่าต้องการ

Enums สามารถช่วยคุณจำกัดค่าต้องการได้ เช่น เวลาที่เรากังกลว่าค่าอาจจะไม่ตรงกับค่าที่ควรจะเป็นจริง ๆ

👎 ไม่ดี:

const GENRE = {
  ROMANTIC: 'romantic',
  DRAMA: 'drama',
  COMEDY: 'comedy',
  DOCUMENTARY: 'documentary'
};

projector.configureFilm(GENRE.COMEDY);

class Projector {
  // declaration of Projector
  configureFilm(genre) {
    switch (genre) {
      case GENRE.ROMANTIC:
      // some logic to be executed
    }
  }
}

👍 ดี:

enum GENRE {
  ROMANTIC,
  DRAMA,
  COMEDY,
  DOCUMENTARY
}

projector.configureFilm(GENRE.COMEDY);

class Projector {
  // declaration of Projector
  configureFilm(genre) {
    switch (genre) {
      case GENRE.ROMANTIC:
      // some logic to be executed
    }
  }
}

อ้างอิงจาก:

1. หลักการทางวิศวกรรมซอฟต์แวร์จากหนังสือ Clean Code ของ Robert C.Martin สำหรับปรับใช้กับ TypeScript
2. คู่มือแนวทางในการสร้างสรรค์ซอฟต์แวร์ให้สามารถอ่านโค้ดเข้าใจได้ง่าย สามารถนำโค้ดมาใช้ซ้ำได้ และสามารถปรับปรุงโค้ดได้ ในรูปแบบของภาษา TypeScript