Tìm hiểu về TypeScript

4492

TypeScript Là gì?

TypeScript là một phiên bản cao hơn của JavaScript, được thiết kế để xây dựng các ứng dụng lớn và phức tạp.  Nó kế thừa nhiều khái niệm từ Java và C#, TypeScript là ngôn ngữ tĩnh (Static typed) có nghĩa là nó nghiêm ngặt và có trật tự trái ngược với free-type. Nó còn được bổ sung thêm lớp hướng đối tượng mà điều này không có ở Javascript.

Tại sao gọi là bản cao cấp hơn Javascript? 

Với TypeScript, ta có thể bê nguyên xi code JavaScript vào trong cùng một file và chạy cùng nhau bình thường, bởi vì TypeScript duy trì cú pháp của JavaScript và mở rộng nó bằng một loạt tính năng mới. Nhờ đó mà hiệu năng làm việc được tăng lên đáng kể.

TypeScript là một dự án kéo dài hơn 3 năm của Microsoft nhằm tạo ra một ngôn ngữ để mở rộng JavaScript. Giúp nó trở nên phù hợp hơn với những ứng dụng lớn, nhưng vẫn quen thuộc với cấu trúc ngôn ngữ JS hiện tại để mọi người có thể học nhanh hơn. Trưởng nhóm dự án này là Anders Hejlsberg, cha đẻ của C#, Turbo Pascal và Delphi.

  3 Tips hữu dụng TypeScript cho Angular 4

Lợi ích của việc sử dụng TypeScript

Ngay lập tức bạn sẽ thắc mắc rằng TypeScript là gì mà mạnh dữ vậy sao? Bạn đã phải trầy trật học React/Redux. Bỏ công sức chỉ để hiểu sơ về Vue.js cũng như may mắn không bị bế tắc với Angular.

Việc phải học thêm một thứ ngôn ngữ mới mà ta chả biết gì về tương lai của nó thật sự là một sự phiền toái đến khủng khiếp. Thế nên bạn vào xem cái list tính năng của nó và nhận ra là có cả một cộng đồng các developer khá là to đứng đằng sau.

Điều đó khiến bạn tự hỏi rằng liệu nó thật sự có ích đến vậy à? Và bạn cũng hẳn biết một developer khôn ngoan luôn là người đi tắt đón đầu. Đừng lo bởi tôi cũng như bạn, tin rằng TypeScript cũng khá có tiềm năng và đáng để chúng ta thử qua.

Ưu điểm của Typescript:

  • Dễ dàng hơn trong phát triển các dự án lớn, được hỗ trợ bởi các Javascript Framework lớn.
  • Hầu hết các cú pháp hướng đối tượng đều được hỗ trợ bởi Typescript như kế thừa, đóng gói, constructor, abstract, interface, implement, override…v.v
  • Cách tổ chức code rõ ràng hơn, hỗ trợ cơ chế giúp kiến trúc hệ thống code hướng module, hỗ trợ namespace, giúp xây dựng các hệ thống lớn nơi mà nhiều lập trình viên có thể làm việc cùng nhau một cách dễ dàng hơn.
  • Hỗ trợ các tính năng mới nhất của Javascript. TypeScript luôn đảm bảo việc sử dụng đầy đủ các kỹ thuật mới nhất của Javascript, ví dụ như version hiện tại là ECMAScript 2015 (ES6).
  • Một lợi thế của Typescript nữa là mã nguồn mở vì vậy nó miễn phí và có cộng đồng hỗ trợ rất lớn.
  • Với static typing, code viết bằng TypeScript dễ dự đoán hơn, và dễ debug hơn.

Typescript đang được sử dụng ở các Framework phổ biến như Angular, Nodejs, Ionic…

Kiểu động và kiểu tĩnh

Trong JavaScript, ta làm việc với kiểu động (dynamic type). Còn với TypeScript, ta làm việc với kiểu tĩnh (static type). Hai trường phái có điểm mạnh hay yếu đều tùy thuộc vào mục đích của người dùng.

