TypeScript ra đời vào tháng 10 năm 2012 bởi Microsoft nhằm giải quyết những hạn chế của JavaScript trong việc phát triển các dự án lớn. Anders Hejlsberg, người đã góp phần tạo ra Turbo Pascal, Delphi, và C#, là người dẫn dắt dự án này.

Mục tiêu chính của TypeScript là cung cấp hệ thống kiểu tĩnh, giúp giảm lỗi và tăng tính duy trì (maintainability) của code mà vẫn tương thích hoàn toàn với code JavaScript hiện có.

1. Typescript là gì?

TypeScript (ts) là một ngôn ngữ lập trình mở rộng từ JavaScript, bổ sung hệ thống kiểu tĩnh và hỗ trợ các tính năng như interfaces và generics. Typescript giúp bạn phát hiện lỗi ngay ở giai đoạn biên dịch (compile-time) thay vì đợi đến lúc chạy chương trình (runtime), từ đó tăng độ an toàn và giảm thiểu lỗi cho lập trình viên.

Một lợi thế lớn của TypeScript là khả năng tương thích hoàn toàn với JavaScript. Điều này có nghĩa là bạn có thể sử dụng code JavaScript hiện có trong TypeScript mà không cần chỉnh sửa hay viết lại từ đầu. Nhờ vậy, quá trình chuyển đổi từ JavaScript sang TypeScript trở nên dễ dàng và linh hoạt hơn, cho phép bạn dần dần áp dụng các tính năng của TypeScript mà không cần phải thay đổi toàn bộ code ngay lập tức.

Ví dụ: Trong TypeScript, nếu bạn chỉ định kiểu dữ liệu là số, nó sẽ cảnh báo ngay khi bạn cố gắng gán một chuỗi cho biến age.

let age = 25;
age = "twenty-five"; // JavaScript sẽ không cảnh báo lỗi dù bạn chuyển kiểu từ số sang chuỗi

let age: number = 25;
age = "twenty-five"; // TypeScript sẽ báo lỗi vì "twenty-five" không phải là số

2. Kiểu tĩnh và Kiểu động

Hệ thống kiểu (Type System) trong lập trình giúp phân loại và xác định các kiểu dữ liệu, như số, chuỗi, hoặc kiểu do lập trình viên định nghĩa. Nó quy định các quy tắc về cách sử dụng dữ liệu. Hệ thống kiểu đảm bảo rằng các phép tính chỉ được thực hiện trên các loại dữ liệu phù hợp, giảm nguy cơ lỗi.

2.1 Kiểu tĩnh và kiểu động là gì?

Kiểu tĩnh: Trong các ngôn ngữ có kiểu tĩnh như TypeScript, Java hay C++, kiểu của biến được xác định trong quá trình biên dịch. Điều này giúp phát hiện lỗi trước khi chương trình chạy, đảm bảo code ổn định và dễ duy trì hơn. Nó cũng hỗ trợ các công cụ lập trình tốt hơn, như gợi ý code và refactor code dễ dàng.

Kiểu động: Các ngôn ngữ như JavaScript và Python sử dụng kiểu động, nghĩa là kiểu của biến được xác định khi chương trình đang chạy. Điều này giúp lập trình viên viết code nhanh và linh hoạt hơn, nhưng lại có thể gây ra nhiều lỗi khi chạy chương trình do không kiểm tra kiểu trước.

2.2 So sánh kiểu tĩnh và kiểu động

Kiểu tĩnh mang lại sự an toàn và phù hợp với các dự án lớn, đảm bảo code dễ bảo trì và ít lỗi. Trong khi đó kiểu động giúp lập trình nhanh hơn và thuận tiện cho các dự án nhỏ, nhưng có thể khó kiểm soát khi dự án phức tạp hơn.

3. Các tính năng chính của Typescript

3.1 Type annotation

Type annotation (chú thích kiểu) là một trong những tính năng quan trọng nhất của TypeScript. Nó cho phép lập trình viên xác định rõ kiểu dữ liệu cho các biến, tham số hàm và giá trị trả về. Điều này giúp đảm bảo rằng mã nguồn được viết theo một chuẩn cụ thể, tăng tính rõ ràng và dễ duy trì.

Khi bạn sử dụng chú thích kiểu, TypeScript sẽ kiểm tra kiểu dữ liệu trong lúc biên dịch (compile-time). Nếu có lỗi về kiểu dữ liệu, chẳng hạn như gán một chuỗi vào một biến yêu cầu số, TypeScript sẽ báo lỗi trước khi chương trình được thực thi.

// Ví dụ về hàm không có chú thích kiểu
function add(a, b) {
    return a + b;
}

console.log(add(5, "10"));  // Kết quả là: "510" (nối chuỗi thay vì cộng số)

// Ví dụ với chú thích kiểu
function add(a: number, b: number): number {
    return a + b;
}

console.log(add(5, "10"));  // Lỗi biên dịch: Argument of type 'string' is not assignable to parameter of type 'number'.

3.2 Kiểm tra kiểu trong lúc biên dịch

Kiểm tra kiểu trong lúc biên dịch là quá trình mà TypeScript sử dụng để kiểm tra xem các kiểu dữ liệu trong code có khớp với những gì đã được chỉ định hay không, trước khi code được chuyển thành JavaScript và chạy.

Nhờ vào quá trình này, các lỗi liên quan đến kiểu dữ liệu sẽ được phát hiện và báo cho lập trình viên trước khi code được thực thi, giúp tránh lỗi khi chương trình đang chạy.

function multiply(a: number, b: number): number {
    return a * b;
}

