如何在 TypeScript 中使用 keyof 关键字?
在 TypeScript 中，keyof 关键字在处理对象及其属性时起着重要作用。它允许我们获取对象的键并使用它们执行各种操作。本教程将指导您如何使用 keyof，并提供不同场景的语法解释和代码示例。
语法
keyof 类型
以上是 TypeScript 中 keyof 关键字的语法。keyof 关键字后跟类型的名称，称为"Type"。它返回一个由指定类型的所有键(属性名称)组成的联合类型。这使我们能够动态地访问和操作对象的键。
示例 1:访问对象属性名称
keyof 关键字帮助我们检索对象类型中定义的属性名称。在此示例中，我们定义了一个名为"Person"的接口，其中包含两个属性:字符串类型的"name"和数字类型的"age"。然后，我们使用 keyof 创建类型别名"PersonKeys"，以从 Person 接口中提取键。最后，我们将值"name"赋值给名为"keys"的 PersonKeys 类型常量，并记录其值。
interface Person {
name: string;
age: number;
}
type PersonKeys = keyof Person;
const keys: PersonKeys = 'name';
console.log(keys);
编译后，它将生成以下 JavaScript 代码 -
var keys = 'name'; console.log(keys);
输出
上述代码将产生以下输出 -
name
示例 2:类型安全的属性访问
keyof 关键字使我们能够以类型安全的方式访问对象属性。这里，我们定义了一个接口"Car"，其属性分别代表汽车的品牌、年份和价格。我们声明了一个名为"getProperty"的泛型函数，它接受两个参数:类型为 T 的"obj"和类型为 K 的"key"，其中 K 扩展了 keyof T。该函数返回对象中与给定键对应的值。然后，我们创建一个 car 对象，并使用"getProperty"函数检索汽车的品牌属性并将其赋值给变量"carBrand"。最后，我们记录"carBrand"的值。
interface Car {
brand: string;
year: number;
price: number;
}
function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
return obj[key];
}
const car: Car = {
brand: 'Toyota',
year: 2022,
price: 25000,
};
const carBrand: string = getProperty(car, 'brand');
console.log(carBrand);
编译后，它将生成以下 JavaScript 代码 -
function getProperty(obj, key) {
return obj[key];
}
var car = {
brand: 'Toyota',
year: 2022,
price: 25000
};
var carBrand = getProperty(car, 'brand');
console.log(carBrand);
输出
上述代码将产生以下输出 -
Toyota
示例 3:映射对象属性
keyof 关键字也可用于将属性从一个对象映射到另一个对象。在本例中，我们定义了一个接口"Fruit"，其中包含表示水果名称和颜色的属性。然后，我们在映射类型中使用 keyof 创建一个新类型"FruitMapped"。它将 keyof Fruit 中的每个键映射到类型"string"。最后，我们使用 FruitMapped 类型创建一个"fruit"对象并记录其值。
interface Fruit {
name: string;
color: string;
}
type FruitMapped = {
[K in keyof Fruit]: string;
};
const fruit: FruitMapped = {
name: 'Apple',
color: 'Red',
};
console.log(fruit);
编译后，它将生成以下 JavaScript 代码 -
var fruit = {
name: 'Apple',
color: 'Red'
};
console.log(fruit);
输出
上述代码将产生以下输出 -
{ name: 'Apple', color: 'Red' }
示例 4:条件类型映射
keyof 关键字的另一个强大应用是条件类型映射。这使我们能够根据特定条件选择性地映射属性。在此示例中，我们有一个接口"Product"，表示产品的名称、价格和可用性。我们定义了一个类型"DiscountedProducts"，该类型使用 keyof 进行条件映射。它检查属性值是否扩展了"number"类型，并将其映射到原始值和"null"的联合类型。对于所有其他属性类型，它保持原始值类型不变。最后，我们使用 DiscountedProducts 类型创建一个"product"对象。
interface Product {
name: string;
price: number;
inStock: boolean;
}
type DiscountedProducts<T> = {
[K in keyof T]: T[K] extends number ? T[K] | null : T[K];
};
const product: DiscountedProducts<Product> = {
name: 'Widget',
price: 10,
inStock: true,
};
console.log(product);
编译后，它将生成以下 JavaScript 代码 -
var product = {
name: 'Widget',
price: 10,
inStock: true
};
console.log(product);
输出
上述代码将产生以下输出 -
{ name: 'Widget', price: 10, inStock: true }
结论
在本教程中，我们探索了 TypeScript 中的 keyof 关键字，它使我们能够更高效、更安全地处理对象属性。我们涵盖了访问对象属性名称、类型安全属性访问、映射对象属性、条件类型映射以及强制使用对象键子集等场景。通过理解和使用 keyof，您可以编写更健壮、更易于维护的 TypeScript 代码。
keyof 关键字使开发人员能够在类型级别提取、操作和强制执行对象的结构。它增强了类型安全性并支持强大的抽象。将 keyof 集成到您的 TypeScript 项目中，释放其潜力并简化您的开发流程。
