TypeScript đã trở thành một công cụ không thể thiếu trong phát triển web hiện đại. Là một superset của JavaScript, nó bổ sung kiểu tĩnh, cải thiện công cụ dành cho nhà phát triển và tăng cường khả năng đọc mã cho hệ sinh thái JavaScript.
Nếu bạn là một lập trình viên đang muốn xây dựng các ứng dụng có khả năng mở rộng và dễ bảo trì, việc hiểu các khái niệm cốt lõi của TypeScript là điều cần thiết. Bài viết này sẽ hướng dẫn bạn tìm hiểu những nguyên tắc cơ bản hình thành nên xương sống của TypeScript.
1. TypeScript là gì?
TypeScript là một ngôn ngữ lập trình mã nguồn mở được phát triển bởi Microsoft. Nó được xây dựng dựa trên JavaScript bằng cách thêm các kiểu tĩnh tùy chọn. Điều này có nghĩa là bạn có thể xác định kiểu của các biến, tham số hàm và giá trị trả về, cho phép kiểm tra kiểu tại thời điểm biên dịch.
Những lợi ích chính:
- Phát hiện lỗi sớm.
- Hỗ trợ IDE nâng cao với tính năng tự động hoàn thành và tái cấu trúc.
- Dễ dàng cộng tác trong các nhóm lớn.
2. Chú thích Kiểu và Suy đoán Kiểu
Chú thích Kiểu
TypeScript cho phép bạn chỉ định rõ ràng kiểu của một biến hoặc tham số hàm:
let username: string = "John";
let age: number = 25; function greet(name: string): string { return `Hello, ${name}`;
}
Suy đoán Kiểu
Trong nhiều trường hợp, TypeScript có thể tự động suy ra kiểu dựa trên giá trị được gán:
let isActive = true; // Inferred as boolean
3. Giao diện và Kiểu
Giao diện
Giao diện được sử dụng để xác định hình dạng của một đối tượng:
interface User { id: number; name: string;
} const user: User = { id: 1, name: "Alice" };
Kiểu Bí danh
Kiểu bí danh tương tự như giao diện nhưng có thể đại diện cho các kiểu phức tạp hơn:
type UserID = string | number;
Sử dụng giao diện để xác định đối tượng và kiểu bí danh cho các định nghĩa kiểu linh hoạt hơn.
4. Enums
Enums cho phép bạn xác định một tập hợp các hằng số được đặt tên:
enum Role { Admin, User, Guest,
} const userRole: Role = Role.Admin;
5. Generics
Generics cho phép tạo các thành phần có thể tái sử dụng bằng cách cho phép các kiểu được truyền dưới dạng tham số:
function identity<T>(value: T): T { return value;
} const num = identity<number>(42);
const str = identity<string>("Hello");
6. Kiểu Union và Intersection
Kiểu Union
Kiểu Union cho phép các biến chứa các giá trị thuộc các kiểu khác nhau:
let value: string | number;
value = "Hello";
value = 42;
Kiểu Intersection
Kiểu Intersection kết hợp nhiều kiểu thành một:
type Person = { name: string };
type Employee = { id: number }; type Staff = Person & Employee;
const staff: Staff = { name: "Bob", id: 123 };
7. Modules và Namespaces
TypeScript hỗ trợ các modules ES6 để tổ chức mã:
// math.ts
export function add(a: number, b: number): number { return a + b;
} // app.ts
import { add } from "./math";
console.log(add(2, 3));
Namespaces (không được khuyến khích sử dụng trong TypeScript hiện đại) được sử dụng để tổ chức mã trước khi có modules ES6:
namespace Utils { export function log(message: string): void { console.log(message); }
} Utils.log("Hello, Namespace!");
8. Kiểu Nâng cao
Kiểu Được Ánh xạ (Mapped Types)
Kiểu được ánh xạ cho phép bạn tạo các kiểu mới bằng cách biến đổi các kiểu hiện có:
type Readonly<T> = { readonly [K in keyof T]: T[K];
}; interface User { id: number; name: string;
} const readonlyUser: Readonly<User> = { id: 1, name: "Alice" };
Kiểu Có Điều kiện (Conditional Types)
Kiểu có điều kiện cung cấp logic kiểu:
type IsString<T> = T extends string ? true : false; type Result = IsString<number>; // false
9. Decorators
Decorators là một tính năng của TypeScript được sử dụng để sửa đổi các lớp, phương thức hoặc thuộc tính. Chúng thường được thấy trong các framework như Angular:
function Log(target: any, key: string): void { console.log(`${key} was called`);
} class Person { @Log sayHello() { console.log("Hello!"); }
}
10. Công cụ và Cấu hình
tsconfig.json
Các dự án TypeScript được cấu hình bằng cách sử dụng tệp tsconfig.json:
{ "compilerOptions": { "target": "ES6", "module": "commonjs", "strict": true, "outDir": "./dist" }, "include": ["src/**/*"], "exclude": ["node_modules"]
}
Các công cụ phổ biến
- TSC: Trình biên dịch TypeScript.
- ESLint: Dùng để kiểm tra cú pháp (linting) mã TypeScript.
- Prettier: Dùng để định dạng mã.
- TypeScript Plugin: Nâng cao hỗ trợ trình soạn thảo trong VSCode và các IDE khác.
Kết luận
TypeScript cho phép các nhà phát triển viết các ứng dụng mạnh mẽ, dễ bảo trì và có khả năng mở rộng. Bằng cách hiểu các khái niệm cốt lõi của nó, bạn có thể khai thác toàn bộ tiềm năng của nó và cải thiện đáng kể trải nghiệm phát triển của mình. Cho dù bạn đang xây dựng các tập lệnh nhỏ hay các ứng dụng cấp doanh nghiệp, TypeScript là một bổ sung giá trị cho bộ công cụ của bạn.