Hướng dẫn về TypeScript. Trước khi tìm hiểu TS, bắt buộc bạn phải hiểu về JS trước. Vui lòng đọc JavaScript

[[TS Type Of Object Interfaces|Như đã học trước đây]], interface có thể được sử dụng để mô tả "hình dạng (Shape)" của một đối tượng.

Chương này chủ yếu giới thiệu một ứng dụng khác của interface, đó là để trừu tượng hóa một phần hành vi của class.

Class triển khai interface

Triển khai (implements) là một khái niệm quan trọng trong lập trình hướng đối tượng. Nói chung, một class chỉ có thể kế thừa từ một class khác, đôi khi các class khác nhau có thể có một số đặc điểm chung, lúc này chúng ta có thể trích xuất các đặc điểm này thành các interface (interfaces), và sử dụng từ khóa implements để triển khai chúng. Tính năng này đã tăng cường đáng kể tính linh hoạt của lập trình hướng đối tượng.

Trong JavaScript truyền thống, khái niệm class được thực hiện thông qua hàm khởi tạo và thừa kế thông qua chuỗi nguyên mẫu. Tuy nhiên, trong ES6, chúng ta cuối cùng cũng đã có class.

TypeScript không chỉ thực hiện tất cả các tính năng của class trong ES6, mà còn thêm một số tính năng mới.

Nếu bạn định nghĩa hai hàm, giao diện hoặc lớp có cùng tên, chúng sẽ được kết hợp thành một kiểu:

Kết hợp hàm

[[TS Type Of Function#Overload (Nạp chồng)|Chúng ta đã học trước đó]], chúng ta có thể sử dụng quá tải để định nghĩa nhiều kiểu hàm:

function reverse(x: number): number;
function reverse(x: string): string;
function reverse(x: number | string): number | string {
    if (typeof x === 'number') {
        return Number(x.toString().split('').reverse().join(''));
    } else if (typeof x === 'string') {
        return x.split('').reverse().join('');
    }
}

Kiểu Enum (liệt kê) được sử dụng trong các trường hợp giá trị bị giới hạn trong một phạm vi nhất định, chẳng hạn như chỉ có bảy ngày trong một tuần, màu sắc được giới hạn là đỏ, xanh lá cây, xanh dương, v.v.

Ví dụ đơn giản

Enum được định nghĩa bằng từ khóa enum:

Generics là một tính năng cho phép bạn định nghĩa hàm, interface hoặc class mà không cần chỉ định trước kiểu cụ thể, và sau đó chỉ định kiểu cụ thể khi sử dụng.

Ví dụ đơn giản

Đầu tiên, chúng ta sẽ triển khai một hàm createArray, nó có thể tạo ra một mảng có độ dài xác định, đồng thời điền tất cả các mục với một giá trị mặc định:

String Literal Type được sử dụng để hạn chế giá trị chỉ có thể là một trong số một số chuỗi nhất định.

Ví dụ đơn giản

type EventNames = 'click' | 'scroll' | 'mousemove';
function handleEvent(ele: Element, event: EventNames) {
    // do something
}

handleEvent(document.getElementById('hello'), 'scroll');  // Không có vấn đề
handleEvent(document.getElementById('world'), 'dblclick'); // Báo lỗi, event không thể là 'dblclick'

// index.ts(7,47): error TS2345: Argument of type '"dblclick"' is not assignable to parameter of type 'EventNames'.

Mảng kết hợp các đối tượng cùng loại, trong khi tuple (Tuple) kết hợp các đối tượng loại khác nhau.

Tuple bắt nguồn từ các ngôn ngữ lập trình hàm (như F#), nơi mà tuple được sử dụng thường xuyên.

Ví dụ đơn giản

Định nghĩa một cặp giá trị lần lượt là string và number:

Type Alias được sử dụng để đặt tên mới cho một kiểu.

Ví dụ đơn giản

type Name = string;
type NameResolver = () => string;
type NameOrResolver = Name | NameResolver;
function getName(n: NameOrResolver): Name {
    if (typeof n === 'string') {
        return n;
    } else {
        return n();
    }
}

Giá trị bất kỳ (Any) được sử dụng để đại diện cho khả năng gán giá trị cho bất kỳ loại dữ liệu nào.

Khái niệm về kiểu giá trị bất kỳ

Nếu một biến có kiểu dữ liệu thông thường, thì không được phép thay đổi kiểu dữ liệu trong quá trình gán giá trị:

let myFavoriteNumber: string = 'seven';
myFavoriteNumber = 7;

// index.ts(2,1): error TS2322: Type 'number' is not assignable to type 'string'.