前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >深入理解 TypeScript 中的 Record 类型及其应用

深入理解 TypeScript 中的 Record 类型及其应用

原创
作者头像
编程小妖女
发布于 2025-02-01 03:04:10
发布于 2025-02-01 03:04:10
4690
举报
文章被收录于专栏:前端开发前端开发

TypeScript 中,Record 是一个内置的泛型工具类型,它的用途是创建一个具有特定键和值类型的对象映射。这段代码定义了 Record 类型的实现,并通过简单的语言特性表达了强大的功能。

以下是代码的详细含义分析:

代码语言:typescript
AI代码解释
复制
/**
 * Construct a type with a set of properties K of type T
 */
type Record<K extends keyof any, T> = {
    [P in K]: T;
};

我们可以通过以下几步对其含义进行逐层拆解:

type Record<K extends keyof any, T>
  • 这是在定义一个类型别名 Record
  • K 是一个泛型参数,表示键的集合。
    • K extends keyof any 意味着 K 必须是可以作为对象键的类型。
    • 在 TypeScript 中,合法的对象键包括 stringnumbersymbol,而 keyof any 正是这三种类型的联合类型。
  • T 是另一个泛型参数,表示值的类型。
{ [P in K]: T; }
  • 这是一个映射类型的定义。
  • [P in K] 表示我们将遍历 K 中的每个键,创建对应的属性 P
  • T 是每个属性 P 的值类型。
  • 结果是一个对象类型,其键是 K 中的元素,值是类型 T
代码的逻辑推导
  1. Record 的输入是两个泛型参数:KT
  2. K 限制为所有可以作为对象键的类型。
  3. 对于 K 中的每个元素 P,生成一个属性 P,其类型为 T
  4. 最终返回的是一个类型,描述了具有 K 中所有键,并且值类型均为 T 的对象。
运行的示例代码

下面是一个运行示例,展示了 Record 的实际应用及效果:

代码语言:typescript
AI代码解释
复制
// 定义一个对象类型,其键是 "id" 和 "name",值类型是 string
type ExampleRecord = Record<'id' | 'name', string>;

// 使用该类型
type User = ExampleRecord;

const user: User = {
    id: `123`,
    name: `Alice`
};

console.log(user);

在这个示例中:

  • Record<'id' | 'name', string> 创建了一个类型,其键是 idname,值类型是 string
  • user 必须符合这个类型,因此需要定义 idname 属性,且它们的值都必须是字符串。
更复杂的使用场景

我们可以通过更多示例展示 Record 的灵活性。

  1. 创建动态键值映射:
代码语言:typescript
AI代码解释
复制
const dynamicKeys = [`key1`, `key2`, `key3`];
type DynamicRecord = Record<typeof dynamicKeys[number], number>;

const data: DynamicRecord = {
    key1: 10,
    key2: 20,
    key3: 30
};

console.log(data);

这里,我们从一个数组 dynamicKeys 中提取键的集合,并生成了一个值为数字的对象类型。

  1. 应用于嵌套对象类型:
代码语言:typescript
AI代码解释
复制
type NestedRecord = Record<string, Record<string, number>>;

const nestedData: NestedRecord = {
    category1: {
        item1: 100,
        item2: 200
    },
    category2: {
        item3: 300,
        item4: 400
    }
};

console.log(nestedData);

在这个示例中:

  • 外层对象的键是字符串,值是另一个 Record
  • 内层 Record 的键是字符串,值是数字。
Record 的应用场景

Record 是一种高度通用的工具类型,适用于许多场景:

  1. 静态类型的映射:为静态键集合生成严格类型。
  2. 动态键的支持:结合 TypeScript 的高级类型功能,从数组或其他结构中提取键。
  3. 深层嵌套对象的建模:配合其他工具类型(如 PartialReadonly)定义复杂对象结构。
  4. 简化类型定义:相比手动定义多个接口或类型,Record 提供了更简洁的方式。
进一步扩展
  1. 与其他工具类型结合
代码语言:typescript
AI代码解释
复制
type ReadonlyRecord = Readonly<Record<'x' | 'y', number>>;

const point: ReadonlyRecord = {
    x: 10,
    y: 20
};