Tuy nhiên với kiểu tĩnh nó có những điểm mạnh riêng như giúp giảm thiểu thời gian xử lí và cải thiện quá trình coding một cách hiệu quả hơn so với kiểu động.

Khi nhắc đến Type, thì tức luôn nói về biến. Khái niệm kiểu động và kiểu tĩnh nghe có vẻ phức tạp nhưng thực chất nó rất đơn giản. Biến có kiểu động là biến có thể chứa bất kì kiểu giá trị nào mà không bị giới hạn bởi một kiểu nhất định. 

Ví dụ:

Ta thấy biến a chứa giá trị số 1, nhưng sau đó nó được gán giá trị chuỗi TopDev. Nếu chạy code này trong Typescript  thì ngay lập tức bị lỗi Cannot convert 'string' to 'number'. Vì Typescript theo kiểu tĩnh nên biến khi đã được xác định kiểu thì chỉ có thể chứa các giá trị có kiểu đó.

Khai báo biến theo Typescript:

Nếu khai báo thế này, ta đã xác định rõ ràng kiểu của name là string và sau này, ta không thể gán một giá trị số.

Với những người quen dùng ngôn ngữ lập trình kiểu động và khi sang sử dụng kiểu tĩnh thì  họ cảm thấy bị gò bó và hạn chế.

Tuy nhiên, sự khắt khe của kiểu tĩnh có cái lợi của nó. Khi một biến được khai báo kiểu rõ ràng, ta luôn biết được kiểu của giá trị mà nó chứa mà không cần phải kiểm tra.

Khi mà một biến có thể chứa nhiều kiểu giá trị khác nhau, tuy mang lại sự linh hoạt nhưng nó cũng khiến cho việc bảo trì trở nên phức tạp hơn, đặc biệt là khi debug để tìm lỗi có liên quan tới kiểu.

Một điểm khác biệt nữa trong TypeScript đó là lỗi về kiểu sẽ được phát hiện trong quá trình viết code hoặc khi biên dịch (compile-time) sang JavaScript nhờ sự trợ giúp của Visual Studio Code. Còn trong JavaScript, ta phải đợi tới khi chạy (run-time) thì mới biết, và cũng có khi chẳng bao giờ biết.

Các Text Editor hỗ trợ TypeScript

Hiện nay, rất nhiều text editor và IDE hỗ trợ sẵn hoặc thông qua các plugin để hỗ trợ cú pháp của TypeScript, auto-complete suggestions, bắt lỗi và thậm chí tích hợp sẵn trình biên dịch.

  • Visual Studio Code – Một trình soạn thảo mã nguồn mở của Microsoft. Hỗ trợ sẵn TypeScipt.
  • Plugin cho Sublime Text
  • Phiên bản mới nhất của WebStorm cũng hỗ trợ TypeScript
  • Và nhiều trình soạn thảo khác như Vim, Atom, Emacs …

Tips: Khi dùng Visual Studio Code, ta có thể tách khung soạn thảo code ra làm hai phần. Một phần dùng để viết code TypeScript, phần còn lại sẽ tự động hiển thị code JavaScript được biên dịch. Với tính năng này, ta vừa viết code TypeScript vừa có thể xem code JavaScript được sinh ra khi nhấn Save. 

Cài đặt TypeScript

Cài TypeScript thông qua npm. Sử dụng lệnh dưới đây có thể cài đặt TypeScript package toàn cục, giúp cho trình biên dịch TypeScript có thể sử dụng trong mọi dự án của chúng ta:

Kiểm tra cài đặt bằng lệnh:

Lời kết

TypeScript vẫn đang liên tục được phát triển, nếu bạn đọc được bài viết này thì chắc hẳn bạn là một dev JS (Nếu không phải tôi khuyên bạn nên tiếp cận JS ES6 trước khi học Typesript). Vì vậy trong khuôn khổ bài viết tôi sẽ không chỉ rõ cách sử dụng cơ bản. Bạn nên tham khảo thêm tại website của TypeScript để cập nhật tính năng mới.