Giới thiệu Typescript - Sự khác nhau giữa Typescript và Javascript
Bài đăng này đã không được cập nhật trong 5 năm
Typescript là gì?
Typescript là một dự án mã nguồn mở được Microsoft phát triển, được xem là một phiên bản nâng cao của Javascript.
TypeScript là một ngôn ngữ giúp cung cấp quy mô lớn hơn so với JavaScript.
Vì sao lại được xem là phiên bản nâng cao của Javascript? Vì nó được bổ sung những tùy chọn kiểu tĩnh và các lớp hướng đối tượng, nó bao hàm luôn ES6(ECMAScript 6 2015) - phiên bản mới nhất của Javascript.
TypeScript thêm các namespace, class và module tùy chọn vào JavaScript. TypeScript hỗ trợ các công cụ cho các ứng dụng JavaScript quy mô lớn cho bất kỳ trình duyệt nào, cho bất kỳ máy chủ nào, trên bất kỳ hệ điều hành nào.
Với những lập trình viên đã quen với Javascript thì chắc hẳn các bạn cũng hiểu được những khó khăn khi lập trình với nó.
- Tính mở trong việc sử dụng biến gây khó khăn trong việc kiểm soát sự thay đổi, cập nhật
- Các ứng dụng phức tạp đòi hỏi sử dụng rất nhiều file source, tách thành nhiều thư mục riêng thì việc đảm bảo tính thống nhất sẽ mất rất nhiều công sức vì phải thao tác bằng tay khá nhiều.
- Về cơ bản thì Javascript có hõ trợ OOP nhưng khi áp dụng thì lại rất khó khăn bởi cách triển khai code không hề đơn giản so với những ngôn ngữ bậc cao khác như Java, C#, Ruby ...
Vậy ưu điểm của Typescript là gì và tại sao chúng ta lại sử dụng nó? Ư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ỗ trợ OOP mạnh: 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 bởi được hỗ trợ các kỹ thuật mới nhất và hỗ trợ lập trình hướng đối tượng: 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 dev 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.
- 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.
Typescript đang được sử dụng ở các Framework Front-end phổ biến như Angular 2, Ionic... cũng như Nền tảng cho back-end như Node-js bởi những ưu điểm của mình.
Cài đặt
Chúng ta không thể chạy trực tiếp Typescript ngay trong trình duyệt một cách đơn giản như Javascript, Typescript được biên dịch qua Javascript bởi trình biên dịch thông qua npm.
Để có thể làm việc với Typescript thì bạn phải cài đặt node.js & npm, bạn có thể tìm các hướng dẫn cài đặt ở đây https://docs.npmjs.com/getting-started/installing-node
Cài Typescript để biên dịch Typescript sang Javascript:
npm install -g typescript
Kiểm tra cài đặt bằng lệnh:
tsc -v
Version 2.6.2
Thực hành Typescript:
Sau khi cài đặt thành công hãy thực hành một vài dòng code để tìm hiểu Typescript nào.
File example.ts :
class Vehicle {
name: string;
brand: string;
constructor (name: string, brand: string) {
this.name = name;
this.brand = brand;
}
info() {
return "Name: " + this.name + ", brand: " + this.brand;
}
start() {
return this.brand + " " + this.name + " is runing.";
}
}
let bugati = new Vehicle("Veyon", "Bugati");
bugati.start();
Chạy lệnh tsc example.ts typescript sẽ biên dịch ra một file js cùng tên và khi chạy thực ra là chạy file này chứ không phải file example.ts.
Cùng xem code Javascript đã được dịch ra trông như thế nào nhé:
var Vehicle = /** @class */ (function () {
function Vehicle(name, brand) {
this.name = name;
this.brand = brand;
}
Vehicle.prototype.info = function () {
return "Name: " + this.name + ", brand: " + this.brand;
};
Vehicle.prototype.start = function () {
return this.brand + " " + this.name + " is runing.";
};
return Vehicle;
}());
var bugati = new Vehicle("Veyon", "Bugati");
bugati.start();
Đó là ưu điểm của Typescript so với Javascript, code trông gọn và dễ nhìn hơn nhiều so với Javascript.
Chúng ta có thể thấy hàm constructor trong code của Typescript, có gì đó lạ ở đây không? Đó là hàm tạo của class trong Typescript, một thể hiện của OOP, chắc các bạn cũng thấy quen quen ở đây đúng không.
Biến var - biến let trong Typescript:
Lưu ý: Vì hiện tại ES5 vẫn khá phổ biến nên Javascript mình so sánh ở phần này của bài biết đang nói là javascript bởi ES5 trở về trước, không gồm ES6 trở về sau! Trong ES6 về sau đã có khái niệm let vs const.
Typescript hỗ trợ 3 cách khai báo biến: var, let và const
Chúng ta chỉ cần quan tâm đến var với let còn const thì là cách khai báo hằng số rồi
Cũng giống so với Javascript, Typescript cũng sử dụng var để khai báo biến, thế nhưng có thêm let ở đây nữa, vậy vai trò của chúng thế nào? Để dễ dàng phân biệt sự khác nhau giữa var và let, cùng xem ví dụ sau:
ví dụ 1:
var foo = 123;
if (true) {
var foo = 456;
}
console.log(foo); // 456
ví dụ 2:
let foo = 123;
if (true) {
let foo = 456;
}
console.log(foo); // 123
Vậy sự khác nhau ở đây là gì?
Ta thấy biến let tạo ra chỉ dùng được trong block bao quanh nó. Còn biến var thì có thể sử dụng rộng hơn là có thể dùng xuyên suốt trong function chứa nó.
Nếu biến khai báo bởi var nằm ở vùng global scope thì nó tạo luôn thuộc tính mới cho global object ("this") còn biến let thì không.
var x = "global";
let y = "global";
console.log(this.x); // "global"
console.log(this.y); // undefined
Còn với Javascript thì chúng ta chỉ có mỗi var thôi.
var name = "Bugati";
Nếu như chúng ta muốn khai báo biến với kiểu dữ liệu trong Typescript:
var name: string = "Bugati";
Qua đó có thể thấy Typescript cung cấp một sự rõ ràng hơn về kiểu dữ liệu, điều này giúp dễ dàng tổ chức code hơn cũng như dễ dàng hơn rất nhiều trong việc debug so với Javascript, bởi nhiều khi có những lỗi logic về kiểu dữ liệu mà chúng ta rất khó để phát hiện.
Không thể không nói rằng Javascript vẫn là một trong những ngôn ngữ rất phổ biến hiện nay. Tuy vậy thì những ưu điểm của Typescript là không thể phủ nhận. Bởi những ứng dụng web có quy mô hầu hết đều sử dụng những framework front-end phổ biến, và khi làm việc với chúng thì bạn mới hiểu được sự tiện dụng, hiệu quả mà Typescript mang lại.
Tham khảo: https://hackernoon.com/typescript-vs-javascript-b568bc4a4e58
https://www.quora.com/What-is-the-difference-between-JavaScript-and-type-script-1
https://www.tutorialspoint.com/typescript/typescript_overview.htm
All rights reserved