// Lỗi sẽ được phát hiện trong quá trình biên dịch
console.log(multiply(5, "10")); // Error: Argument of type 'string' is not assignable to parameter of type 'number'.

3.3 Type inference

Suy luận kiểu (Type inference) là một tính năng của TypeScript cho phép trình biên dịch tự động suy ra kiểu của biến hoặc hàm dựa trên cách chúng được sử dụng, mà không cần lập trình viên phải chỉ định rõ ràng.

let age = 25;  // TypeScript suy ra 'age' là kiểu 'number'
age = "twenty-five";  // Lỗi biên dịch: không thể gán chuỗi cho biến kiểu số

function greet(name = "World") {
    return `Hello, ${name}!`;
}
let message = greet();  // TypeScript suy ra 'message' là kiểu 'string'

Mặc dù suy luận kiểu giúp giảm bớt việc phải chú thích kiểu, nhưng trong một số trường hợp phức tạp, TypeScript có thể không suy ra chính xác kiểu dữ liệu. Lúc này, bạn cần phải cung cấp chú thích kiểu rõ ràng để đảm bảo code dễ hiểu và dễ bảo trì hơn.

function getLength(value: any) {
    return value.length;
}

Trong ví dụ trên, TypeScript không biết chính xác kiểu dữ liệu của value, vì kiểu any cho phép bất kỳ loại dữ liệu nào. Điều này có thể dẫn đến lỗi khi bạn truyền vào một giá trị không có thuộc tính length, chẳng hạn như số hoặc đối tượng khác.

3.4 Type erasure

Type erasure trong TypeScript là quá trình loại bỏ thông tin về kiểu dữ liệu khi code TypeScript được biên dịch thành JavaScript. Trong quá trình này, tất cả các thông tin về kiểu dữ liệu sẽ bị loại bỏ, điều này giúp đảm bảo rằng code JavaScript sau khi biên dịch xong vẫn tương thích hoàn toàn với các thư viện, công cụ và framework hiện có của JavaScript.

// Code TypeScript có chú thích kiểu
function add(a: number, b: number): number {
    return a + b;
}

let result = add(10, 20); // Code TypeScript

// Sau khi biên dịch thành JavaScript
function add(a, b) {
    return a + b;
}

let result = add(10, 20); // Code JavaScript

Khi chương trình chạy, JavaScript không biết về kiểu dữ liệu mà TypeScript đã kiểm tra trong quá trình biên dịch, các lỗi về kiểu có thể xảy ra trong runtime nếu không được xử lý đúng cách.

3.5 Các tính năng khác

TypeScript không chỉ kế thừa những tính năng từ ECMAScript 2015 (ES6) mà còn mang đến những cải tiến riêng giúp việc phát triển ứng dụng trở nên hiệu quả hơn. Dưới đây là một số tính năng quan trọng khác của TypeScript:

• Namespaces: Tổ chức và sắp xếp code theo các namespace, giúp tránh xung đột tên và cải thiện khả năng quản lý code trong các dự án lớn.
• Arrow functions: Cung cấp cú pháp ngắn gọn cho các hàm ẩn danh và tự động liên kết this, giúp code dễ viết và rõ ràng hơn.
• Async/await: Giúp viết các thao tác bất đồng bộ một cách rõ ràng hơn bằng cách sử dụng cú pháp async và await, thay vì sử dụng Promise.
• Classes: TypeScript mở rộng khái niệm lớp trong JavaScript, cho phép lập trình viên sử dụng các tính năng như quyền truy cập (ví dụ: private, public, protected) để kiểm soát việc truy cập thuộc tính hoặc phương thức trong lớp. Ngoài ra, TypeScript hỗ trợ lớp trừu tượng (abstract classes), giúp lập trình viên định nghĩa các lớp cơ sở mà không cần phải triển khai ngay các chi tiết, từ đó tạo ra các cấu trúc linh hoạt hơn trong lập trình hướng đối tượng.
• Generics: Generics cho phép bạn viết các hàm, lớp, hoặc giao diện có thể hoạt động với nhiều kiểu dữ liệu khác nhau, nhưng vẫn đảm bảo rằng dữ liệu đó phải đúng kiểu trong suốt quá trình sử dụng
• Interfaces: Cho phép bạn mô tả cấu trúc của một đối tượng, quy định những thuộc tính và phương thức mà đối tượng đó phải có. Điều này giúp đảm bảo rằng các đối tượng tuân theo một cấu trúc nhất định, giúp code dễ kiểm tra và nhất quán hơn.
• Module: Giúp chia code thành các phần riêng lẻ và độc lập, giúp tổ chức code tốt hơn. Bạn có thể tách biệt các phần code khác nhau thành từng mô-đun, sau đó dễ dàng quản lý, bảo trì, và tái sử dụng chúng trong các phần khác của ứng dụng.

4. Kết luận

TypeScript tận dụng được mọi lợi ích từ hệ sinh thái JavaScript, bao gồm các thư viện và công cụ phổ biến, giúp lập trình viên làm việc dễ dàng hơn. Nó giải quyết các vấn đề mà JavaScript gặp phải khi phát triển các ứng dụng quy mô lớn, mang lại trải nghiệm lập trình hiệu quả và ổn định hơn.

Các bài viết liên quan:

• Javascript là gì? Tìm hiểu về ngôn ngữ lập trình phổ biến bậc nhất
• ReactJS là gì? Thư viện Javascript tối ưu cho giao diện Web
• Prettier là gì? Công cụ Định dạng mã nguồn tự động cho Lập trình viên
• Thư viện Husky là gì? Đảm bảo chất lượng Code với Git Hooks và Husky