Hướng Dẫn Chi Tiết Về TypeScript Dành Cho Người Mới Bắt Đầu
TypeScript đã trở thành một công cụ không thể thiếu trong phát triển ứng dụng web hiện đại, hỗ trợ từ các dự án nhỏ đến những ứng dụng quy mô lớn. Bài viết này sẽ giúp bạn khám phá những kiến thức nền tảng mà bất kỳ lập trình viên TypeScript nào cũng cần nắm vững, từ lúc mới bắt đầu cho đến khi trở thành thành thạo.
Điều Kiện Tiên Quyết
Để bắt đầu học TypeScript, bạn cần có những điều kiện sau:
- Hiểu biết cơ bản về JavaScript: TypeScript là một siêu ngôn ngữ của JavaScript, do đó, kiến thức về JavaScript là rất quan trọng.
- Cài đặt Node.js: Bạn cần có Node.js được cài đặt trên máy tính để có thể chạy TypeScript.
- Trình Soạn Thảo Mã: Chúng tôi khuyến khích bạn sử dụng Visual Studio Code (VS Code) vì nó hỗ trợ TypeScript rất tốt.
Thiết Lập Môi Trường Làm Việc Với TypeScript
Để bắt đầu, bạn cần thiết lập một dự án TypeScript. Dưới đây là các bước chi tiết:
# Cài đặt TypeScript toàn cầu
npm install -g typescript
# Tạo thư mục dự án mới
mkdir ts-basics
cd ts-basics
# Khởi tạo một dự án npm mới
npm init -y
# Cài đặt TypeScript như là một phụ thuộc phát triển
npm install typescript --save-dev
# Khởi tạo cấu hình TypeScript
npx tsc --initCác Khái Niệm Cốt Lõi Trong TypeScript
1. Các Kiểu Dữ Liệu Cơ Bản
TypeScript có hệ thống kiểu mạnh mẽ. Dưới đây là các kiểu dữ liệu cơ bản mà bạn sẽ sử dụng:
typescript
// Các kiểu dữ liệu cơ bản
let fullName: string = "John Doe";
let age: number = 30;
let isEmployed: boolean = true;
// Mảng
let numbers: number[] = [1, 2, 3, 4, 5];
let names: Array<string> = ["Alice", "Bob", "Charlie"];
// Tuple
let person: [string, number] = ["John", 30];
// Enum
enum Color {
Red,
Green,
Blue
}
let favoriteColor: Color = Color.Blue;
// Any và Unknown
let notSure: any = 4;
let mysterious: unknown = "hello";2. Suy Luận Kiểu (Type Inference)
TypeScript có khả năng suy luận kiểu tự động trong nhiều trường hợp:
typescript
// Suy luận kiểu tự động
let message = "Hello"; // TypeScript suy luận kiểu là string
let count = 42; // TypeScript suy luận kiểu là number
let isValid = true; // TypeScript suy luận kiểu là boolean
// Suy luận mảng
let numbers = [1, 2, 3]; // TypeScript suy luận kiểu là number[]3. Giao Diện (Interfaces)
Interfaces trong TypeScript giúp xác định cấu trúc của các đối tượng:
typescript
interface User {
name: string;
age: number;
email: string;
isAdmin?: boolean; // Thuộc tính tùy chọn
}
function createUser(user: User): void {
console.log(`Creating user: ${user.name}`);
}
// Sử dụng interface
const newUser: User = {
name: "Alice",
age: 25,
email: "alice@example.com"
};
createUser(newUser);4. Hàm Trong TypeScript
Định kiểu cho hàm là một phần quan trọng:
typescript
// Hàm với chú thích kiểu
function add(x: number, y: number): number {
return x + y;
}
// Hàm arrow với kiểu
const multiply = (x: number, y: number): number => x * y;
// Tham số tùy chọn và tham số mặc định
function greet(name: string, greeting: string = "Hello"): string {
return `${greeting}, ${name}!`;
}
// Tham số rest
function sum(...numbers: number[]): number {
return numbers.reduce((acc, curr) => acc + curr, 0);
}5. Dự Án Thực Tiễn: Ứng Dụng Danh Sách Công Việc (Todo List)
Chúng ta sẽ xây dựng một ứng dụng danh sách công việc đơn giản:
typescript
interface Todo {
id: number;
title: string;
completed: boolean;
dueDate?: Date;
}
class TodoList {
private todos: Todo[] = [];
addTodo(title: string): void {
const todo: Todo = {
id: Date.now(),
title,
completed: false
};
this.todos.push(todo);
}
toggleTodo(id: number): void {
const todo = this.todos.find(t => t.id === id);
if (todo) {
todo.completed = !todo.completed;
}
}
listTodos(): void {
this.todos.forEach(todo => {
console.log(`[${todo.completed ? 'X' : ' '}] ${todo.title}`);
});
}
}
// Sử dụng
const myTodos = new TodoList();
myTodos.addTodo("Học kiến thức cơ bản về TypeScript");
myTodos.addTodo("Thực hành lập trình");
myTodos.toggleTodo(1);
myTodos.listTodos();Những Lỗi Thường Gặp Và Các Phương Pháp Tốt Nhất
1. Ép Kiểu (Type Assertions)
Sử dụng ép kiểu khi thật sự cần thiết:
typescript
let someValue: unknown = "this is a string";
let strLength: number = (someValue as string).length;2. Kiểm Tra Giá Trị Null
Bật chế độ kiểm tra null nghiêm ngặt trong tsconfig.json:
json
{
"compilerOptions": {
"strictNullChecks": true
}
}3. Type So Với Interface
Biết khi nào nên sử dụng mỗi loại:
typescript
// Sử dụng interface cho định nghĩa đối tượng
interface Animal {
name: string;
makeSound(): void;
}
// Sử dụng type cho các phép toán giao nhau, hợp nhất và kiểu nguyên thủy
type StringOrNumber = string | number;
type Point = { x: number; y: number };Bước Tiếp Theo Để Học TypeScript
- Thực hành chú thích kiểu với các cấu trúc dữ liệu khác nhau.
- Khám phá TypeScript Playground tại typescript-play.js.org.
- Đọc tài liệu chính thức của TypeScript để mở rộng kiến thức.
- Chuyển đổi một số dự án JavaScript của bạn sang TypeScript để thực hành.
Tài Nguyên Học Tập Thêm
- Tài liệu chính thức của TypeScript
- TypeScript Playground
- Kho lưu trữ TypeScript trên GitHub của Microsoft
source: viblo
