4.1 TypeScript中 keyof 的用法

TypeScript 中的 typeof 和 keyof 是两个非常有用的操作符，它们在类型系统中扮演着重要的角色。让我们详细了解它们的用法：

1. typeof 操作符

在 TypeScript 中，typeof 有两种用途：

A) 运行时类型检查（与 JavaScript 相同）:

let x = 5;
console.log(typeof x); // 输出: "number"

B) 在类型上下文中获取变量或属性的类型：

const person = { name: "Alice", age: 30 };
type Person = typeof person;
 
// Person 等同于:
// type Person = {
//     name: string;
//     age: number;
// }
 
let anotherPerson: Person = { name: "Bob", age: 25 };

typeof 还可以用于获取函数或类的类型：

function greet(name: string) {
    return `Hello, ${name}!`;
}
 
type GreetFunction = typeof greet;
// GreetFunction 等同于: (name: string) => string

2. keyof 操作符

keyof 操作符用于获取一个对象类型的所有键的联合类型：

interface User {
    id: number;
    name: string;
    email: string;
}
 
type UserKeys = keyof User; // "id" | "name" | "email"
 
let key: UserKeys = "id"; // 正确
key = "age"; // 错误，"age"不是User的键

keyof 的常见用途：

A) 创建映射类型：

type Optional<T> = {
    [K in keyof T]?: T[K];
};
 
type PartialUser = Optional<User>;
// 等同于:
// type PartialUser = {
//     id?: number;
//     name?: string;
//     email?: string;
// }

B) 在泛型约束中使用：

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"); // 类型为 string
const userAge = getProperty(user, "age"); // 错误，"age"不是User的键

c) 与 typeof 结合使用：

const colors = {
    red: "#FF0000",
    green: "#00FF00",
    blue: "#0000FF"
};
 
type ColorKeys = keyof typeof colors; // "red" | "green" | "blue"

这些操作符使 TypeScript 的类型系统更加强大和灵活，允许我们基于现有类型创建新的类型，并在编译时捕获更多潜在的错误。