// point.x = 30; // Error: Cannot assign to 'x' because it is a read-only property.

通过结合 Readonly,可以生成只读映射类型。

  1. 条件类型与 Record 的结合
代码语言:typescript
AI代码解释
复制
type ConditionalRecord<K extends keyof any, T> = {
    [P in K]: P extends string ? T : never;
};

const conditional: ConditionalRecord<'a' | 1, string> = {
    a: `hello`,
    1: `world`
};

console.log(conditional);

在这个示例中,我们引入了条件类型,为某些键赋予特殊规则。

总结

TypeScript 中的 Record 是一种灵活而强大的工具类型。通过它,我们可以快速定义具有特定键值映射关系的对象类型。其实现逻辑依赖于映射类型和泛型,是 TypeScript 类型系统的重要基础之一。通过结合其他类型工具和高级特性,Record 能进一步扩展其功能,适应各种复杂的场景。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
TypeScript的另一面:类型编程
作为前端开发的趋势之一,TypeScript 正在越来越普及,很多人像我一样写了 TS 后再也回不去了,比如写再小的demo也要用 TS(得益于ts-node[1]),JS 只有在配置文件如Webpack(实际上,接下来肯定会有用TS写配置文件的趋势,如Vite)、ESLint等时才会用到。但同样,也有部分开发者对TS持有拒绝的态度,如nodemon的作者就曾表示自己从来没有使用过TS(见 #1565[2])。但同样还有另外一部分人认为TS学习成本太高,所以一直没有开始学习的决心。
zz_jesse
2021/07/30
1.8K0
TypeScript进阶(三)类型演算与高级内置类型
TypeScript 是一种静态类型检查的 JavaScript 超集,它通过类型注解和类型推断来提供更强大的类型系统。在 TypeScript 中,类型演算是一种重要的概念,它允许我们在编译时对类型进行操作和计算。本文将深入探讨 TypeScript 类型演算的原理和应用。
can4hou6joeng4
2023/11/28
3730
分享 40 道关于 Typescript 的面试题及其答案
在进行前端技术面试的时候,我们经常会遇到TypeScript 的一些面试题,因此,今天这篇文章,我整理汇总了40道关于TypeScript 的基础知识的面试题。
前端达人
2023/11/13
1.2K0
分享 40 道关于 Typescript 的面试题及其答案
TypeScript 高级类型总结(含代码案例)
TypeScript 是一种类型化的语言,允许你指定变量、函数参数、返回的值和对象属性的类型。
疯狂的技术宅
2020/12/31
1.3K0
TypeScript中的高级类型工具类型及关键字
本文主要帮助理解 TypeScript 中的高级类型及工具类型。在实际使用 TypeScript 的开发过程中,得益于这些高级类型于工具类型,我们可以更方便的构建出我们需要的类型。
路过的那只狗
2020/11/13
2.2K0
编写TypeScript工具类型,你需要知道的知识
用 JavaScript 编写中大型程序是离不开 lodash 工具的,而用 TypeScript 编程同样离不开工具类型的帮助,工具类型就是类型版的 lodash 。简单的来说,就是把已有的类型经过类型转换构造一个新的类型。工具类型本身也是类型,得益于泛型的帮助,使其能够对类型进行抽象的处理。工具类型主要目的是简化类型编程的过程,提高生产力。
WahFung
2020/08/24
1.5K0
TS 从 0 到 1 - 泛型进阶
设计泛型是为了在成员之间提供有意义的约束,这些成员可以是:类的实例成员、类的方法、函数参数和函数返回值。
Cellinlab
2023/05/17
7950
【TypeScript 4.5】007-第 7 章 类型操纵
泛型类型、keyof 类型操作符、typeof 类型操作符、索引访问类型、条件类型、映射类型、模板字面量类型
訾博ZiBo
2025/01/06
600
深入浅出 TypeScript
本文是阅读小册 「《深入浅出 TypeScript》」 的阅读笔记,对TypeScript感兴趣的同学请继续阅读吧。
chuckQu
2022/08/19
3K0
TypeScript进阶秘籍:类型体操的108种姿势
全系列终章:经过上面的探索,我们完成了从类型操作新手到类型体操高手的蜕变。建议将本系列作为参考手册,在实际项目中持续实践与优化。TypeScript的类型系统仍在快速发展,期待你在实践中发现更多精彩用法!
Jimaks
2025/04/19
1270
这 5 个 TypeScript 的功能特征,你需要熟悉下
英文 | https://betterprogramming.pub/top-5-typescript-features-you-should-master-2358db9ab3d5
前端达人
2021/09/08
1.3K0
7个高效的TypeScript工具类型,你会用了吗?
这些工具类型能让你的代码更清晰、更简洁,同时还能减少隐藏错误的可能性。今天我们就来聊聊TypeScript中的七个高效工具类型:keyof、ReturnType、Awaited、Record、Partial、Required 和 Omit。通过实例讲解,让你轻松掌握这些强大的工具类型。
前端达人
2024/06/26
9430
7个高效的TypeScript工具类型,你会用了吗?
掌握 TypeScript:20 个提高代码质量的最佳实践
TypeScript 是一种广泛使用的开源编程语言,非常适合现代化开发。借助它先进的类型系统,TypeScript 允许开发者编写更加强健、可维护和可扩展的代码。但是,要真正发挥 TypeScript 的威力并构建高质量的项目,了解和遵循最佳实践至关重要。在本文中,我们将深入探索 TypeScript 的世界,并探讨掌握该语言的 21 个最佳实践。这些最佳实践涵盖了各种主题,并提供了如何在真实项目中应用它们的具体示例。无论你是初学者还是经验丰富的 TypeScript 开发者,本文都将提供有价值的见解和技巧,帮助你编写干净高效的代码。
前端小智@大迁世界
2023/03/17
4.4K0
TypeScript小笔记
比如各种框架的常用类型,ts中内置的常用类型,以及一些容易被忽略和遗忘的点,陆陆续续顺手把他们写到文章中记录起来。
19组清风
2021/11/15
1.1K0
TypeScript小笔记
一文看懂TypeScript工具类型
TypeScript 的工具类型,也被称作类型体操。通过本文你就知道这些工具类型的原理,并可以自己写出一些工具类型。在学习工具类型之前,我们先学学工具类型所用到的基础知识,当基础知识掌握牢固后,看懂工具类型自然水到渠成。
kai666666
2024/07/11
3980
让你的TypeScript代码更优雅,这10个特性你需要了解下
在这个技术飞速发展的时代,掌握TypeScript的这些高级功能,不仅可以让你的代码更加健壮,还能大大提升你的开发效率。赶紧来看看吧!
前端达人
2024/06/14
4230
让你的TypeScript代码更优雅,这10个特性你需要了解下
Typescript常看常新
在看了同事推荐的ts教程后,发现自己还是有很多不会的,所以整理出一些自己学到的新知识点,希望各位也能有所收获!(我就写给自己看看,不要太当回事哈哈哈
y191024
2024/01/22
2880
Typescript常看常新
深入理解 TypeScript 中的 Keyof 运算符,让你的代码更安全、更灵活!
keyof 运算符是在 TypeScript 2.1 版本中引入的。这个关键字已经成为 TypeScript 中高级类型的基石,并在代码中经常使用。它被称为索引查询运算符,因为该关键字会查询 keyof 后指定的类型。索引基类型查询从属性及其相关元素(如默认关键字及其数据类型)中获取值和属性。
前端达人
2024/06/14
5230
深入理解 TypeScript 中的 Keyof 运算符,让你的代码更安全、更灵活!
【TS】1294- 搞懂 TypeScript 中的映射类型(Mapped Types)
本文会和大家详细介绍 TypeScript 中的映射类型(Mapped Type),看完本文你将学到以下知识点:
pingan8787
2022/06/07
2.5K0
【TS】1294- 搞懂 TypeScript 中的映射类型(Mapped Types)
typescript 入门-工具类型
type 类型别名 // 为某类型指定别名 type Name = string type Age = number type Man = { name: Name age: Age } const c: Man = { name: 'c', age: 20 } keyof 对象键类型 type _Object = { [key: string]: unknown } function getKeysByObj<T extends _Object>(o: T): (keyof T)[]{
copy_left
2021/06/11
5200
相关推荐
TypeScript的另一面:类型编程
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档