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扩展了T的keyof。该函数返回对象中与给定key相对应的值。然后，我们创建一个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 关键字在将一个对象的属性映射到另一个对象时也非常有用。在此示例中，我们定义了一个接口”水果”，其属性表示水果的名称和颜色。然后，我们使用 keyof 在映射类型中创建一个新类型”映射的水果”。它将 keyof Fruit 中的每个键映射到类型”字符串”。最后，我们使用 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”。我们定义了一个使用keyof进行条件映射的类型“DiscountedProducts”。它检查属性值是否扩展了“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项目中，以发挥其潜力并简化开发流程。