Keyof trong TypeScript là một loại truy cập kiểu cho phép bạn lấy tất cả các khóa của một đối tượng và trả về chúng dưới dạng một kiểu mới. Điều này rất hữu ích khi bạn muốn làm việc với các thuộc tính của một kiểu mà không cần phải biết trước chúng là gì, giúp tăng tính linh hoạt và an toàn trong mã nguồn.

Bài viết này là một phần của chuỗi học TypeScript trên "codetuthub.com", cùng với các bài học khác như TypeScript Utility Types, TypeScript Generics, và TypeScript Functions.

1. Khái niệm về keyof

Khi bạn sử dụng keyof với một kiểu, TypeScript sẽ tạo ra một union type chứa tất cả các khóa của kiểu đó. Bạn có thể sử dụng keyof để xác định các thuộc tính mà bạn muốn truy cập hoặc thao tác trong các hàm hoặc đối tượng.

Ví dụ

ts
interface User {
    id: number;
    name: string;
    email: string;
}

type UserKeys = keyof User; // "id" | "name" | "email"

Trong ví dụ này, UserKeys sẽ là một kiểu union chứa các chuỗi "id", "name", và "email".

2. Sử dụng keyof trong các hàm

keyof có thể được sử dụng trong các hàm để truy cập các thuộc tính của một đối tượng.

Ví dụ

ts
function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
    return obj[key];
}

const user: User = {
    id: 1,
    name: "Alice",
    email: "alice@example.com"
};

const userName = getProperty(user, "name"); // Kết quả: "Alice"
console.log(userName);

Trong ví dụ này, hàm getProperty sử dụng keyof để đảm bảo rằng tham số key là một khóa hợp lệ của đối tượng obj.

3. Sử dụng keyof với các kiểu phức tạp

keyof cũng có thể được sử dụng với các kiểu phức tạp hơn, chẳng hạn như các kiểu lồng nhau.

Ví dụ

ts
interface Person {
    name: string;
    address: {
        street: string;
        city: string;
    };
}

type AddressKeys = keyof Person["address"]; // "street" | "city"

Trong ví dụ này, AddressKeys sẽ chứa các khóa của thuộc tính address trong interface Person.

4. Kết hợp với các utility types

Khi kết hợp với các utility types như Pick và Omit, keyof có thể giúp bạn dễ dàng tạo ra các kiểu mới từ các kiểu có sẵn.

Ví dụ

ts
type UserWithoutEmail = Pick<User, Exclude<keyof User, "email">>;

const user2: UserWithoutEmail = {
    id: 2,
    name: "Bob"
    // email không có ở đây
};

5. Kết luận

Keyof trong TypeScript là một công cụ mạnh mẽ giúp bạn làm việc với các thuộc tính của kiểu một cách linh hoạt và an toàn. Bằng cách sử dụng keyof, bạn có thể truy cập và thao tác với các thuộc tính của đối tượng mà không cần phải biết trước tên của chúng, giúp mã nguồn của bạn trở nên rõ ràng và dễ bảo trì hơn. Để tìm hiểu thêm về TypeScript, hãy tham khảo các bài học liên quan trên "codetuthub.com" như TypeScript Utility Types, TypeScript Generics, và TypeScript Functions.