深入理解 TypeScript 中的 Keyof 运算符，让你的代码更安全、更灵活！

keyof 运算符是在 TypeScript 2.1 版本中引入的。这个关键字已经成为 TypeScript 中高级类型的基石，并在代码中经常使用。它被称为索引查询运算符，因为该关键字会查询 keyof 后指定的类型。索引基类型查询从属性及其相关元素（如默认关键字及其数据类型）中获取值和属性。

一、如何定义 KeyOf 运算符

在 TypeScript 中，keyof 运算符用于获取用户定义的值。它主要用于泛型，格式类似于联合运算符及其属性。keyof 运算符会检索用户指定的值的索引。这种运算符可以用于如集合和类等对象，通过键值对来存储和检索数据。使用 map 实例对象的 object.keys() 方法，我们可以获取存储在内存中的键。

实例代码解析

让我们通过一个示例代码来更直观地理解 keyof 运算符的用法：

class DemoClass {
    // 定义示例属性
    name: string;
    age: number;
    location: string;
}

// 使用 var 或 let 定义变量，并使用 keyof 关键字
var variableName: keyof DemoClass;
variableName = "name"; // 示例赋值

let anotherVariableName: keyof DemoClass;
anotherVariableName = "age"; // 示例赋值

在上面的代码片段中，我们创建了一个名为 DemoClass 的类，并定义了三个属性：name、age 和 location。随后，我们使用 var 或 let 定义了两个变量 variableName 和 anotherVariableName，并使用 keyof 关键字调用 DemoClass。当我们为变量赋值时，TypeScript 会确保赋值的值是 DemoClass 的有效属性之一。

二、在泛型中使用 KeyOf 运算

使用 KeyOf 运算符应用约束

在 TypeScript 中，keyof 运算符常用于在泛型函数中应用约束。让我们通过一个例子来详细了解这种用法：

function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
    return obj[key];
}

上面的函数使用了泛型来定义一个对象属性的类型。keyof T 返回的是字符串字面量类型的联合。字面量指的是赋值给常量变量的固定值。由于 K 是一个字符串字面量类型，我们使用 extends 关键字对 K 进行约束。索引操作符 obj[key] 返回属性所具有的相同类型。

实际应用

现在我们来看一下 getProperty 函数在实际代码中的使用：

type Staff = {
    name: string;
    empCode: number;
};

const manager: Staff = {
    name: 'Brian',
    empCode: 100,
};

const nameType = getProperty(manager, 'name');  // 返回类型为 string
const empCodeType = getProperty(manager, 'empCode');  // 返回类型为 number
// const invalidType = getProperty(manager, 'sal');  // 编译错误

编译器会验证传递的键是否匹配类型 T 的属性名，因为我们对第二个参数应用了类型约束。如果我们尝试传递一个无效的键，比如 sal，编译器会报错。

手动定义联合类型

在不使用 keyof 运算符时，我们也可以手动定义联合类型：

type keyProp = 'name' | 'empCode';

function getProperty<T, K extends keyProp>(obj: T, key: K): T[K] {
    return obj[key];
}

尽管这种手动方式应用了相同类型的约束，但这种方法的可维护性较差。类型定义会重复，如果原始类型发生变化，手动定义的类型不会自动更新。

三、 KeyOf 与映射类型的结合使用

在 TypeScript 中，我们可以使用 keyof 运算符与映射类型结合，将现有类型转换为新类型。映射类型基于索引签名，通过迭代键来定义尚未声明的属性类型。

示例解析

以下是使用 OptionsFlags 映射类型转换 FeatureFlags 类型的例子：

type OptionsFlags<T> = {
    [Property in keyof T]: boolean;
};

// 使用 OptionsFlags
type FeatureFlags = {
    readingMode: () => void;
    loggedUserProfile: () => void;
};

type UpdatedFeatures = OptionsFlags<FeatureFlags>;

输出结果：

type UpdatedFeatures = {
    readingMode: boolean;
    loggedUserProfile: boolean;
}

在上面的代码片段中，OptionsFlags 被定义为一个包含类型参数 T 的泛型类型。[Property in keyof T] 定义了对类型 T 的属性名称的迭代，方括号表示索引签名语法。因此，OptionsFlags 会将所有 T 类型的属性值重新映射为 boolean 类型。

应用场景

