Hiện nay, có nhiều dự án đang chuyển qua viết bằng Angular2.  Bài viết này mình không nói về Angular2, nhưng sẽ giới thiệu đến các bạn một ngôn ngữ mới mà Angular2 sử dụng. Đó là Typescript. 

Bài viết gồm các mục:

  1. Lịch sử Javascript
  2. ES6 là gì?
  3. Typescript là gì?
  4. Tính năng mới
  5. Kết luận

 1  LỊCH SỬ JAVASCRIPT

Lướt sơ qua về các cột mốc lịch sử Javascript 1 tẹo nhé.

  • 1995: Ngôn ngữ Javascript đầu tiên ra đời, được tích hợp trên trình duyệt Netscape.
  • 1996: Trình duyệt IE 3.0 cũng trang bị cho mình 1 bộ script khác có tên là JScript. Lúc này nhiều trình duyệt khác cũng đang rục rịch ra đời. Từ đó, để một website có thể chạy ok hết trên các trình duyệt cũng trở nên khó khăn, vì mỗi trình duyệt là sử dụng bộ biên dịch script khác nhau. Nên ECMA Inernational (hiệp hội các nhà sản xuất máy tính Châu Âu) ngồi lại với nhau và cho ra đời ECMAScript để làm tiêu của cho Javascript.
  • 2006: Jquery ra đời bởi John Resig.
  • 2009: Ryan Dahi cho ra đời Nodejs.
  • 2013: Typescript lần đầu tiên xuất hiện.
  • 2015: ES6 ra đời
  • 2016: Angular2 sử dụng Typescript được tung ra thị trường.

 2  ES6 LÀ GÌ?

ES6 là cách gọi ngắn gọn của ngôn ngữ ECMAScript 2015. ES6 là phần mở rộng của Javascript. Thật ra nó cũng là Javascript cùng chung một cha (cũng được tạo bởi hiện hội Ecma International), nhưng được mở rộng thêm với những cú pháp hoàn thiện hơn, ngắn gọn hơn, dễ lập tình hơn, hỗ trợ nhiều từ khóa, thậm chí kiểu dữ liệu cũng được cải tiến, nhằm hỗ trợ cho các ứng dụng lớn với quy mô thư viện lớn. Hiện tại nó tập hợp các kỹ thuật cao của Javascript và đang là chuẩn mới nhất của chuẩn ECMAScript.

ES7 cũng đang rục rịch sắp ra mắt, và sẽ có những tính năng nổi trội hơn như Sync.

 3  TYPESCRIPT LÀ GÌ?

Trước tiên, Typescript là 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 cho Javascript và hỗ trợ các dự án lớn xây dựng dễ dàng hơn. Thủ lãnh của dự án Typescript là ông Anders. Ông cũng từng tham gia các dự án tên tuổi như Pascal, Delphi, C#. Với bề dầy kinh nghiệm của ông, chúng ta cũng cảm nhận được độ mạnh của dự án Typescript nhỉ.

Trước Typescript cũng có vài đàn anh như Coffescript hay Dart của Google. Nhưng những ngôn ngữ này không được ưa chuộng lâu dài bởi cú pháp của nó quá khác với Javascript, nên việc chuyển code từ Javascript sang Coffescript thật sự là một cực hình với các dev. Thấy được vết xe đổ đó, Typescript đã khôn ngoan hơn khi dựa vào Javascript làm nên tảng. Bạn có thể copy code Javascript vào trong file Typescript rồi chạy mà không cần chỉnh sửa gì thêm. Bởi vì nó là phần mở rộng của ES6, mà ES6 lại mở rộng từ Javascript.

Hiện tại, do chưa có nhiều trình duyệt hỗ sợ đủ tính năng của ES6, nên để đảm bảo code của bạn có thể chạy được trên các trình duyệt, thì nên biên dịch về Javascript chuẩn.

Làm sao để có thể biên dịch ES6 về Javascript?

Vấn đề này bạn không cần phải quá lo lắng, vì các IDE sẽ làm giúp bạn.

Nếu bạn viết script bằng ES6, thì bạn cần bộ biên dịch Babel để biên dịch về Javascript.

Nếu bạn viết script bằng Typescript, thì có rất nhiều IDE đã hỗ trợ sẵn cho bạn như Visual Studio, Sublime Text, Eclipse, Vim, v.v...

Mã Javascript được sinh ra vừa nhỏ gọn, vừa đúng chuẩn, nên có thể yên tâm chạy mà không sợ bị lỗi.

 4  TÍNH NĂNG MỚI

Như đã giới thiệu trên, thì ES6 có khá nhiều tính năng mới. Lưu ý đây chỉ mới là bài giới thiệu, nên mình chỉ liệt kê tính năng mà ES6 hỗ trợ và giải thích 1 tính năng đầu tiên thôi nhé. Loạt bài sau mình sẽ trình bày cụ thể hơn.

Dưới đây là danh sách các keywork. Keywork tô màu xanh là những keywork mới của ES6.

break  default  for  new  typeof
 case  delete function  return  var 
class  do  if  super  void 
catch  else  import  switch  while 
const  export  in  this  with 
continue  extends  instanceof  throw  yield 
debugger  finally  let  try   

Tiếp theo là tính năng mới của ES6

Arrow Function iterators + for..of Symbols
Classes Generators Subclassable built-ins
Enhanced object literals Unicode Promises
Template strings Modules math + number + string + array + object APIs
Destructuring Module loaders Binary and Octal literals
default + rest + spread Map + set + weakmap + weakset Reflect API
let + const Proxies Tail calls

Từ khóa Let

Let là từ khóa để khai báo một biến. Nó cũng giống như var, nhưng khác với var ở tầm vực sử dụng và giá trị của biến được khai báo bằng let sẽ tường minh hơn var. Xem thử demo sau:

let var 
function letTest() {
  let x = 1;
  if (true) {
    let x = 2;  // different variable
    console.log(x);  // 2
  }
  console.log(x);  // 1
}
 
function varTest() {
  var x = 1;
  if (true) {
    var x = 2;  // same variable!
    console.log(x);  // 2
  }
  console.log(x);  // 2
}

Arrow

Arrow là cách viết ngắn để khai báo một hàm bằng cú pháp => thay vì dùng function. 

Javascript 
var helloWorld = function (message) {…}
Từ khóa function là cách khao báo một hàm quen thuộc trong javascript.
ES6 
let helloWorld = (message)  => {…}
Ở ES6, thay thế từ khóa function bằng => , và param message đặt trước =>
Typescript 
let helloWorld = (message: string)  => {…}
Ở Typescript, thì yêu cầu cao hơn một tẹo, là biến message của bạn phải được khai báo kèm với kiểu dữ liệu. Việc khai báo kiểu dữ liệu giống thế này cũng khá quen thuộc khi ở các ngôn ngữ khác như C#, Java, v.v...

 5  KẾT LUẬN

Hiện nay, không chỉ Angular2 sử dụng Typescript, mà các framework JS khác cũng đang nâng cấp từ JS sang Typescript, như framework Dojo Toolkit, Ember, v.v...  Với những kĩ thuật mới và lập trình hướng đối tượng, nên Typescript cũng giúp chúng ta xây dựng dự án lớn dễ dàng hơn.  

Bản chất của Typescript là Javascript, bạn vẫn có thể viết js trong file typescript, nhưng để viết js nhẹ nhàng hơn, nên khai thác các tính năng mà Typescript cung cấp.

Tham khảo

https://www.typescriptlang.org/