5 ký hiệu khó hiểu cần biết trong TypeScript

Có một số ký hiệu và khái niệm có thể gây khó khăn cho người mới bắt đầu hoặc người chưa quen với ngôn ngữ này. Những ký hiệu này, bao gồm Union Types, Type Aliases, Intersection Types, Generics, và Type Assertion, là một phần quan trọng của TypeScript và giúp bạn biểu diễn và quản lý kiểu dữ liệu một cách mạnh mẽ.

Trong bài viết này,mình sẽ đi sâu vào các ký hiệu này, giải thích cách chúng hoạt động và cung cấp ví dụ cụ thể để giúp bạn hiểu rõ hơn về cách sử dụng chúng trong TypeScript. Hãy cùng khám phá và làm quen với những ký hiệu khó hiểu nhưng quan trọng này trong TypeScript.

Union Types (|)

Union Types (|) là một ký hiệu quan trọng cho phép bạn biểu thị một biến có thể mang nhiều kiểu dữ liệu khác nhau. Điều này có nghĩa rằng một biến có thể chứa giá trị thuộc về một trong các kiểu dữ liệu được xác định trong Union Type. Union Types giúp tạo mã nguồn linh hoạt và kiểm tra kiểu dữ liệu trong quá trình phát triển.

Cú pháp

let variable: Type1 | Type2 | ... | TypeN;

• variable: Tên biến bạn muốn định nghĩa với Union Type.
• Type1, Type2, ..., TypeN: Các kiểu dữ liệu mà biến có thể mang. Chúng được liệt kê và phân cách bằng dấu |.

Ví dụ:

// Biến age có thể là number hoặc string
let age: number | string;

age = 30;      // Hợp lệ
age = "thirty"; // Hợp lệ

// Biến result có thể là number, string hoặc boolean
let result: number | string | boolean;

result = 42;          // Hợp lệ
result = "success";   // Hợp lệ
result = true;        // Hợp lệ

Union Types giúp bạn xác định một biến có thể mang nhiều giá trị khác nhau và giúp TypeScript kiểm tra kiểu dữ liệu một cách chặt chẽ. Điều này thường được sử dụng trong các tình huống khi một biến có thể có nhiều kiểu dữ liệu khác nhau, và bạn muốn biểu diễn sự đa dạng này trong mã nguồn của mình.

Bài viết này được đăng tại [free tuts .net]

Type Aliases (type)

Type Aliases trong TypeScript là cách để bạn đặt tên cho kiểu dữ liệu phức tạp và có khả năng tái sử dụng chúng. Điều này giúp mã của bạn trở nên dễ đọc hơn, giảm lặp lại mã, và tạo ra các kiểu dữ liệu tùy chỉnh dễ quản lý.

Cú pháp

type TypeName = TypeDefinition;

• TypeName: Tên bạn muốn đặt cho kiểu dữ liệu.
• TypeDefinition: Định nghĩa kiểu dữ liệu phức tạp, bao gồm các kiểu dữ liệu cơ bản, Union Types, Intersection Types, hoặc các kiểu dữ liệu tùy chỉnh.

Ví dụ

type Point = {
    x: number;
    y: number;
};

type User = {
    id: number;
    name: string;
};

type ApiResponse = {
    data: any;
    status: number;
};

// Sử dụng Type Alias để định nghĩa một kiểu dữ liệu phức tạp
type Circle = {
    center: Point;
    radius: number;
};

// Sử dụng Type Alias để định nghĩa một kiểu dữ liệu tùy chỉnh
type Employee = {
    id: number;
    name: string;
    role: string;
};

Sử dụng Type Aliases giúp làm cho mã nguồn trở nên dễ đọc hơn, giúp tái sử dụng các kiểu dữ liệu phức tạp, và giúp bạn đặt tên cho các kiểu dữ liệu tùy chỉnh. Điều này cực kỳ hữu ích khi bạn cần làm việc với các kiểu dữ liệu phức tạp hoặc muốn tạo ra các kiểu dữ liệu tùy chỉnh trong dự án TypeScript của bạn.

Intersection Types (&)

Intersection Types trong TypeScript cho phép bạn kết hợp nhiều kiểu dữ liệu lại với nhau để tạo thành một kiểu mới, kết hợp tất cả các tính chất của các kiểu gốc. Điều này hữu ích khi bạn muốn có một biến hoặc đối tượng mang tính chất của cả hai kiểu dữ liệu.

Cú pháp

type Type1 & Type2 & ... & TypeN;

• Type1, Type2, ..., TypeN: Các kiểu dữ liệu bạn muốn kết hợp lại với nhau, được phân cách bằng dấu &.

Ví dụ

type Dog = {
    name: string;
    breed: string;
};

type Bird = {
    name: string;
    wingspan: number;
};

