Daily Archives: 11/01/2017

Angular – TypeScript – Phần 1

TypeScript là một ngôn ngữ có “họ hàng” với Javascript. Đây là một bản mở rộng của ECMAScript6 (viết tắt là ES6), ES6 lại là một bản mở rộng của ECMAScript5 (viết tắt là ES5), ES5 chính là Javascript mà chúng ta thường dùng.

Ở đây chúng ta sẽ tìm hiểu nhanh qua TypeScript chứ không đi sâu.

Tuy nhiên hiện tại các trình duyệt web hiện cũng chưa hỗ trợ đầy đủ cho TypeScript nên chúng ta có thể dịch code TypeScript thành code ES5 bình thường.

Ví dụ

Trong bài trước chúng ta có cài Node.js và cài TypeScript từ hệ thống npm của Node, từ đây chúng ta có thể dùng lệnh tsc để chạy trình biên dịch TypeScript. Bạn có thể dùng lệnh tsc -v để xem phiên bản TypeScript của Node.

C:\>tsc -v
Version 2.1.4

Ở đây mình dùng phiên bản 2.1.4

Các file code TypeScript sẽ có phần mở rộng là .ts, để dịch code TypeScript thành ES5 thì chúng ta dùng lệnh tsc <tên_file>.

Ví dụ dưới đây là một đoạn code TypeScript trong file example.ts:

class Person {
    first_name: string;
    last_name: string;
    age: number;
 
    constructor(first_name: string, last_name: string, age: number){
        this.first_name = first_name;
        this.last_name = last_name;
        this.age = age;
    }
 
    greet() {
        console.log("Hello", this.first_name);
    }
}

var p: Person = new Person("Pho", "Code", 23);
p.greet();

Dùng lệnh tsc example.ts chúng ta sẽ được một file example.js như sau:

var Person = (function () {
    function Person(first_name, last_name, age) {
        this.first_name = first_name;
        this.last_name = last_name;
        this.age = age;
    }
    Person.prototype.greet = function () {
        console.log("Hello", this.first_name);
    };
    return Person;
}());
var p = new Person("Pho", "Code", 23);
p.greet();

Chạy bằng node:

C:\>node example.js
Hello Pho

Các kiểu dữ liệu cơ bản

Các kiểu dữ liệu thường dùng là string, number, boolean, array, enum, any, void.

String

Đây là kiểu chuỗi kí tự.

var name: string = "Pho Code";

Number

Đây là kiểu số, trong TypeScript thì tất cả đều là số chấm động (số thực).

var age: number = 36;

Boolean

Kiểu luận lý, hay chúng ta hay gọi là kiểu true/false.

var married: boolean = true;

Array

Kiểu mảng, khi khai báo các phần tử trong mảng thì chúng ta phải chỉ ra cả kiểu dữ liệu nữa. Để tạo array thì chúng ta có thể dùng cú pháp Array<kiểu> hoặc <kiểu>[].

var jobs: Array<string> = ['Coder', 'Tester', 'Manager'];
var primes: int[] = [2, 3, 5, 7];

Enum

Đây là kiểu danh sách, phần tử trong danh sách được đánh số theo thứ tự từ 0.

enum Role {Employee, Manager, Administrator};
var role: Role = Role.Employee;

Any

Biến kiểu Any có thể nhận bất kiểu giá trị kiểu nào.

var something: any = "this is a string";
something = 1;
something = [1, 2, 3];

Void

Void chỉ đơn giản là “không có kiểu gì cả”, thương dùng cho các hàm không cần trả về một giá trị gì.

function setName(name: string): void {
    this.name = name;
}