09/11/2018, 22:32

TypeScript và upgrade lên Node 10 Phần 1

Nodejs 10 vẫn còn trong LTS từ tháng 10 năm 2018 đến tháng 4 năm 2021. Trong giai đoạn LTS này, Nodejs 11 cũng đã được phát hành trong tháng 10. Hiện nay các nhà phát triển Nodejs quy ước những bản phát hành được đánh số lẻ có nghĩa là để thử nghiệm và số chẵn là các bản phát hành LTS. Điều đó ...

TypeScript là gì?

TypeScript là một dự án mã nguồn mở được phát triển bởi Microsoft, nó có thể được coi là một phiên bản nâng cao của Javascript bởi việc bổ sung tùy chọn kiểu tĩnh và lớp hướng đối tượng mà điều này không có ở Javascript. TypeScript có thể sử dụng để phát triển các ứng dụng chạy ở client-side (Angular2) và server-side (NodeJS).

TypeScript sử dụng tất cả các tính năng của của ECMAScript 2015 (ES6) như classes, modules. Không dừng lại ở đó nếu như ECMAScript 2017 ra đời thì mình tin chắc rằng TypeScript cũng sẽ nâng cấp phiên bản của mình lên để sử dụng mọi kỹ thuật mới nhất từ ECMAScript. Thực ra TypeScript không phải ra đời đầu tiên mà trước đây cũng có một số thư viện như CoffeScript và Dart được phát triển bởi Google, tuy nhiên điểm yếu là hai thư viện này sư dụng cú pháp mới hoàn toàn, điều này khác hoàn toàn với TypeScript, vì vậy tuy ra đời sau nhưng TypeScript vẫn đang nhận được sự đón nhận từ các lập trình viên.

Tại sao nên sử dụng TypeScript?

  • Dễ phát triển dự án lớn: Với việc sử dụng các kỹ thuật mới nhất và lập trình hướng đối tượng nên TypeScript giúp chúng ta phát triển các dự án lớn một cách dễ dàng.
  • Nhiều Framework lựa chọn: Hiện nay các Javascript Framework đã dần khuyến khích nên sử dụng TypeScript để phát triển, ví dụ như AngularJS 2.0 và Ionic 2.0.
  • Hô trợ các tính năng của Javascript phiên bản mới nhất: 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).
  • Là mã nguồn mở: TypeScript là một mã nguồn mở nên bạn hoàn toàn có thể sử dụng mà không mất phí, bên cạnh đó còn được cộng đồng hỗ trợ.
  • TypeScript là Javscript: Bản chất của TypeScript là biên dịch tạo ra các đoạn mã javascript nên ban có thê chạy bất kì ở đâu miễn ở đó có hỗ trợ biên dịch Javascript. Ngoài ra bạn có thể sử dụng trộn lẫn cú pháp của Javascript vào bên trong TypeScript, điều này giúp các lập trình viên tiếp cận TypeScript dễ dàng hơn.

Install

  1. Chạy lệnh sau để install TypeScript (nhớ install nodejs trước):
  1. Compile:

Việc này sẽ giúp tạo ra file xxx.js

Cơ bản về TypeScript

Basic Types:

Trong TypeScript chia ra làm 7 loại cơ bản, bao gồm: boolean, number, string, array, enum, any, void. khi khai báo ta sẽ sử dụng cấu trúc như sau: var tên_biến : kiểu_trả_về = giá_trị_biến;

  • Boolean:
  • var isCheck: boolean = true;
  • String:
  • var fullName: string = "nguyen thi A";
  • Number:
  • var age: number = 8;
  • Array : có 2 kiểu khai báo tương đương với nhau trong TypeScript
  • var list: boolean[] = [true, false];
    var isDone: Array<boolean> = [true, false];
  • Enum: khi khai báo enum một cách thông thường các phần tử sẽ được đánh số từ 0 và tăng dần
  • enum Color{Red, Green, Blue};
    var c: Color = Color.Green
    var colorName = Color[1]

Khi mốn phần tử đầu tiên là 1 chứ không phải là 0 như mặc định thì cần khai báo như sau:

enum Color{Red = 1, Green, Blue};
var c: Color = Color.Green
var colorName = Color[1]
  • Any: Any là một kiểu mà bạn có thể gán bất kỳ kiểu nào cho nó.
  • var notSure: any = 4;
    notSure = "maybe a string instead";
    notSure = false;
    // khai báo này hoàn toàn được chấp nhận.
    // nếu notSure ban đầu khai báo và number thì
    // tại đây chắc chắn sẽ có lỗi
    
    var list: any[] = [1, true, "free"];
    // nếu sử dụng var list:number[] thì
    // tất cả các phần tử trong list sẽ phải là kiểu number
    list[1] = 100;
  • Void: Cũng giống như any nhưng void được sử dụng là đầu ra của hàm.
  • function warnUser(): void {
     alert("This is my warning message");
    }

Function:

Cũng giống như javaScript, typeScript có 2 cách khai báo function

//Named function
function add(x, y) {
    return x+y;
}

//Anonymous function
var myAdd = function(x, y) { return x+y; }

Nhưng khi khai báo function typeScript còn hỗ chợ việc khai báo với các kiểu trả ra của function và cũng như kiểu đầu vào của dữ liệu

function add(x: number, y: number): number {
    return x+y;
}

var myAdd = function(x: number, y: number): number { return x+y; };

Không những thế khi sử dụng typeScript ta có thể khai báo giá trị mặc định của đầu vào ngay khi khai báo function, điều mà JavaScript chỉ có từ ES6 trở lên

function buildName(firstName: string, lastName = "Smith") {
    return firstName + " " + lastName;
}

var result1 = buildName("Bob");  // OK
var result2 = buildName("Bob", "Adams", "Sr.");  //lỗi
var result3 = buildName("Bob", "Adams");  //OK

Không dừng lại ở đó typeScript còn hỗ chợ việc bỏ qua nhập một hoặc vài đầu vào

function buildName(firstName: string, lastName?: string) {
    if (lastName)
        return firstName + " " + lastName;
    else
        return firstName;
}

var result1 = buildName("Bob");  //ok
var result2 = buildName("Bob", "Adams", "Sr.");  //lỗi
var result3 = buildName("Bob", "Adams");  //ok

ở ví dụ trên việc khai báo biến lastName? làm cho viêc nhập lastName có thể không cần nữa và kết quả trả ra chỉ là bob mà thôi. typeScript còn có một cách làm việc với các param đầu vào có tên gọi: “Rest Parameters”

function buildName(firstName: string, ...restOfName: string[]) {

return firstName + " " + restOfName.join(" ");

}


var employeeName = buildName("Joseph", "Samuel", "Lucas", "MacKinzie");
 
0