10 Mẹo TypeScript Giúp Viết Mã Sạch
Trong bài viết này, chúng ta sẽ tìm hiểu 10 mẹo sử dụng TypeScript có thể giúp bạn viết mã sạch và dễ bảo trì hơn. Chúng tôi sẽ cùng xem xét từng mẹo kèm theo ví dụ cụ thể để bạn có thể hình dung cách thức hoạt động và lợi ích mà chúng có thể mang lại cho dự án của bạn. Việc áp dụng những phương pháp này vào mã TypeScript của bạn sẽ góp phần tạo ra những ứng dụng mạnh mẽ và dễ dàng trong việc xử lý và gỡ lỗi.
1. Sử Dụng Chú Thích Kiểu
TypeScript cho phép bạn xác định kiểu cho các biến và hàm. Việc áp dụng chú thích kiểu giúp phát hiện ra lỗi sớm hơn và nâng cao tính dễ đọc cho mã.
Ví dụ:
typescript
let count: number = 0;
function addNumbers(a: number, b: number): number {
return a + b;
}
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. Sử Dụng Enums
Enums là tính năng mạnh mẽ cho phép bạn định nghĩa các hằng số được đặt tên. Chúng giúp cải thiện sự rõ ràng trong mã và giảm thiểu lỗi liên quan đến các giá trị ẩn.
Ví dụ:
typescript
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 RED3. Sử Dụng Optional Chaining
Optional chaining cho phép bạn truy cập thuộc tính và phương thức của các đối tượng mà không cần lo lắng về giá trị null hoặc undefined.
Ví dụ:
typescript
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: undefined4. Sử Dụng Nullish Coalescing
Nullish Coalescing cho phép bạn cung cấp giá trị mặc định cho một biến khi nó có giá trị null hoặc undefined, giúp mã trở nên mạnh mẽ và dễ hiểu hơn.
Ví dụ:
typescript
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. Sử Dụng Generics
Generics cho phép bạn viết mã có thể tái sử dụng cho nhiều loại khác nhau. Điều này giúp giảm thiểu sự trùng lặp mã và dễ dàng bảo trì hơn.
Ví dụ:
typescript
function identity<T>(arg: T): T {
return arg;
}
let output1 = identity<string>("hello"); // output: "hello"
let output2 = identity<number>(42); // output: 426. Sử Dụng Interfaces
Interfaces giúp bạn định nghĩa kiểu contract cho lớp, đối tượng, hoặc hàm, giúp phát hiện lỗi sớm hơn và làm cho mã rõ ràng hơn.
Ví dụ:
typescript
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. Sử Dụng Destructuring
Destructuring giúp bạn trích xuất giá trị từ mảng và đối tượng một cách dễ dàng và rõ ràng hơn.
Ví dụ:
typescript
let person = { firstName: "John", lastName: "Doe", age: 30 };
let { firstName, lastName } = person;
console.log(firstName); // output: "John"
console.log(lastName); // output: "Doe"8. Sử Dụng Async/Await
Async/await giúp mã bất đồng bộ trở nên dễ đọc hơn và tương tự như mã đồng bộ, giúp giảm khả năng xảy ra lỗi liên quan đến callback.
Ví dụ:
typescript
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. Sử Dụng Pick Helper
Pick helper cho phép bạn tạo kiểu mới từ các kiểu hiện có, giúp mã dễ bảo trì và sử dụng lại hơn.
Ví dụ:
typescript
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. Sử Dụng Omit Helper
Omit cho phép bạn tạo các kiểu mới từ các kiểu hiện có nhưng loại bỏ một số thuộc tính không cần thiết, giúp mã rõ ràng và an toàn hơn.
Ví dụ:
typescript
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 }Kết Luận
Việc áp dụng những mẹo này vào dự án TypeScript của bạn sẽ góp phần tạo ra mã nguồn rõ ràng, dễ hiểu và dễ dàng bảo trì. Hãy thử ngay hôm nay và trải nghiệm sự khác biệt mà TypeScript có thể mang lại cho quy trình phát triển của bạn!
source: viblo
