Tông quan về javascript, typescript và ES6

Javascript là gì?

JavaScript là ngôn ngữ lập trình phổ biến dùng để tạo ra các trang web tương tác. Được tích hợp và nhúng vào HTML giúp website trở nên sống động hơn. JavaScript đóng vai trò như một phần của trang web, thực thi cho phép Client-Side Script từ phía người dùng cũng như phía máy chủ (Nodejs) tạo ra các trang web động.

JavaScript Framework là gì?

JavaScript Framework là thư viện được xây dựng dựa vào ngôn ngữ lập trình JavaScript. Từ đó, mỗi framework được tạo ra để phục cho từng lĩnh vực khác nhau. Bạn có thể tìm hiểu kỹ hơn về framework là gì, sẽ giúp bạn có thêm nhiều thông tin rõ ràng hơn. Hiện nay, có rất nhiều JavaScript Framework thông dụng như:

Reactjs: Thư viện dùng cho ứng dụng mobile.
Node.js: Dùng để xây dựng và phát triển ứng dụng realtime từ phía máy chủ.
Angular: Dùng để xây dựng ứng dụng Single Page….

Cách thức hoạt động của JavaScript trên trang web

JavaScript thường sẽ được nhúng trực tiếp vào một trang web hoặc được tham chiếu qua file .js riêng. JavaScript là ngôn ngữ từ phía client nên script sẽ được tải về máy client khi truy cập và được xử lý tại đó. Thay vì tải về máy server và sau khi xử lý xong mới phản hồi kết quả đến client. Với hiện nay, thì các trình duyệt Internet cũng có thể hỗ trợ bạn tắt/mở JavaScript. Lúc đó bạn có thể thấy được nếu một trang web không có JavaScript thì sẽ như thế nào? Từ đó bạn có thể hình dung dễ dàng hơn về cách JavaScript hoạt động.

Ưu điểm và nhược điểm khi sử dụng JavaScript

Ưu điểm của JavaScript

JavaScript có các ưu điểm được xem là vượt trội so với các đối thủ khác trong các trường hợp thực tế như:

Chương trình JavaScript rất dễ học.
Lỗi JavaScript dễ phát hiện và sẽ giúp bạn sửa lỗi nhanh hơn.
Các trình duyệt web có thể dịch nó bằng HTML mà không cần một compiler.
JS hoạt động trên rất nhiều nền tảng và trình duyệt khác nhau.
Được đánh giá là ngôn ngữ lập trình nhẹ, nhanh so với các ngôn ngữ khác.
JS có thể được gắn trên một số element hoặc các events của trang web.
Khi website có sử dụng JS thì sẽ giúp cho trang web đó tương tác và tăng trải nghiệm người dùng khi truy cập.
Bạn có thể tận dụng JavaScript để kiểm tra các input thay vì kiểm tra thủ công thông qua việc truy xuất database.
Giao diện phong phú gồm các thành phần Drag and Drop, Slider để cung cấp một Rich Interface (Giao diện giàu tính năng).

Nhược điểm của JavaScript

Mặt khác, ngoài những ưu điểm nhưng mọi ngôn ngữ lập trình khác đều có những nhược điểm riêng của nó như:

Dễ bị khai thác từ những hacker và scammer.
Có thể được dụng để thực thi mã độc trên máy tính của người dùng.
JS code snippet lớn.
Các thiết bị khác nhau có thể thực hiện JS khác nhau dẫn đến không đồng nhất.
Vì tính bảo mật nên client-side JavaScript không cho phép đọc và ghi các file.
JS không được hỗ trợ khi sử dụng trong kết nối mạng.
JavaScript không có khả năng đa luồng hoặc đa xử lý.

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.

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ụ:

var a = 1;
a = "AeDev";

Ta thấy biến a chứa giá trị số 1, nhưng sau đó nó được gán giá trị chuỗi AeDev. 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:

var name: string = "AeDev";

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:

npm install -g typescript

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

tsc -v

ES6

ECMAScript 2015 hoặc ES2015 là một bản cập nhật quan trọng cho ngôn ngữ lập trình JavaScript. Đây là bản cập nhật lớn đầu tiên cho ngôn ngữ kể từ ES5 được chuẩn hóa vào năm 2009. Do đó, ES2015 thường được gọi là ES6

Cú pháp ES6 mới

