Từ JavaScript sang TypeScript: Hướng dẫn cho người mới bắt đầu

Xin chào bạn, ngôi sao lập trình tương lai! Tôi rất vui mừng được làm hướng dẫn viên cho bạn trong hành trình thú vị từ JavaScript sang TypeScript. Là người đã dạy khoa học máy tính trong nhiều năm, tôi đã chứng kiến biết bao sinh viên thực hiện cuộc chuyển đổi này, và tôi ở đây để giúp bạn làm cho nó suôn sẻ nhất có thể. Vậy, hãy lấy饮料 yêu thích của bạn, ngồi thoải mái, và cùng nhau bắt đầu nhé!

From JavaScript To TypeScript

TypeScript là gì?

Trước khi chúng ta bắt đầu cuộc hành trình di chuyển, hãy hiểu TypeScript là gì và tại sao nó ngày càng trở nên phổ biến.

TypeScript giống như người cousin có tổ chức và kỷ luật hơn của JavaScript. Nó là tập hợp của JavaScript, có nghĩa là tất cả mã JavaScript hợp lệ cũng là mã TypeScript hợp lệ. Tuy nhiên, TypeScript thêm vào các kiểu tĩnh tùy chọn và các tính năng khác giúp viết ứng dụng quy mô lớn dễ dàng hơn và ít lỗi hơn.

Hãy tưởng tượng bạn đang xây dựng một ngôi nhà. JavaScript giống như xây dựng bằng những mảnh Lego - linh hoạt và vui vẻ, nhưng đôi khi các mảnh không khớp với nhau hoàn hảo. TypeScript giống như sử dụng những mảnh Lego có hướng dẫn chi tiết - bạn biết chính xác mảnh nào sẽ đặt ở đâu, giảm thiểu cơ hội mắc lỗi.

Tại sao chuyển từ JavaScript sang TypeScript?

Bạn có thể tự hỏi, "Nếu JavaScript hoạt động tốt, tại sao lại phiền phức với TypeScript?" Câu hỏi tuyệt vời! Dưới đây là một số lý do:

Cải thiện chất lượng mã: Kiểu tĩnh của TypeScript giúp phát hiện lỗi sớm trong quá trình phát triển.
Hỗ trợ công cụ tốt hơn: IDE có thể cung cấp tính năng tự động hoàn thành và refactor tốt hơn với TypeScript.
Tăng cường khả năng đọc: Ghi chú kiểu giúp mã tự văn bản hóa và dễ hiểu hơn.
Dễ dàng bảo trì: Khi dự án phát triển, các tính năng của TypeScript giúp quản lý độ phức tạp.

Bây giờ chúng ta đã biết TypeScript tuyệt vời như thế nào, hãy bắt đầu cuộc hành trình di chuyển của mình!

Bước để chuyển từ JavaScript sang TypeScript

1. Cài đặt TypeScript

Đầu tiên, chúng ta cần cài đặt TypeScript. Mở terminal của bạn và chạy lệnh:

npm install -g typescript

Lệnh này cài đặt TypeScript trên toàn bộ máy của bạn. Bây giờ bạn có thể sử dụng lệnh tsc để biên dịch mã TypeScript.

2. Đổi tên các tệp .js thành .ts

Bước tiếp theo là đổi tên các tệp JavaScript của bạn từ .js thành .ts. Ví dụ, app.js sẽ thành app.ts. Đừng lo lắng, mã của bạn vẫn sẽ hoạt động!

3. Tạo tệp tsconfig.json

Bây giờ, hãy tạo một tệp cấu hình cho TypeScript. Trong thư mục gốc của dự án, tạo một tệp tên là tsconfig.json và thêm nội dung sau:

{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"strict": true,
"esModuleInterop": true
}
}

Cấu hình này cho TypeScript biết cách biên dịch mã của bạn. Nó giống như đưa ra hướng dẫn cho đầu bếp về cách chuẩn bị bữa ăn của bạn!

4. Bắt đầu thêm các.annotation kiểu

Bây giờ đến phần thú vị - thêm kiểu vào mã JavaScript của bạn! Hãy xem một số ví dụ:

Ví dụ 1: Biến

// JavaScript
let name = "Alice";
let age = 30;

// TypeScript
let name: string = "Alice";
let age: number = 30;

Trong ví dụ này, chúng ta đang告诉 TypeScript rằng name luôn phải là một chuỗi và age luôn phải là một số. Nếu chúng ta cố gắng gán một số cho name sau này, TypeScript sẽ cảnh báo chúng ta. Nó giống như có một người bạn giúp đỡ nhìn qua vai bạn và nói, "Bạn có chắc chắn muốn làm điều đó không?"

