TypeScript Clean Code

TypeScript tricks for Clean Code

Chúng ta sẽ khám phá 10 TypeScript ticks để viết mã sạch, kèm theo các ví dụ minh họa cách chúng hoạt động và lý do chúng hữu ích. Bằng cách sử dụng các thủ thuật này trong mã TypeScript của riêng bạn, bạn có thể tạo các ứng dụng mạnh mẽ hơn và dễ bảo trì hơn, dễ dàng xử lý và gỡ lỗi hơn.

1. Use Type Annotations

TypeScript cho phép bạn xác định kiểu cho các biến và hàm. Việc sử dụng chú thích kiểu có thể giúp sớm phát hiện lỗi trong quá trình phát triển và cải thiện khả năng đọc mã.

ví dụ

// Explicitly specify the data type of a variable
let count: number = 0;

// Explicitly specify the data type of a function parameter and return value
function addNumbers(a: number, b: number): number {
  return a + b;
}

// Explicitly specify the data type of a class property
class Person {
  name: string;
  age: number;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }

  getDetails(): string {
    return `${this.name} is ${this.age} years old.`;
  }
}

2. Use Enums

Enums là một tính năng mạnh mẽ của TypeScript cho phép bạn xác định một tập hợp các hằng số được đặt tên. Chúng có thể giúp làm cho mã của bạn dễ đọc và dễ bảo trì hơn, cũng như giảm khả năng xảy ra lỗi do các magic numbers gây ra.

ví dụ

enum Color {
  Red = "RED",
  Green = "GREEN",
  Blue = "BLUE"
}

function printColor(color: Color): void {
  console.log(`The color is ${color}`);
}

printColor(Color.Red); // output: The color is RED

3. Use Optional Chaining

Optional chaining là một tính năng của TypeScript cho phép bạn truy cập các thuộc tính và phương thức lồng nhau một cách an toàn mà không phải lo lắng về việc liệu các giá trị trung gian có rỗng hay không được xác định. Điều này có thể giúp giảm khả năng xảy ra lỗi thời gian chạy và làm cho mã của bạn mạnh mẽ hơn. ví dụ

interface Person {
  name: string;
  address?: {
    street: string;
    city: string;
    state: string;
  };
}

const person1: Person = {
  name: "John",
  address: {
    street: "123 Main St",
    city: "Anytown",
    state: "CA",
  },
};

const person2: Person = {
  name: "Jane",
};

console.log(person1?.address?.city); // output: Anytown
console.log(person2?.address?.city); // output: undefined

4. Use Nullish Coalescing

Nullish Coalescing là một tính năng khác của TypeScript có thể giúp mã của bạn mạnh mẽ hơn. Nó cho phép bạn cung cấp giá trị mặc định cho một biến hoặc biểu thức khi nó rỗng hoặc không xác định mà không cần dựa vào các giá trị giả.

ví dụ

let value1: string | null = null;
let value2: string | undefined = undefined;
let value3: string | null | undefined = "hello";

console.log(value1 ?? "default value"); // output: "default value"
console.log(value2 ?? "default value"); // output: "default value"
console.log(value3 ?? "default value"); // output: "hello"

5. Use Generics

Generics là một tính năng mạnh mẽ của TypeScript cho phép bạn viết mã có thể tái sử dụng và hoạt động với nhiều loại khác nhau. Chúng có thể giúp giảm sự trùng lặp mã và cải thiện khả năng bảo trì mã. ví dụ

function identity<T>(arg: T): T {
  return arg;
}

let output1 = identity<string>("hello"); // output: "hello"
let output2 = identity<number>(42); // output: 42

6. Use Interfaces

Interface là một tính năng mạnh mẽ khác của TypeScript có thể giúp bạn viết mã rõ ràng và dễ đọc. Chúng cho phép bạn xác định hợp đồng cho một lớp, đối tượng hoặc hàm, điều này có thể giúp bạn tránh các lỗi phổ biến và làm cho mã của bạn tự ghi lại nhiều hơn.

ví dụ

interface Person {
  firstName: string;
  lastName: string;
  age?: number;
}

function sayHello(person: Person): void {
  console.log(`Hello, ${person.firstName} ${person.lastName}!`);
  if (person.age) {
    console.log(`You are ${person.age} years old.`);
  }
}

let person1 = { firstName: "John", lastName: "Doe", age: 30 };
let person2 = { firstName: "Jane", lastName: "Doe" };

sayHello(person1); // output: "Hello, John Doe! You are 30 years old."
sayHello(person2); // output: "Hello, Jane Doe!"

7. Use Destructuring

Destructuring là một cú pháp tốc ký cho phép bạn trích xuất các giá trị từ mảng và đối tượng. Nó có thể giúp làm cho mã của bạn dễ đọc và ngắn gọn hơn, cũng như giảm khả năng xảy ra lỗi do đặt tên biến sai.

ví dụ

let person = { firstName: "John", lastName: "Doe", age: 30 };

let { firstName, lastName } = person;

console.log(firstName); // output: "John"
console.log(lastName); // output: "Doe"

8. Use Async/Await

Async/await là một tính năng mạnh mẽ của TypeScript cho phép bạn viết mã không đồng bộ trông và hoạt động giống như mã đồng bộ. Nó có thể giúp cải thiện khả năng đọc mã và giảm khả năng xảy ra lỗi do lỗi gọi lại.

ví dụ

async function getData() {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  return data;
}

getData().then((data) => {
  console.log(data);
}).catch((error) => {
  console.error(error);
});

9. Use Pick Helper

Pick helper là một loại tiện ích TypeScript cho phép chúng ta tạo các kiểu mới từ các kiểu hiện có, giúp việc sử dụng lại và duy trì mã dễ dàng hơn. Nó cũng giúp ngăn ngừa lỗi bằng cách đảm bảo rằng loại mới chỉ bao gồm các thuộc tính mà chúng ta định sử dụng.

ví dụ

interface User {
  name: string;
  email: string;
  age: number;
  isAdmin: boolean;
}

type UserSummary = Pick<User, 'name' | 'email'>;

const user: User = {
  name: 'John Doe',
  email: 'johndoe@example.com',
  age: 30,
  isAdmin: false,
};

const summary: UserSummary = {
  name: user.name,
  email: user.email,
};

console.log(summary); // Output: { name: 'John Doe', email: 'johndoe@example.com' }

10. Use Omit Helper

Omit là một loại tiện ích TypeScript cho phép chúng ta tạo các loại mới từ các loại hiện có, đồng thời đảm bảo rằng một số thuộc tính nhất định được loại trừ. Điều này có thể hữu ích khi làm việc với các giao diện phức tạp trong đó các thuộc tính nhất định có thể không cần thiết trong một số trường hợp nhất định. Nó cũng có thể giúp ngăn ngừa lỗi bằng cách đảm bảo rằng một số thuộc tính nhất định không được đưa vào một cách vô tình.

ví dụ

interface User {
  name: string;
  email: string;
  age: number;
  isAdmin: boolean;
}

type UserWithoutEmail = Omit<User, 'email'>;

const user: User = {
  name: 'John Doe',
  email: 'johndoe@example.com',
  age: 30,
  isAdmin: false,
};

const userWithoutEmail: UserWithoutEmail = {
  name: user.name,
  age: user.age,
  isAdmin: user.isAdmin,
};

console.log(userWithoutEmail); // Output: { name: 'John Doe', age: 30, isAdmin: false }