// Kết hợp tính chất của cả kiểu Dog và kiểu Bird
type Pet = Dog & Bird;

const myPet: Pet = {
    name: "Buddy",
    breed: "Golden Retriever",
    wingspan: 30
};

Trong ví dụ trên, kiểu Pet là kết hợp của kiểu Dog và kiểu Bird. Điều này cho phép biến myPet có tất cả các thuộc tính của cả hai kiểu dữ liệu Dog và Bird.

Intersection Types hữu ích khi bạn muốn kết hợp các tính chất của nhiều kiểu dữ liệu lại với nhau và sử dụng chúng trong mã nguồn của bạn.

Generics (<T>)

Generics trong TypeScript là một khái niệm quan trọng cho phép bạn tạo linh hoạt và tái sử dụng mã nguồn bằng cách làm cho kiểu dữ liệu trở nên tổng quát. Generics cho phép bạn định nghĩa một hàm, lớp hoặc kiểu dữ liệu mà có thể làm việc với nhiều kiểu dữ liệu khác nhau mà bạn chỉ định sau khi sử dụng.

Cú pháp

function functionName<T>(parameter: T): T {
    // Thực hiện mã nguồn với kiểu dữ liệu T
}

• T: Là tham số kiểu dữ liệu tự do, bạn có thể sử dụng bất kỳ tên nào (như T, U, Type,...).
• parameter: Đối tượng hoặc giá trị có kiểu dữ liệu là T.
• {}: Nơi bạn thực hiện mã nguồn dựa trên kiểu dữ liệu T.

Ví dụ

// Hàm identity sử dụng Generics
function identity<T>(input: T): T {
    return input;
}

let result1 = identity(42);          // result1 có kiểu number
let result2 = identity("Hello");     // result2 có kiểu string

// Lớp Generic
class Box<T> {
    value: T;

    constructor(value: T) {
        this.value = value;
    }
}

let box1 = new Box(42);            // box1 có kiểu Box<number>
let box2 = new Box("TypeScript");  // box2 có kiểu Box<string>

Generics cho phép bạn viết mã nguồn một lần và tái sử dụng nó với nhiều kiểu dữ liệu khác nhau. Điều này giúp tạo mã nguồn linh hoạt và giảm lặp lại trong mã nguồn của bạn.

Type Assertion (as)

Type Assertion trong TypeScript là một cách để bạn thông báo cho trình biên dịch rằng bạn biết chính xác kiểu dữ liệu của biến mà TypeScript không thể xác định một cách tường minh. Điều này thường được sử dụng khi bạn chắc chắn rằng một biến sẽ có một kiểu dữ liệu cụ thể trong một phạm vi cụ thể của mã nguồn.

Cú pháp

let variableName = value as Type;

• variableName: Tên biến mà bạn muốn áp dụng Type Assertion.
• value: Giá trị của biến.
• Type: Kiểu dữ liệu bạn muốn ép kiểu biến thành.

Ví dụ

let unknownValue: any = "Hello, TypeScript!";
let stringLength: number = (unknownValue as string).length; // Ép kiểu unknownValue thành string

console.log(stringLength); // Kết quả là 14

let someValue: any = 42;
let anotherValue: string = someValue as string; // Ép kiểu someValue thành string

console.log(anotherValue); // Kết quả là "42"

Type Assertion là một công cụ mạnh mẽ, nhưng bạn cần sử dụng nó một cách cẩn thận. Nó đặc biệt hữu ích khi bạn biết chính xác kiểu dữ liệu của một biến trong một tình huống cụ thể, nhưng nên tránh sử dụng quá nhiều và nên sử dụng kiểu dữ liệu tường minh khi có thể.

Kết Bài

Trong bài viết này, mình đã tìm hiểu về các ký hiệu và khái niệm quan trọng trong TypeScript, bao gồm Union Types, Type Aliases, Intersection Types, Generics, và Type Assertion.

• Union Types cho phép biểu diễn sự đa dạng của kiểu dữ liệu trong một biến.
• Type Aliases giúp đặt tên cho kiểu dữ liệu phức tạp và làm cho mã nguồn dễ đọc hơn.
• Intersection Types cho phép kết hợp tính chất của nhiều kiểu dữ liệu.
• Generics giúp tạo mã linh hoạt và tái sử dụng, đặc biệt khi làm việc với kiểu dữ liệu động.
• Type Assertion cho phép ép kiểu một biến khi bạn biết chính xác kiểu dữ liệu của nó trong một phạm vi cụ thể.

Sử dụng những ký hiệu này, bạn có khả năng viết mã nguồn TypeScript hiệu quả và mạnh mẽ hơn. Hãy tận dụng kiến thức này để trở thành một lập trình viên TypeScript giỏi và xây dựng mã nguồn dễ đọc, bảo trì và mở rộng.