English

TypeScript cho người mới bắt đầu - Đưa mã JavaScript lên một tầm cao mới

Bronie.png

Tác giả

Huybu

29/05/2023

Chia sẻ

typescript-logo.png

 

Chào mừng bạn đến với bài viết đầu tiên trong chuỗi học TypeScript! Trong bài này, chúng ta sẽ khám phá TypeScript từ góc nhìn của những người đã biết về JavaScript. Hãy bắt đầu hành trình của bạn để tìm hiểu về TypeScript và tận hưởng những lợi ích mà nó mang lại!

1. Giới thiệu về TypeScript

TypeScript là một ngôn ngữ lập trình tĩnh dựa trên JavaScript. Nó giúp chúng ta viết mã JavaScript hiệu quả hơn, đồng thời mang lại tính tin cậy và dễ bảo trì hơn. TypeScript được phát triển bởi Microsoft và được sử dụng rộng rãi trong các dự án lớn và phức tạp.

2. Tại sao nên sử dụng TypeScript?

Mặc dù JavaScript là một ngôn ngữ lập trình mạnh mẽ, nhưng nó không có kiểu dữ liệu tĩnh và kiểm tra lỗi tại thời điểm biên dịch. Điều này có thể dẫn đến việc xảy ra lỗi trong quá trình chạy chương trình. TypeScript giải quyết vấn đề này bằng cách bổ sung kiểu dữ liệu tĩnh và kiểm tra lỗi tại thời điểm biên dịch. Điều này giúp bạn phát hiện lỗi sớm hơn và tăng tính tin cậy của mã.

Ngoài ra, TypeScript cung cấp gợi ý thông minh, phân tích mã mạnh mẽ và IDE tích hợp tốt. Điều này giúp tăng năng suất phát triển và giảm thời gian tìm kiếm lỗi.

3. Tích hợp TypeScript vào dự án JavaScript hiện có

Nếu bạn đã có một dự án JavaScript hiện có và muốn chuyển sang TypeScript, đừng lo lắng. TypeScript có thể tích hợp vào dự án JavaScript hiện có một cách dễ dàng. Bạn có thể bắt đầu bằng cách đổi tên các tệp mã JavaScript thành .ts và bắt đầu thêm kiểu dữ liệu vào từng phần mã một. Điều này cho phép bạn tận dụng lợi ích của TypeScript từng bước mà không cần viết lại toàn bộ mã.

4. Sử dụng kiểu dữ liệu trong TypeScript

Một trong những tính năng quan trọng nhất của TypeScript là khả năng sử dụng kiểu dữ liệu tĩnh. Bạn có thể xác định kiểu dữ liệu cho biến, tham số và giá trị trả về hàm. Điều này giúp bạn kiểm tra và đảm bảo tính hợp lệ của mã nguồn.

Ví dụ:

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


let result: number = add(3, 5);

Trong ví dụ trên, chúng ta xác định kiểu dữ liệu cho biến "a" và "b" là "number", và kiểu dữ liệu của giá trị trả về là "number". TypeScript sẽ kiểm tra kiểu dữ liệu này và thông báo lỗi nếu chúng không phù hợp.

5. Type Contracts

TypeScript cũng hỗ trợ type contracts, cho phép bạn xác định các ràng buộc kiểu dữ liệu và giao diện cho đối tượng. Điều này giúp xác định các thuộc tính bắt buộc và tuân thủ các quy tắc kiểu dữ liệu cụ thể.

Ví dụ:

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


function greet(person: Person): void {
  console.log("Hello, " + person.name + "!");
}


let john = { name: "John", age: 25 };
greet(john);

Trong ví dụ trên, chúng ta định nghĩa một interface "Person" với hai thuộc tính là "name" (kiểu string) và "age" (kiểu number). Hàm "greet" nhận một tham số là một đối tượng có cấu trúc tương tự với interface "Person". Việc này đảm bảo rằng chỉ các đối tượng tuân thủ type contracts "Person" mới có thể được chuyển vào hàm "greet".

Nếu chúng ta khai báo thêm thuộc tính “gender” có giá trị là “male” vào đối tượng “join” 

let john = { name: "John", age: 25, gender: "male" };

Thì lúc này đối tượng "john" có một thuộc tính không được khai báo trong type contracts "Person" là "gender". TypeScript sẽ hiển thị một thông báo lỗi:

Object literal may only specify known properties, and 'gender' does not exist in type 'Person'.

Với TypeScript, việc kiểm tra kiểu dữ liệu tại thời điểm biên dịch giúp bạn xác định và sửa lỗi ngay từ quá trình phát triển, tăng tính tin cậy và dễ bảo trì của mã.

6. Tận dụng các tính năng nâng cao của TypeScript

TypeScript còn nhiều tính năng nâng cao khác như:

Generics: Generics cho phép bạn viết mã linh hoạt và tái sử dụng cho nhiều kiểu dữ liệu khác nhau mà không cần định nghĩa cứng rắn kiểu dữ liệu.

Module: TypeScript hỗ trợ module để quản lý mã trong các dự án lớn, giúp chia nhỏ mã thành các phần riêng biệt và sử dụng lại chúng trong các tệp khác.

Lớp và Kế thừa: TypeScript hỗ trợ lập trình hướng đối tượng đầy đủ với lớp và kế thừa, cho phép định nghĩa lớp, thuộc tính, phương thức và sử dụng kế thừa để chia sẻ mã giữa các lớp.

Và nhiều hơn nữa. 

Các tính năng này cùng với các tính năng khác trong TypeScript giúp bạn viết mã linh hoạt và hiệu quả hơn, đồng thời giảm thiểu lỗi và tăng tính bảo trì của mã.

7. Kết luận

Trên đây là một sơ lược về TypeScript cho những người đã biết về JavaScript. TypeScript cung cấp tính hợp lệ kiểu dữ liệu, gợi ý thông minh và phân tích mã mạnh mẽ, giúp bạn viết mã JavaScript hiệu quả hơn và dễ bảo trì hơn. Hy vọng bài viết này đã giúp bạn có cái nhìn tổng quan về TypeScript và khám phá được tiềm năng của nó. Hãy tiếp tục học và áp dụng TypeScript vào dự án của bạn để tận hưởng những lợi ích mà nó mang lại!


 

Chia sẻ

Liên hệ