Angular – TypeScript – Phần 2

5/5 - (2 votes)

Trong phần này chúng ta sẽ tìm hiểu về hướng đối tượng trong TypeScript.

Class

Đề khai báo một lớp thì chúng ta dùng từ khóa class.

class Product {

}

Để tạo một đối tượng thuộc một lớp thì chúng ta dùng từ khóa new.

class Product {
}

var p: Product = new Product();

Thuộc tính

Thuộc tính là các dữ liệu “gắn” trong một đối tượng thuộc một lớp.

class Product {
    name: string;
    description: string;
    price: number;
}

Phương thức

Phương thức là các hàm của riêng một đối tượng.

class Product {
    name: string;
    description: string;
    price: number;

    getName(): string {
        return this.name;
    }
    
    setName(name) {
        this.name = name;
    }
    
    getDescription(): string {
        return this.description;
    }
    
    setDescription(description) {
        this.description = description;
    }

    getPrice(): number {
        return this.price;
    }
   
    setPrice(price) {
        this.price = price;
    }
}

Phương thức khởi tạo

Phương thức khởi tạo là phương thức sẽ được gọi khi chúng ta tạo một đối tượng bằng từ khóa new. Trong TypeScript thì phương thức khởi tạo luôn có tên là constructor(), có thể nhận vào tham số nhưng không thể có giá trị trả về.

Nếu bạn không khai báo phương thức khởi tạo thì TypeScript cũng tự định nghĩa một phương thức khởi tạo riêng (nhưng chúng ta không nhìn thấy).

class Product {
    constructor() {
        console.log("Product has been created");
    }
}
var p: Product = new Product();

Trong TypeScript thì chúng ta chỉ được phép khai báo một phương thức khởi tạo duy nhất cho một lớp, do đó thông thường chúng ta sẽ khai báo phương thức khởi tạo nhận vào tham số là toàn bộ thuộc tính của lớp đó.

class Product {
    name: string;
    description: string;
    price: number;

    constructor(name: string, description: string, price: number) {
        this.name = name;  
        this.description = description;
        this.price = price;
    }
}
var p: Product = new Product("Angular 2", "Web Development with Angular 2", 59.99);

Kế thừa

Kế thừa là một trong những tính năng quan trọng của lập trình hướng đối tượng, cho phép coder tái sử dụng code.

Để một lớp kế thừa từ lớp khác thì chúng ta chỉ cần dùng từ khóa extends.

class Product {
    name: string;
    description: string;
    price: number;

    getName(): string {
        return this.name;
    }
 
    setName(name) {
        this.name = name;
    }
 
    getDescription(): string {
        return this.description;
    }
 
    setDescription(description) {
        this.description = description;
    }

    getPrice(): number {
       return this.price;
    }
 
    setPrice(price) {
        this.price = price;
    }
 
    constructor(name: string, description: string, price: number) {
        this.name = name; 
        this.description = description;
        this.price = price;
    }
}

class Book extends Product {
 
}
var b: Book = new Book("Angular 2", "Web development with Angular 2", 59.99);
console.log(b.getName(), b.getDescription(), b.getPrice());

Lớp kế thừa có thể sử dụng các thuộc tính và phương thức của lớp cha, và có thể có thuộc tính và phương thức của riêng nó.

Hàm mũi tên (Fat Arrow Function)

Mình không biết gọi là gì, trong TypeScript bạn có thể dùng từ khóa => để tạo nhanh một hàm thay vì phải viết từ khóa function như trong ES5.

ES5:

var product = ["Apple", "Lemon", "Banana"];
product.forEach(function(p) {
    console.log(p);
});

TypeScript:

var product = ["Apple", "Lemon", "Banana"];
product.forEach( (p) => console.log(p) );

Thao tác trên string

Chúng ta có thể chèn giá trị của một biến vào một string bằng cách dùng kí tự '$'.

var title = "Angular 2";
var price = 59.99;
var str = `${title} costs ${price}`;
console.log(str);

Lưu ý là bạn phải dùng dấu huyền ` để bọc chuỗi chứ không dùng dấu nháy đơn hay nháy kép gì cả.

Khi bọc chuỗi trong cặp dấu huyền ` thì chúng ta có thể viết chuỗi trên nhiều dòng.

var html = `
<html>
    <head>
        <title>Pho Code</title>
    </head>
<body>
</body>
</html>
`;

5 2 votes

Article Rating