Ví dụ 2: Hàm

// JavaScript
function greet(name) {
return "Hello, " + name + "!";
}

// TypeScript
function greet(name: string): string {
return `Hello, ${name}!`;
}

Ở đây, chúng ta chỉ định rằng hàm greet nhận một tham số string và trả về một string. Điều này giúp ngăn chặn lỗi như vô tình truyền một số vào greet.

Ví dụ 3: Đối tượng

// JavaScript
let person = {
name: "Bob",
age: 25
};

// TypeScript
interface Person {
name: string;
age: number;
}

let person: Person = {
name: "Bob",
age: 25
};

Trong ví dụ này, chúng ta định nghĩa một interface Person mô tả hình dạng của đối tượng của chúng ta. Điều này giúp đảm bảo rằng person luôn có các thuộc tính đúng với các kiểu đúng.

5. Xử lý các kiểu `any`

Khi bạn di chuyển, bạn có thể gặp phải những nơi TypeScript không thể suy ra kiểu. Trong những trường hợp này, bạn sẽ thấy kiểu any. Mặc dù rất诱人 để sử dụng any ở mọi nơi, nhưng hãy cố gắng tránh nó khi có thể. Thay vào đó, định nghĩa các kiểu hoặc interface phù hợp.

6. Sử dụng các tính năng đặc biệt của TypeScript

TypeScript cung cấp một số tính năng tuyệt vời mà không có trong JavaScript. Hãy xem xét một vài tính năng:

Enums

enum Color {
Red,
Green,
Blue
}

let favoriteColor: Color = Color.Blue;

Enums cho phép chúng ta định nghĩa một tập hợp các constant có tên. Nó giống như tạo một menu các tùy chọn mà chúng ta có thể chọn.

Kiểu Union

function printId(id: number | string) {
console.log("Your ID is: " + id);
}

printId(101);  // Được chấp nhận
printId("202");  // Cũng được chấp nhận
printId(true);  // Lỗi!

Kiểu Union cho phép một giá trị là một trong nhiều kiểu. Nó giống như nói, "Đây có thể là số hoặc chuỗi, nhưng không phải gì khác!"

7. Dần dần tăng cường độ严格

TypeScript có nhiều cờ strictness mà bạn có thể bật trong tsconfig.json. Bắt đầu với các cài đặt ít strict hơn và dần dần tăng chúng khi bạn trở nên thoải mái hơn với TypeScript.

Cờ	Mô tả
`noImplicitAny`	Gây lỗi trên các biểu thức và kh官宣 bố có kiểu 'any' ngầm
`strictNullChecks`	Bật kiểm tra null strict
`strictFunctionTypes`	Bật kiểm tra kiểu hàm strict
`strictBindCallApply`	Bật 'bind', 'call', và 'apply' strict trên hàm
`strictPropertyInitialization`	Bật kiểm tra khởi tạo thuộc tính strict trong lớp
`noImplicitThis`	Gây lỗi trên các biểu thức 'this' có kiểu 'any' ngầm
`alwaysStrict`	Biên dịch trong chế độ strict và phát ra "use strict" cho mỗi tệp nguồn

8. Refactor và tối ưu hóa

Trong quá trình di chuyển, bạn có thể tìm thấy cơ hội refactor và cải thiện mã của mình. Kiểu tĩnh của TypeScript có thể giúp bạn bắt lỗi và làm mã của bạn mạnh mẽ hơn.

Kết luận

Chúc mừng! Bạn đã thực hiện những bước đầu tiên trong việc chuyển từ JavaScript sang TypeScript. Hãy nhớ rằng, đây là một hành trình, không phải một cuộc đua. Hãy dành thời gian, thử nghiệm, và đừng害怕 mắc lỗi - đó là cách chúng ta học hỏi!

TypeScript có thể看起来有点吓人 lúc đầu, nhưng tin tôi đi, một khi bạn làm quen với nó, bạn sẽ không thể tưởng tượng mình đã sống như thế nào mà không có nó. Nó giống như升级 từ xe đạp lên mô tô - có một chút curve học, nhưng sức mạnh và tốc độ bạn nhận được là tuyệt vời.

Tiếp tục thực hành, giữ vững sự tò mò, và quan trọng nhất, hãy vui vẻ! Trước khi bạn nhận ra, bạn sẽ viết TypeScript như một chuyên gia. Chúc may mắn với việc lập trình!

Credits: Image by storyset

Hướng Dẫn Trước:

TypeScript - tsconfig.json