一、前言
在 TypeScript 的世界里，有两个非常实用的类型操作符，那就是 keyof 和 typeof。它们就像是两把神奇的钥匙，能帮助我们在处理类型的时候更加得心应手。下面咱就来好好聊聊它们的巧妙用法。
二、keyof 操作符
2.1 keyof 基础概念
keyof 操作符可以用来获取一个类型的所有键，返回的是一个联合类型。这么说可能有点抽象，咱们看个例子就明白了。
// 技术栈：TypeScript
// 定义一个接口
interface Person {
name: string;
age: number;
gender: string;
}
// 使用 keyof 获取 Person 接口的所有键
type PersonKeys = keyof Person;
// 打印 PersonKeys 的值
console.log(PersonKeys);
// 输出："name" | "age" | "gender"
在这个例子中，keyof Person 返回了一个联合类型 "name" | "age" | "gender"，也就是说 PersonKeys 这个类型可以是 "name"、"age" 或者 "gender" 中的任意一个。
2.2 keyof 的应用场景
2.2.1 动态访问对象属性
有时候我们需要根据用户输入的键来访问对象的属性，这时候 keyof 就派上用场了。
// 技术栈：TypeScript
interface Person {
name: string;
age: number;
gender: string;
}
const person: Person = {
name: 'John',
age: 30,
gender: 'male'
};
function getProperty(obj: Person, key: keyof Person) {
return obj[key];
}
// 获取 person 对象的 name 属性
const name = getProperty(person, 'name');
console.log(name); // 输出：John
在这个例子中，getProperty 函数接受一个 Person 类型的对象和一个 keyof Person 类型的键，这样就可以确保传入的键是 Person 接口中定义的键，避免了访问不存在的属性。
2.2.2 类型约束
keyof 还可以用于类型约束，确保函数的参数只能是对象的键。
// 技术栈：TypeScript
interface User {
id: number;
username: string;
email: string;
}
function getValue<T, K extends keyof T>(obj: T, key: K) {
return obj[key];
}
const user: User = {
id: 1,
username: 'user1',
email: 'user1@example.com'
};
// 获取 user 对象的 username 属性
const username = getValue(user, 'username');
console.log(username); // 输出：user1
在这个例子中，K extends keyof T 表示 K 必须是 T 类型的键，这样就保证了 getValue 函数只能接受对象中存在的键作为参数。
2.2.3 技术优缺点
优点
- 类型安全：使用
keyof可以在编译时检查键的有效性，避免运行时错误。 - 代码可读性：明确了函数参数的类型，使代码更易于理解和维护。
缺点
- 增加代码复杂度：对于一些简单的场景，使用
keyof可能会增加代码的复杂度。
2.2.4 注意事项
- 键的大小写：
keyof对键的大小写是敏感的，所以在使用时要注意键的大小写。 - 联合类型：当对象的键是联合类型时，
keyof返回的也是联合类型，需要注意处理。
三、typeof 操作符
3.1 typeof 基础概念
typeof 操作符在 JavaScript 中就已经存在，在 TypeScript 中它有了新的用途，即可以用来获取一个变量或对象的类型。
// 技术栈：TypeScript
const num = 10;
// 使用 typeof 获取 num 的类型
type NumType = typeof num;
// 打印 NumType 的值
console.log(NumType);
// 输出：number
在这个例子中，typeof num 返回了 number 类型，所以 NumType 就是 number 类型。
3.2 typeof 的应用场景
3.2.1 获取对象的类型
有时候我们需要获取一个对象的类型，然后根据这个类型来定义其他变量或函数。
// 技术栈：TypeScript
const person = {
name: 'John',
age: 30
};
// 使用 typeof 获取 person 的类型
type PersonType = typeof person;
// 定义一个新的对象，类型为 PersonType
const anotherPerson: PersonType = {
name: 'Jane',
age: 25
};
console.log(anotherPerson);
// 输出：{ name: 'Jane', age: 25 }
在这个例子中，typeof person 返回了 { name: string; age: number; } 类型，然后我们可以用这个类型来定义其他对象。
3.2.2 类型守卫
typeof 还可以用于类型守卫，在运行时检查变量的类型。
// 技术栈：TypeScript
function printValue(value: string | number) {
if (typeof value === 'string') {
console.log(`The value is a string: ${value}`);
} else {
console.log(`The value is a number: ${value}`);
}
}
printValue('hello');
// 输出：The value is a string: hello
printValue(10);
// 输出：The value is a number: 10
在这个例子中，typeof value === 'string' 就是一个类型守卫，它可以在运行时检查 value 的类型，然后根据不同的类型执行不同的代码。
3.2.3 技术优缺点
优点
- 灵活性：可以动态获取变量或对象的类型，提高代码的灵活性。
- 类型安全：在编译时可以检查类型的正确性，避免运行时错误。
缺点
- 性能开销：在运行时进行类型检查会增加一定的性能开销。
3.2.4 注意事项
- typeof 的局限性：
typeof只能返回一些基本类型，对于复杂的对象类型可能无法准确返回。 - 运行时检查：
typeof是在运行时进行类型检查，所以不能在编译时完全保证类型的正确性。
四、keyof 和 typeof 的组合使用
4.1 组合使用的场景
keyof 和 typeof 可以组合使用，来实现更复杂的类型操作。
// 技术栈：TypeScript
const person = {
name: 'John',
age: 30
};
// 使用 typeof 获取 person 的类型
type PersonType = typeof person;
// 使用 keyof 获取 PersonType 的所有键
type PersonKeys = keyof PersonType;
// 打印 PersonKeys 的值
console.log(PersonKeys);
// 输出："name" | "age"
在这个例子中，我们先使用 typeof 获取 person 的类型，然后使用 keyof 获取这个类型的所有键。
4.2 组合使用的优势
- 更精确的类型定义：通过组合使用
keyof和typeof，可以更精确地定义类型，提高代码的类型安全性。 - 代码复用：可以将类型定义提取出来，实现代码的复用。
4.3 注意事项
- 类型嵌套：当类型嵌套较深时，组合使用
keyof和typeof可能会导致类型定义变得复杂，需要注意处理。
五、文章总结
keyof 和 typeof 是 TypeScript 中非常实用的类型操作符，它们各自有不同的用途和应用场景。keyof 主要用于获取类型的所有键，实现动态访问对象属性和类型约束；typeof 主要用于获取变量或对象的类型，实现类型守卫和动态类型定义。通过组合使用 keyof 和 typeof，可以实现更复杂的类型操作，提高代码的类型安全性和灵活性。在使用这两个操作符时，需要注意它们的优缺点和注意事项，根据具体的场景选择合适的使用方式。
评论