Nâng trình JavaScript của bạn: Tại sao nên sử dụng TypeScript cho phát triển?

TypeScript là gì?

JavaScript và Hơn thế nữa: TypeScript bổ sung cú pháp mở rộng cho JavaScript để hỗ trợ tích hợp chặt chẽ hơn với trình soạn thảo của bạn. Phát hiện lỗi sớm trong trình soạn thảo.
Kết quả Đáng tin cậy: Mã TypeScript được chuyển đổi thành JavaScript, có thể chạy ở bất kỳ đâu JavaScript chạy được: Trong trình duyệt, trên Node.js hoặc Deno và trong các ứng dụng của bạn.
An toàn ở Quy mô lớn: TypeScript hiểu JavaScript và sử dụng suy luận kiểu (type inference) để cung cấp cho bạn công cụ tuyệt vời mà không cần thêm mã.

Trình duyệt có thể sử dụng TypeScript không?

Không, trình duyệt không thể chạy trực tiếp TypeScript. Nó cần được chuyển đổi thành JavaScript trước. Bạn có thể sử dụng:

Trình biên dịch TypeScript (tsc) https://www.typescriptlang.org/docs/handbook/compiler-options.html
Webpack https://webpack.js.org/
Babel https://babeljs.io/
hoặc các công cụ biên dịch JavaScript khác...

Ví dụ, nếu bạn có một tệp myFile.ts, bạn có thể sử dụng Trình biên dịch TypeScript với lệnh:
$ tsc myFile.ts
Lệnh này tạo ra một tệp có tên myFile.js.
Để bao gồm myFile.js trong HTML của bạn, bạn có thể viết mã sau:

<!DOCTYPE html>
<html>
<head>
    <title>Ví dụ TypeScript</title>
</head>
<body>
    <script src="myFile.js"></script>
</body>
</html>

Mở tệp HTML trong trình duyệt của bạn, và JavaScript được biên dịch từ myFile.ts sẽ chạy giống như bất kỳ mã JavaScript nào khác.

Khi nào chúng ta sử dụng TypeScript?

Cho các dự án lớn
Khi làm việc trong nhóm
Để làm cho mã đáng tin cậy hơn và dễ quản lý hơn

TypeScript giống như JavaScript với sức mạnh. Nó giúp lập trình viên viết mã tốt hơn với ít lỗi hơn. Mặc dù nó yêu cầu một bước bổ sung trước khi chạy trong trình duyệt, nhiều nhà phát triển thấy lợi ích đáng giá, đặc biệt là đối với các dự án lớn hoặc phức tạp.

Một số ví dụ minh họa cách TypeScript có thể phát hiện lỗi sớm, cung cấp gợi ý mã tốt hơn, và làm cho mã của bạn tự tài liệu hóa tốt hơn.

Ví dụ về kiểm tra kiểu

JavaScript:

function addNumbers(a, b) {
  return a + b;
}

console.log(addNumbers("5", 10)); // Đầu ra "510" (nối chuỗi)

TypeScript:

function addNumbers(a: number, b: number): number {
  return a + b;
}

console.log(addNumbers("5", 10)); // Lỗi: Đối số kiểu 'string' không thể gán cho tham số kiểu 'number'.

Ví dụ về tự động hoàn thành và IntelliSense

JavaScript:

let person = {
  name: "John",
  age: 30
};

person.adress; // Không có lỗi, nhưng 'adress' bị viết sai chính tả và không tồn tại

TypeScript:

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

let person: Person = {
  name: "John",
  age: 30
};

person.adress; // Lỗi: Thuộc tính 'adress' không tồn tại trong kiểu 'Person'.

Ví dụ về thuộc tính lớp

JavaScript:

class Car {
  constructor(make, model) {
    this.make = make;
    this.model = model;
  }
}

let myCar = new Car("Toyota", "Corolla");
console.log(myCar.year); // Undefined, không có lỗi

TypeScript:

class Car {
  make: string;
  model: string;

  constructor(make: string, model: string) {
    this.make = make;
    this.model = model;
  }
}

let myCar = new Car("Toyota", "Corolla");
console.log(myCar.year); // Lỗi: Thuộc tính 'year' không tồn tại trong kiểu 'Car'.

Để biết thêm thông tin, hãy truy cập https://www.typescriptlang.org/docs/