映射类型在实际开发中非常有用，尤其是在需要根据某种规则批量修改类型结构时。例如：

将所有属性设置为可选：

type Partial<T> = {
    [P in keyof T]?: T[P];
};

将所有属性设置为只读：

type Readonly<T> = {
    [P in keyof T]: readonly T[P];
};

四、 KeyOf 运算符与显式键

使用 KeyOf 运算符创建联合类型

在 TypeScript 中，当我们在具有显式键的对象类型上使用 keyof 运算符时，它会创建一个联合类型。下面是一个具体的例子：

interface User {
    userName: string;
    id: number;
}

function userData(user: User, property: keyof User) {
    console.log(`Print user information ${property}: "${user[property]}"`);
}

let user = {
    userName: "Karl",
    id: 100
};

userData(user, "userName");

输出结果

Print user information userName: "Karl"

在上面的代码中，我们定义了一个 User 接口和一个 userData 函数。函数接受一个 User 对象和一个 User 类型的属性键，并打印相应的用户信息。

应用场景

keyof 运算符在实际开发中有很多应用场景，特别是在处理动态属性访问和确保类型安全时。例如：

• 动态访问对象属性 ： 使用 keyof 可以确保我们访问的属性在对象上是有效的，从而避免运行时错误。
• 类型安全的配置对象： 当我们处理配置对象时，可以使用 keyof 来确保配置项的名称是预定义的有效值。

通过在对象类型上使用 keyof 运算符，我们可以创建联合类型，从而确保属性访问的类型安全性。这种方式不仅提高了代码的可读性和维护性，还减少了潜在的错误。

五、索引签名与 KeyOf 运算符

在 TypeScript 中，keyof 运算符可以与索引签名一起使用，以移除索引类型。索引签名用于表示对象的类型，其中对象的值是一致的类型。

示例解析

以下是一个使用 keyof 运算符与索引签名的例子：

type stringMapDemo = {[key: string]: unknown};

function sampleStringPair(property: keyof stringMapDemo, value: string): stringMapDemo {
    return {[property]: value};
}

• 我们定义了一个类型 stringMapDemo，它表示一个对象，其中所有键都是字符串类型，所有值的类型为 unknown。
• 函数 sampleStringPair 接受两个参数：property（类型为 keyof stringMapDemo）和 value（字符串类型），并返回一个 stringMapDemo 类型的对象。通过使用 keyof stringMapDemo，我们确保传递的 property 是一个字符串类型的键。

六、使用 KeyOf 条件映射类型

条件类型用于根据条件表达式在两个声明的类型之间进行选择。结合使用 keyof 和 TypeScript 映射类型，我们可以进行条件类型映射，从而更灵活地定义类型。

示例

以下是一个使用条件类型和 keyof 进行条件映射的例子：

type OptionsFlags<T> = {
    [Property in keyof T]: T[Property] extends Function ? T[Property] : boolean
};

type DemoFeatures = {
    readingMode: () => void;
    loggedUserProfile: () => void;
    loginPassword: string;
    userName: string;
};

type Features = OptionsFlags<DemoFeatures>;

运行后 Features 的类型结构如下

type Features = {
    readingMode: () => void;
    loggedUserProfile: () => void;
    loginPassword: boolean;
    userName: boolean;
}

代码解析

• 在 OptionsFlags 类型中，我们使用条件类型 T[Property] extends Function ? T[Property] : boolean 来决定每个属性的类型。如果属性是函数类型，则保持不变；否则，将其映射为 boolean 类型。
• DemoFeatures 类型包含了两个方法（readingMode 和 loggedUserProfile）和两个字符串属性（loginPassword 和 userName）。
• 我们使用 OptionsFlags 来定义新类型 Features。通过条件映射，Features 类型中的方法保持不变，而字符串属性被映射为 boolean 类型。

应用场景

条件映射类型在处理复杂类型转换时非常有用，尤其是当我们需要根据属性类型进行动态转换时。例如：

• 动态类型转换： 根据属性类型动态决定新类型，可以用于配置、表单验证等场景。
• 类型安全的属性转换： 通过条件映射类型，我们可以确保类型转换的安全性，并自动反映类型的变化。

七、使用 Keyof 和 Utility Types

实用类型是一组内置的映射类型，可以帮助我们简化和重构类型定义。下面我们来看几个使用 keyof 和实用类型的例子。

