TypeScript中的`keyof`关键字：索引访问的类型保障

最新推荐文章于 2024-06-14 15:02:13 发布

逐星ing

最新推荐文章于 2024-06-14 15:02:13 发布

阅读量775

点赞数 26

分类专栏： TypeScript 前端文章标签： typescript javascript 前端

本文链接：https://blog.csdn.net/qq_41791705/article/details/139124954

版权

前端同时被 2 个专栏收录

36 篇文章 0 订阅

订阅专栏

TypeScript

32 篇文章 0 订阅

订阅专栏

TypeScript中的`keyof`关键字：索引访问的类型保障

引言

在TypeScript中，keyof关键字是一种强大的工具，它允许你获取一个类型的所有公共属性的联合。这在你需要通过索引访问对象或类实例的属性时非常有用，keyof提供了一种类型安全的方式来处理这些属性。

基础知识

keyof关键字用于获取一个类型中所有公共属性的联合，返回的类型是这些属性名的字符串字面量类型。

核心概念

字符串字面量类型：表示可能的字符串值的固定集合。
索引访问：使用方括号[]来访问对象的属性。

示例演示

基本的keyof使用：

interface Person {
  name: string;
  age: number;
}

type PersonKeys = keyof Person;
// PersonKeys被推断为"name" | "age"

const person: Person = {
  name: "Alice",
  age: 30
};

function printKey(key: PersonKeys) {
  console.log(person[key]);
}

printKey("name"); // 正确：输出 Alice
printKey("age");  // 正确：输出 30

keyof与类一起使用：

class Animal {
  name: string;
  age: number;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
}

type AnimalKeys = keyof Animal;
// AnimalKeys被推断为"name" | "age"

const animal = new Animal("Dog", 5);
function printAnimalKey(key: AnimalKeys) {
  console.log(animal[key]);
}

printAnimalKey("name"); // 正确：输出 Dog

实际应用

keyof在处理配置对象、状态管理或任何需要动态属性名的场景中非常有用。

配置对象的动态访问：

interface Config {
  host: string;
  port: number;
  enabled: boolean;
}

type ConfigKey = keyof Config;

const config: Config = {
  host: "localhost",
  port: 8080,
  enabled: true
};

function getPropertyValue(key: ConfigKey) {
  return config[key];
}

console.log(getPropertyValue("port")); // 正确：输出 8080