12/08/2018, 15:07

Hiểu về ES5, ES2015 và TypeScript

Đã bao giờ các bạn nghe đến các khái niệm ES, ES2015 và TypeScript chưa? Chúng đều liên quan đến một ngôn ngữ mà chúng ta vẫn thường sử dụng để lập trình ra các web động là Javascript. Vậy chúng có gì khác nhau, và chúng ta nên học và sử dụng cái nào? Trước khi đề cập tới sự khác nhau của 3 khái ...

Đã bao giờ các bạn nghe đến các khái niệm ES, ES2015 và TypeScript chưa? Chúng đều liên quan đến một ngôn ngữ mà chúng ta vẫn thường sử dụng để lập trình ra các web động là Javascript. Vậy chúng có gì khác nhau, và chúng ta nên học và sử dụng cái nào? Trước khi đề cập tới sự khác nhau của 3 khái niệm trên chúng ta sẽ đi vào tìm hiểu như thế nào là ES5, ES2015 (hay còn biết tới là ES6) và TypeScript.

ES (ECMAScript) là một ngôn ngữ được chuẩn hóa bởi tổ chức ECMA và được giám sát bởi hội đồng TC39. Và Javascript là cài đặt cụ thể của chuẩn ECMAScript này và trở thành một ngôn ngữ thông dụng trong lập trình web hiện này. ES trải qua rất nhiều phiên bản khác nhau và nó dần được cải tiến để mạnh mẽ và phù hợp hơn. Javascript là cài đặt cụ thể của ES, tuy nhiên nó không gắn liền với một phiên bản ES cụ thể mà có thể bao gồm các phiên bản ES từ cũ đến phiên bản hiện tại. ES5 là phiên bản thứ năm cửa ECMAScript, nó được giới thiệu vào năm 2009. Nó được chúng ta sử dụng nhiều nhất trong nhiều năm để làm chuẩn cài đặt ra Javascript được hỗ trợ hầu hết bởi tất cả các trình duyệt hiện tại. ES5 sử dụng lập trình hàm (Functional Programming) để là tiểu chuẩn cho Javascript, do đó hầu hết hiện này chúng ta vẫn sử dụng Javascript theo cách lập trình hàm là chủ yếu, trong khi các ngôn ngữ khác chạy theo xu hướng OOP. ES5 rất mềm dẻo và dễ dàng để lập trình với các đặc trưng như Scoping, closures, IIFE (immediately-invoked function expression), loosely typed (đặc trưng của Javascript). Tuy nhiên với ES5 chúng ta cũng gặp không ít khó khăn khi lập trình với ES5. Đó là trong quá trình lập trình rất khó để kiểm tra các vấn đề liên quan tới ES5 (hay còn biết tới việc debug), rất khó để debug đối với Javascript, và các công cụ hỗ trợ cho việc này cũng rất ít và khá là phức tạp để sử dụng. Nói tóm lại có thể xem ES5 chính là Javascript mà chúng ta sử dụng hiện nay để lập trình các web động.

ES6 là phiên bản thứ sáu của ECMAScript, nó được ra mặt vào 2015. ES2015 được xem là một bước nhảy lớn của ES5 khi nó được thêm các khái niệm mới, chức năng mới vào cho Javascript. Các tính năng mới giải quyết các vấn đề còn tồn tại và là thách thức của ES5. Các tính năng này là tùy chọn vì vậy chúng ta vẫn có thể sử dụng ES5 để lập trình trong ES2015. Dưới đây là là danh sách cụ thể các tính năng của ES2015

  • arrows
  • classes
  • enhanced object literals
  • template strings
  • destructuring
  • default + rest + spread
  • let + const
  • iterators + for..of
  • generators
  • unicode
  • modules
  • module loaders
  • map + set + weakmap + weakset
  • proxies
  • symbols
  • subclassable built-ins
  • promises
  • math + number + string + array + object APIs
  • binary and octal literals
  • reflect api
  • tail calls

Trong bài viết này mình sẽ không đi cụ thể vào ES2015 mà chỉ đưa ra các khái niệm để hiểu hơn về nó. Với một lượng lớn các tính năng mới ta có thể sử dụng để viết code bằng javascript. Các trình duyệt hiện đại ngày nay cũng đang chạy đua để hỗ trợ các tính năng trên của ES2015. Do là chuẩn mới nên còn một số trình duyệt chưa hỗ trợ ES2015 tuy nhiên ta có thể viết code bằng ES2015 rồi sử dụng các tool để dịch code xuống các phiên bản Javascript cũ hơn. Một tool cụ thể cho việc này là Babe. Như vậy ES2015 cũng chính là Javascript nhưng nó được tiến hóa hơn khi đưa thêm một số khái niệm và tính năng mới vào so với Javascript của ES5.

TypeScript được coi là tập cha của Javascript, sau khi được biện nó sẽ biên dịch ra javascript thuần. Có thể coi TypeScript bao gồm ES2015 cùng với việc thêm vào các khái niệm mới là:

  • Types (Các kiểu dữ liệu)
  • Interface (Giao diện)

Một trong những vấn đề xảy ra khi làm việc đối với Javascript đó là rất khó để xác định lỗi trong quá trình code (có thể gọi là debug). Và TypeScript ra đời để góp phần vào giải quyết vấn đề này. TypeScript không giúp chúng ta code đơn giản đi mà nó giúp ta code an toàn hơn giảm tối thiểu lỗi và phát hiện sớm các lỗi tiềm ẩn. Ngoài ra nó giúp chúng ta code hiểu quả hơn bằng việc sử dụng lợi thế của các tool, editor để xác định các lỗi, tự động sinh và gán các biến, hàm, thuộc tính ...

Như vậy có thể nói TypeScript về mặt bản chất nó cũng là JavaScript tuy nhiên, nó đưa vào một số khái niệm, nguyên tắc giúp ta là việc với JavaScript một cách an toàn, nhanh chóng và hiểu quả hơn

Dưới đây là bảng so sánh, và kết luận về ES5, ES2015 và TypeScript

Tiêu Chí ES5 ES2015 TypeScript
Bản chất JavaScript JavaScript JavaScript
Sử dụng Viết trực tiếp và chạy không cần biên dịch Cần biên dịch để chạy Cần biên dịch để chạy
Tính năng Sử dụng lập trình hàm để thực hiện viết code Tương tự ES5 tuy nhiên đưa vào một số khái niệm mới Cũng có thể sử dụng lập trình hàm như ES5 và các tính năng của ES2015, tuy nhiên còn sử dụng thêm các types và interface

Tóm lại công nghệ ngày càng thay đổi nhanh và để có thể theo kịp chúng ta cần tận dụng lợi thế của các công cụ giúp ta tiếp thu và ứng dụng công nghệ đó vào quá trình phát triển phần mềm. Dó đó việc Chúng ta chọn ES2015 và TypeScript để lập trình javascript sẽ giúp tăng hiệu quả trong việc code cũng như phát hiện và sửa các lỗi với ngôn ngữ này hơn.

  1. https://johnpapa.net/es5-es2015-typescript/
0