首页
学习
活动
专区
圈层
工具
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Typescript + keyof。声明一个对象转换

TypeScript 中的 keyof 关键字用于获取某种类型的所有键的联合类型。当你想要创建一个函数,该函数接受一个对象和一个键,并返回该键对应的值时,keyof 就非常有用。

基础概念

keyof 是 TypeScript 的索引访问类型,它允许你从一个类型中提取键的类型。例如,如果你有一个对象类型 Person,你可以使用 keyof Person 来获取所有可能的键的类型。

类型声明示例

假设我们有一个 Person 接口:

代码语言:txt
复制
interface Person {
  name: string;
  age: number;
  email: string;
}

我们可以使用 keyof 来创建一个函数,该函数接受一个 Person 对象和一个键,并返回对应的值:

代码语言:txt
复制
function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}

在这个函数中,T 是任意类型,KT 的键的联合类型。函数返回的是 T[K],即 obj[key] 的类型。

应用场景

这种模式在处理通用函数时非常有用,尤其是在需要根据键来访问对象属性的情况下。例如,你可能有一个通用的数据获取函数,它可以用于任何对象:

代码语言:txt
复制
const person: Person = {
  name: 'Alice',
  age: 30,
  email: 'alice@example.com'
};

const name = getProperty(person, 'name'); // name 的类型是 string
const age = getProperty(person, 'age');   // age 的类型是 number

遇到的问题及解决方法

如果你在使用 keyof 时遇到问题,可能是因为 TypeScript 无法正确推断出键的类型。这通常发生在泛型参数没有被正确约束的情况下。确保你的泛型参数 TK 被正确地约束和使用。

例如,如果你尝试使用一个不存在的键,TypeScript 应该会给出错误提示:

代码语言:txt
复制
const invalid = getProperty(person, 'invalidKey'); // 错误:'invalidKey' 不在 'name' | 'age' | 'email' 中

如果你确实需要处理可能不存在的键,你可以使用可选链或者默认值来避免运行时错误:

代码语言:txt
复制
function getPropertyOrDefault<T, K extends keyof T>(obj: T, key: K, defaultValue: T[K]): T[K] {
  return obj[key] ?? defaultValue;
}

在这个改进的函数中,如果 obj[key]undefined,则会返回 defaultValue

总结

keyof 是 TypeScript 中一个强大的工具,它允许你创建灵活且类型安全的函数。通过正确使用泛型和索引访问类型,你可以编写出既通用又健壮的代码。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

29分44秒

Web前端 TS教程 09.TypeScript中对象和函数的类型声明 学习猿地

9分2秒

044.go的接口入门

4分36秒

PS小白教程:如何在Photoshop中制作雨天玻璃文字效果?

领券
首页
学习
活动
专区
圈层
工具