Code Javascript một cách có tổ chức Typescript

Nếu bạn đã nào với việc code hướng đối tượng (OOP) với các ngôn ngữ như Java thì bảo đảm sẽ rất thích Typescript. Typescript là một thứ gì đó giúp cho việc code Javascript dễ hiểu hơn, hướng đối tượng hơn.

Một trong những ứng dụng quan trong của Typescript đó là áp dụng vào framework thần thánh Angular. Nhưng trong bài viết này, mình chỉ tìm tìm hiểu nào về bản thân Typescript thôi nhé.

Typescript là gì?

Hiểu đơn giản thì Typescript là một bộ “giáo trình ngữ pháp” cho Javascript giúp việc code Javascript có tổ chức hơn. Thuật ngữ chính xác gọi là typed superset hoặc language spec.

Bản thân trình duyệt web sẽ không hiểu Typescript, Typescript cần phải được dịch sang Javascript thông thường. Do đó, khi muốn code Typescript, ta cần phải cài đặt một bộ biên dịch (compiler) sang Javascript. Rất may, trong Angular đã cài đặt sẵn compiler này.

Typescript – Định nghĩa kiểu dữ liệu rõ ràng:

Định nghĩa kiểu dữ liệu một cách tường minh khi khái báo biến có thể xem là tính chất quan trọng nhất của Typescript.

Khi khai báo biến trong Javascript ta không cần phải định nghĩa kiểu dữ liệu. Tùy theo kiểu dữ liệu giá trị được gán, biến sẽ có kiểu dữ liệu tương ứng.

Ví dụ 1: Javascript tự động thay đổi kiểu biến theo kiểu dữ liệu của giá trị:

var x = '10';
console.log( typeof x); // string
x = 10;
console.log( typeof x); // number

Trong Typescript, khi khai báo biến, ta nên khai báo kiểu dữ liệu cho biến. Các kiểu dữ liệu trong Typescript sẽ giống như các kiểu dữ liệu của Javascript, bao gồm: string, number và boolean.

var s : string = 'Hello world';
var n : number = 10;
var b : boolean = true;

Ngoài ra, trong Typescript ta cũng có thể định nghĩa một biến có thể gán nhiều kiểu dữ liệu khác nhau. Khi đó, ta dùng từ khóa any:

var x : any;
x = 10;
console.log(typeof x); // string
x = 'Hello world';
console.log(typeof x); // number

Tuy nhiên, có một điểm cần lưu ý: trong Typescript, nếu một biến không được khai báo kiểu dữ liệu thì nó sẽ lấy kiểu dữ liệu của giá trị đầu tiên. Trong trường hợp này, tuy hình thức ngữ pháp giống Javascript nhưng Typescript sẽ không tự động thay đổi kiểu dữ liệu như Javascript đâu nhé (Xem lại ví dụ 1).

var x = 10;
x = 'Hello world'; // Lỗi: 'Hello World' không thể gán vào kiểu number

Ưu điểm của Typescript so với Javascript:

An toàn:

Khi đi nghĩa kiểu dữ liệu rõ ràng, ta sẽ tránh được các trường hợp tự động chuyển đổi kiểu dữ liệu. Điều này đặc biệt hữu ích khi định nghĩa một hàm:

doubleValue(value : number){
  return 2 * value;
 }
doubleValue('10'); // Lỗi kiểu dữ liệu của tham số '"10"' không thể gán vào kiểu 'number'.

Dễ đọc:

Typescript giúp các trình editor có thể hiện thị các gợi ý của các hàm. Không chỉ hiện thị mô tả của hàm, ta còn có thể định biết được hàm đó có những tham số cần thiết là gì, kiểu dữ liệu ra sao. Hiện tại mình đang sử dụng editor là Visual Studio Code, hỗ trợ rất tốt Typescript. (Vì Typescript và Visual Studio Code đề là hàng của Miscrosoft  ?).

Dễ sửa:

Đối với Javascript thông thường, khi muốn thay đổi tên hàm, tên biến (do viết sai chính tả chẳng hạn ?), ta phải dùng chức năng “Find & Replace”. Cách này chỉ là tìm kiếm kí tự thôi, do đó, đôi khi có những biến hay hàm có chứa đoạn kí tự giống với từ khóa. Chưa kể trường hợp những hàm được dùng ở nhiều file khác nhau, khi sửa thì phải lục tìm ở tất cả các file. Sửa tên thôi mà phải căng não dữ lắm luôn á. ?

Dùng Find & Replace không phải là cách hiệu quả để đổi tên biến, tên hàm

Với Typescript, ta có thể sử dụng chức năng refactor của editor tên biến hay tên hàm:

Chức năng refactor của Visual Studio Code

Kết:

Typescript là một thứ tuyệt với để viết Javascript dễ dàng hơn: Hướng đối tượng, dễ code, dễ đọc và dễ sửa. Điều này giúp cho ứng dụng Javascript dễ dàng mở rộng sau nay. Do Typescript được thiết kế để thỏa mãn tính hướng đối tượng nên ta hoàn toàn có thể kế thừa, trừu tượng, đa hình và đóng gói (4 đặc điểm của OOP học thời đại học ?).

Typescript sẽ rất phù hợp với những ai đã làm qua backend với Java hoặc C# và muốn vấn thân vào con đường frontend.

Đặc biệt là đối với C# , Typescript giống đến 90% đặc điểm của C#. Một ngày không xa mình sẽ giới thiệu về một giải pháp full stack với kết hợp bá đạo từ công cụ đến ngôn ngữ lập trình bao gồm: .Net Core, Angular, Azure, Visual Studio, Visual Studio Code (toàn hàng của Microsoft nhỉ ?).

Categories: