TypeScript - keyof 类型操作符

在 TypeScript 中，keyof 类型操作符允许您获取对象的键并使用它们执行各种操作。在处理对象及其属性时，它起着重要作用。

语法

TypeScript 中 keyof 类型操作符的语法如下：

keyof Type

keyof 关键字后跟类型的名称，称为“Type”。它返回一个联合类型，其中包含指定类型的所有键（属性名称）。这允许您动态访问和操作对象的键。

示例

让我们借助 TypeScript 中的一些示例来理解 keyof 操作符。

示例 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

示例：类型安全的属性访问

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 }

打印页面