Record 类型

Record 是 TypeScript 提供的实用类型，用于将所有属性键映射到指定的类型 T。

type Record<K extends keyof any, T> = {
    [P in K]: T;
};

示例

假设我们有一个 FeatureFlags 类型：

type FeatureFlags = {
    readingMode: () => void;
    loggedUserProfile: () => void;
    loginPassword: string;
    userName: string;
};

我们可以使用 Record 实用类型将所有属性映射为 boolean 类型：

type Features = Record<keyof FeatureFlags, boolean>;

// 结果类型
type Features = {
    readingMode: boolean;
    loggedUserProfile: boolean;
    loginPassword: boolean;
    userName: boolean;
};

Record 实际应用场景

在这个例子中，我们使用了 TypeScript 的 Record 实用类型来创建一个映射，该映射将 Status 枚举的值映射到具有特定结构的对象。让我们详细解释这个示例。

定义 Status 枚举

首先，我们假设有一个 Status 枚举：

enum Status {
    OPEN = "OPEN",
    STARTED = "STARTED",
    CLOSED = "CLOSED"
}

定义 Props 接口

然后，我们定义了一个接口 Props，其中包含一个 status 属性，其类型为 Status 枚举：

interface Props {
    status: Status;
}

使用 Record 定义 statusMap

接下来，我们使用 Record 实用类型定义了一个 statusMap 对象，该对象将 Status 枚举的每个值映射到一个具有 label 和 color 属性的对象：

const statusMap: Record<Status, { label: string; color: "bg-red-400" | "bg-blue-400" | "bg-green-400" }> = {
    OPEN: { label: "Open", color: "bg-red-400" },
    STARTED: { label: "Started", color: "bg-blue-400" },
    CLOSED: { label: "Closed", color: "bg-green-400" },
};

组件调用

const TicketStatusBadge: React.FC<Props> = ({ status }) => {
    return (
        <Badge className={`
            ${statusMap[status].color} 
            text-background
            hover:${statusMap[status].color}
        `}>
            {statusMap[status].label}
        </Badge>
    );
};

解析

• Record类型将 Status 枚举的每个值映射到一个对象，该对象具有 label 属性（字符串类型）和 color 属性（特定字符串字面量类型）。
• statusMap 对象符合 Record 类型定义，确保每个 Status 枚举值都映射到一个具有 label 和 color 属性的对象。

这个模式在实际开发中非常有用，特别是在需要根据某些状态（如枚举）来确定显示样式或标签时。

Pick 类型

Pick 是另一个实用类型，它允许我们从一个对象类型中选择一个或多个属性，并生成一个包含这些属性的新类型。

type Pick<T, K extends keyof T> = {
    [P in K]: T[P];
};

示例

假设我们有一个 User 类型：

type User = {
    id: number;
    name: string;
    age: number;
    email: string;
};

我们可以使用 Pick 类型选择 id 和 name 属性：

type UserPreview = Pick<User, 'id' | 'name'>;

// 结果类型
type UserPreview = {
    id: number;
    name: string;
};

在这个例子中，UserPreview 类型只包含 id 和 name 属性。

通过使用 TypeScript 的实用类型，如 Record 和 Pick，我们可以轻松地重构和简化类型定义。结合 keyof 运算符，我们可以确保类型的灵活性和安全性。

结束

TypeScript 的 keyof 运算符虽然小巧，但却是 TypeScript 机制中不可或缺的一环。当我们将 keyof 与 TypeScript 的其他工具结合使用时，可以提供良好的类型约束，从而提升代码的类型安全性。

keyof 类型注解用于提取对象的键。通过 object.keys() 方法，我们可以检索键的索引及其值。在处理企业级应用程序时，用户可以轻松地检索数据。

在本文中，我们探讨了如何在 TypeScript 泛型、映射类型、显式键、索引签名、条件映射类型和实用类型中使用 keyof 运算符。希望这篇文章能为你提供有关 keyof 关键字及其在 TypeScript 代码中的重要性的相关信息。

如果你觉得本文对你有所帮助，请分享给你的朋友，并在评论区留下你的看法和问题。关注我的公众号「前端达人」，获取更多关于 TypeScript 和其他前沿技术的精彩内容。让我们一起写出更优雅、更健壮的代码！