TypeScript 中如何使用 keyof 关键字？

---

在 TypeScript 中，keyof 关键字在处理对象及其属性时起着重要作用。它允许我们获取对象的键并使用它们执行各种操作。本教程将指导您了解 keyof 的用法，提供不同场景下的语法解释和代码示例。

语法

keyof Type

以上是 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”的泛型函数，它接受两个参数：“obj”类型为 T，“key”类型为 K，其中 K 扩展 keyof T。该函数返回对象中给定键对应的值。然后，我们创建一个汽车对象并使用“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 项目中以释放其潜力并简化您的开发流程。