let – khai báo các biến phạm vi khối bằng cách sử dụng từ khóa: let.
let vs. var – hiểu sự khác biệt giữa let và var.
const – xác định hằng số bằng cách sử dụng từ khóa const.
Default function parameters – ltìm hiểu cách đặt giá trị mặc định cho các tham số của một hàm.
Rest parameter – giới thiệu cho bạn tham số rest và cách sử dụng chúng một cách hiệu quả.
Spread operator – học cách sử dụng spread operator một cách hiệu quả.
Object literal syntax extensions – cung cấp một cách mới để xác định nghĩa đen của đối tượng.
for…of – tìm hiểu cách sử dụng vòng lặp để lặp lại các phần tử của một đối tượng có thể lặp lại for...of .
Octal and binary literals – cung cấp hỗ trợ cho các nghĩa đen nhị phân và thay đổi cách biểu diễn các nghĩa đen bát phân.
Template literals – học cách thay thế các biến trong một chuỗi.

Destructuring

Array Destructuring – chỉ cho bạn cách gán các phần tử của một mảng cho các biến.
Object Destructuring – tìm hiểu cách gán các thuộc tính của một đối tượng cho các biến.
Class – giới thiệu cho các bạn về cú pháp class ES6 và cách khai báo một class.
Getters và Setters – xác định getters và setters cho một lớp bằng cách sử dụng các từ khóa get và set.
Biểu thức lớp học – học một cách khác để xác định một lớp mới bằng cách sử dụng biểu thức lớp.
Các phương thức tĩnh – hướng dẫn bạn cách định nghĩa các phương thức được liên kết với một lớp, chứ không phải các phiên bản của lớp đó.
Thuộc tính tĩnh – chỉ cho bạn cách xác định các thuộc tính tĩnh được chia sẻ bởi tất cả các phiên bản của một lớp.
Thuộc tính tính toán – giải thích thuộc tính tính toán và ứng dụng thực tế của nó.
Kế thừa – chỉ cho bạn cách mở rộng một lớp bằng cách sử dụng các từ khóa và từ khóa.extendssuper
new.target – giới thiệu cho bạn siêu hình.new.target

Arrow Functions

Arrow functions – giới thiệu arrow functions ( =>)
Arrow functions: when you should not use – ltìm hiểu khi nào không sử dụng arrow functions.

Symbol

Symbol – giới thiệu cho bạn một loại nguyên thủy mới được gọi là trong ES6symbol

Iterators & Generators

Iterators – giới thiệu cho bạn các giao thức lặp lại và lặp lại.
Generators – phát triển các chức năng có thể tạm dừng giữa chừng và sau đó tiếp tục từ nơi chúng tạm dừng.
yield – đi sâu vào cách sử dụng từ khóa trong trình tạo.yield

Promises

Promises –tìm hiểu về Promisess Javascript, chúng là gì và cách sử dụng chúng một cách hiệu quả.
Promise chaining – chỉ cho bạn cách thực hiện nhiều hoạt động không đồng bộ theo trình tự.
Promise composition: Promise.all() & Promise.race() – learn how to compose a new promise out of several promises.
Promise error handling – hướng dẫn bạn cách xử lý lỗi trong promises.

ES6 collections

Map –giới thiệu cho bạn loại chứa một bộ sưu tập các cặp khóa-giá trị.Map
Set – tìm hiểu cách sử dụng loại chứa một bộ sưu tập các giá trị duy nhấtSet

Array extensions

Array.of() – cải thiện việc tạo mảng.
Array.from() – tạo mảng từ các đối tượng giống như mảng hoặc có thể lặp lại.
Array find() – tìm một phần tử trong một mảng
Array findIndex() – tìm chỉ mục của một phần tử trong một mảng.

Object extensions

Object.assign() – sao chép một đối tượng hoặc hợp nhất các đối tượng.
Object.is() – kiểm tra xem hai giá trị có phải là cùng một giá trị hay không.

String extensions

String startsWith() – kiểm tra xem một chuỗi có bắt đầu bằng một chuỗi khác không.
String endsWith() – xác định xem một chuỗi có kết thúc bằng một chuỗi khác hay không.
String includes() – kiểm tra xem một chuỗi có chứa chuỗi khác không.

Proxy & Reflection

Proxy – tìm hiểu cách sử dụng đối tượng proxy bao bọc một đối tượng khác (mục tiêu) và chặn các hoạt động cơ bản của đối tượng mục tiêu.
Reflection – hướng dẫn bạn cách sử dụng ES6 Reflection API để thao tác với các biến, thuộc tính và phương thức của các đối tượng trong thời gian chạy.

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.