TypeScript中约束泛型对象键值类型并实现智能提示

本文深入探讨如何在typescript中为泛型函数约束对象键的类型，使其仅接受特定值类型的键，并同时保留ide的智能提示功能。通过介绍条件类型、映射类型和泛型约束，文章展示了如何构建强大的类型工具，确保代码的类型安全和开发效率。

挑战：泛型函数中键的类型约束问题

在TypeScript开发中，我们经常需要编写能够处理各种类型对象的泛型函数。一个常见的需求是，从一个泛型对象 T 中提取某个属性 K 的值，并确保这个属性的值是特定类型（例如 string）。然而，直接实现这样的功能会遇到类型安全问题，并且会丢失IDE的智能提示。

考虑以下尝试：

function extractStringValue<T extends object, K extends keyof T>(obj: T, key: K): string {
    // 错误: Type 'T[K]' is not assignable to type 'string'.
    //   Type 'T[K]' could be instantiated with an arbitrary type which is not a subtype of 'string'.
    return obj[key]; 
}

// 期望的使用方式
const myObj = { stringKey: "hi", boolKey: false, numKey: 123 };
const stringVal = extractStringValue(myObj, "stringKey"); // 期望通过
const stringVal2 = extractStringValue(myObj, "boolKey");  // 期望报错
const stringVal3 = extractStringValue(myObj, "numKey");   // 期望报错

上述代码中，extractStringValue 函数的目的是返回一个 string 类型的值。然而，K extends keyof T 意味着 K 可以是 T 中任何键的字面量类型，而 T[K] 可能是 string、boolean、number 或其他类型。TypeScript编译器无法保证 T[K] 总是 string 类型，因此会抛出类型错误。此外，在调用 extractStringValue 时，传入 key 参数时，IDE会提示 myObj 的所有键（"stringKey"、"boolKey"、"numKey"），而我们希望它只提示那些值为 string 的键。

解决方案：结合条件类型、映射类型与泛型约束

为了解决上述问题，我们需要一种机制来：

1. 筛选出对象 T 中那些值为 string 类型的键。
2. 将这个筛选后的键类型作为泛型参数 K 的约束。
3. 同时确保函数内部的类型推断正确，以满足返回值类型。

我们可以通过定义一个高级的实用类型 StringKeys<T> 来实现这一点。

1. 定义 StringKeys<T> 实用类型

StringKeys<T> 类型用于从对象 T 的所有键中，筛选出那些对应值类型为 string 的键。

type StringKeys<T> = Exclude<{
    [P in keyof T]: T[P] extends string ? P : never
}[keyof T], undefined>;

让我们逐步解析这个类型：

• [P in keyof T]: ...: 这是一个映射类型。它遍历 T 的所有属性键 P。
• T[P] extends string ? P : never: 这是一个条件类型。对于每个属性 P，如果 T[P] 的类型可以赋值给 string，那么这个映射类型中的 P 对应的值就是 P 本身（一个字面量类型）；否则，它对应的值是 never。never 是TypeScript中的底层类型，表示不可能存在的值。
  • 例如，如果 T = { stringKey: "hi", boolKey: false }，那么这个映射类型会变成 { stringKey: "stringKey", boolKey: never }。
• [keyof T]: 这一步是对上面映射类型的索引访问。它会获取映射类型中所有属性值的联合类型。
  • 继续上面的例子，{ stringKey: "stringKey", boolKey: never }[keyof T] 结果是 "stringKey" | never。由于 never 在联合类型中会被“吸收”，所以最终结果是 "stringKey"。
• Exclude<..., undefined>: 这是一个内置的实用类型，用于从联合类型中排除特定类型。在这里，它确保最终的键类型不会包含 undefined。尽管在当前构造中，undefined 不太可能直接出现，但这是一个常见的防御性编程实践，用于清理可能包含 undefined 的复杂联合类型。

通过这个 StringKeys<T> 类型，我们成功地从 keyof T 中提取出了所有值为 string 的键的字面量联合类型。

天工大模型

中国首个对标ChatGPT的双千亿级大语言模型

115

查看详情

2. 改造 extractStringValue 函数

现在，我们可以使用 StringKeys<T> 来约束泛型函数 extractStringValue 的 key 参数。

function extractStringValue<T extends Record<K, string>, K extends StringKeys<T>>(
  obj: T,
  key: K,
): string {
  return obj[key]; 
}

