TypeScript phần 1 : Tại sao nên sử dụng TypeScript?

Giới thiệu về TypeScript

JavaScript ban đầu được giới thiệu như là một ngôn ngữ lập trình hướng client, sau một thời gian sử dụng thì các nhà phát triển nhận ra rằng JavaScript cũng có thể được sử dụng hướng server. Tuy nhiên, khi dự án càng mở rộng thì mã nguồn sử dụng JavaScript càng phức tạp và khó bảo trì vì JavaScript còn thiếu khá nhiều tính năng cần thiết. Và TypeScript sinh ra để thu hẹp các thiếu sót này.

Những tính năng mà TypeScript hỗ trợ còn JavaScript thì không

Kiểu cố định cho biến số hoặc kết quả trả về từ function (static typing)

Tính năng này giúp hạn chế các lỗi về type errors vì hầu hết sẽ được phát hiện trong quá trình biên dịch. Nhờ đó giúp các thành viên trong cùng dự án hiểu rõ hơn khi sử dụng một biến số hoặc một function từ thành viên khác vì đã rõ kiểu dữ liệu truyền vào là gì, kiểu dữ liệu trả ra là như thế nào.

 
const ColorClosing: string = "red"
const ColorOpening: string = "green"
 
var isClosing: boolean = true
 
function btnOpen(): string {
   let color: string = (isClosing) ? ColorOpening : ColorClosing
   isClosing = !isClosing
   return color
}
 
console.log(btnOpen()); // Output is green
console.log(btnOpen()); // Output is red

Interface

Rất hữu ích để tạo ra quy tắc giao tiếp giữa các thành phần phức tạp, điều này giảm thiểu rất nhiều thời gian đọc hiểu của lập trình viên khi sử dụng chúng, thay vì phải đọc tất cả để hiểu thì chỉ cần đọc interface là có thể đủ. 

interface Btn {
   color: string,
   click: Function
}
 
let btn: Btn = {
   color: "red",
   click: function () {
       // code here
   },
}
 
console.log(btn) // Output is { color: 'red', click: [Function: click] }

Hướng đối tượng (object oriented)

Khi bạn muốn mang cả thế giới vào các class thì TypeScript sẽ giúp bạn. Và mình sẽ không phân tích tính ưu điểm và khuyết điểm của OOP so với FP ở đây.

interface Btn {
   color: string,
   click: Function
}
 
class BtnCls implements Btn {
   color: string = "red"
   click(): void {
       console.log("MEVN")
   }
}
 
let btn: Btn = new BtnCls()
console.log(btn) // Output is BtnCls { color: 'red' }
btn.click() // Output is MEVN

Nhận biết lỗi trong quá trình biên dịch

Điều này sẽ giúp giảm thiểu lỗi trong quá trình thực thi của phần mềm và giảm thời gian tìm và sửa lỗi.

let str: string
str = 1
// error: Type 'number' is not assignable to type 'string'.

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

• TypeScript = JavaScript + các tính năng mở rộng → sử dụng TypeScript bạn sẽ có nhiều lựa chọn hơn trong quá trình phát triển.
• Tận dụng tốt các tính năng như OOP, Interface, Static typing… sẽ giúp chương trình giảm thiểu sự phức tạp.

Bạn có thể tìm hiểu rõ hơn về TypeScript trong những bài viết dưới đây :

• TypeScript phần 2 : Cách cài đặt và chạy những dòng lệnh đơn giản