// 示例用法
const myObj = { stringKey: "hi", boolKey: false, numKey: 123 };

const stringVal1 = extractStringValue(myObj, "stringKey"); // OK
console.log(stringVal1); // 输出 "hi"

// 错误: Argument of type '"boolKey"' is not assignable to parameter of type '"stringKey"'.
// const stringVal2 = extractStringValue(myObj, "boolKey"); 

// 错误: Argument of type '"numKey"' is not assignable to parameter of type '"stringKey"'.
// const stringVal3 = extractStringValue(myObj, "numKey"); 

// IDE智能提示现在只会显示 "stringKey"
// extractStringValue(myObj, ""); // 尝试输入时，IDE只会提示 "stringKey"

这里有两个关键的泛型约束：

• K extends StringKeys<T>: 这确保了传入的 key 参数 K 只能是 T 中值为 string 的键。这是实现智能提示和初步类型安全的关键。
• T extends Record<K, string>: 这个约束告诉TypeScript，对于任何有效的 K（即 StringKeys<T> 中的键），对象 T 必须拥有一个类型为 string 的 K 属性。这个约束是确保 obj[key] 的类型确实是 string，从而满足函数返回类型 string 的最终保证。

通过这两个约束的协同作用，我们不仅解决了编译器的类型错误，而且在调用函数时，IDE会根据 myObj 的实际结构，只提供 stringKey 作为 key 参数的有效选项，极大地提升了开发体验。

泛化：KeysOfType<T, O> 实用类型

上述 StringKeys<T> 模式非常有用，可以进一步泛化以匹配任何特定类型的键。我们可以创建一个 KeysOfType<T, O> 实用类型，它能从对象 T 中提取所有值类型为 O 的键。

type KeysOfType<T, O> = Exclude<{
    [P in keyof T]: T[P] extends O ? P : never
}[keyof T], undefined>;

// 基于 KeysOfType 定义特定类型的键
type StringKeys<T> = KeysOfType<T, string>;
type BooleanKeys<T> = KeysOfType<T, boolean>;
type NumberKeys<T> = KeysOfType<T, number>;

// 示例：提取布尔值键的函数
function extractBooleanValue<T extends Record<K, boolean>, K extends BooleanKeys<T>>(
  obj: T,
  key: K,
): boolean {
  return obj[key];
}

const anotherObj = { 
    name: "Alice", 
    isActive: true, 
    age: 30, 
    isAdmin: false 
};

const activeStatus = extractBooleanValue(anotherObj, "isActive"); // OK
console.log(activeStatus); // 输出 true

// 错误: Argument of type '"name"' is not assignable to parameter of type '"isActive" | "isAdmin"'.
// const nameValue = extractBooleanValue(anotherObj, "name"); 

// IDE智能提示现在只会显示 "isActive" 和 "isAdmin"
// extractBooleanValue(anotherObj, ""); // 尝试输入时，IDE只会提示 "isActive" | "isAdmin"

KeysOfType<T, O> 的引入，使得我们可以轻松地创建针对不同值类型的键筛选器，例如 BooleanKeys<T>、NumberKeys<T> 等，从而构建一系列类型安全且具备智能提示的泛型提取函数。

总结与注意事项

• 核心思想： 通过结合映射类型 ([P in keyof T]) 和条件类型 (T[P] extends O ? P : never) 来动态构建一个包含所需键字面量类型的联合类型。
• 双重约束： 在泛型函数中，需要同时使用两个约束：
  1. K extends KeysOfType<T, O>：确保 key 参数只接受符合条件的键，提供智能提示和初步类型检查。
  2. T extends Record<K, O>：确保对象 T 在传入的 K 键上确实具有 O 类型的值，从而满足函数的返回值类型。
• IDE支持： 这种模式的强大之处在于，它不仅提供了编译时的类型安全，还能让IDE在编写代码时准确地提示可用的键，极大地提升了开发效率和代码质量。
• 可扩展性： KeysOfType<T, O> 实用类型是高度可复用的，可以应用于各种需要根据值类型筛选键的场景。

通过掌握这些高级的TypeScript类型技巧，开发者可以编写出更健壮、更智能的泛型代码，充分发挥TypeScript的类型系统优势。

以上就是TypeScript中约束泛型对象键值类型并实现智能提示的详细内容，更多请关注php中文网其它相关文章！