解锁 TypeScript Record 的奇妙用法:轻松搞定键值对!

news2024/11/13 7:55:48

在没有非常了解 Record 之前,定义对象的类型,一般使用 interface。它是 TS 中定义数据结构的一种方式,用来描述对象的形状、函数类型、类的结构等。

// 基本用法
interface User {
  name: string;
  age: number;
  isAdmin: boolean;
}

const user: User = {
  name: "Alice",
  age: 30,
  isAdmin: true,
};

而在 TypeScript 中,提供了一个实用工具类型 --- Record,用于构建对象类型的映射。它允许我们创建一个对象类型,其中所有键的类型和值的类型都支持自定义。

1. 基本用法

Record<K, T> 类型有两个参数:

- K:键的类型(通常是 string、number 或 symbol,或者它们的联合类型)

- V:值的类型

举个 🌰

type UserRoles = 'admin' | 'user' | 'guest';
type RolePermissions = Record<UserRoles, string[]>;

const permissions: RolePermissions = {
  admin: ['read', 'write', 'delete'],
  user: ['read', 'write'],
  guest: ['read']
};

Record<UserRoles, string[]> 定义一个对象类型,其中键必须是 'admin'、'user' 或者 guest',而值是字符串数组。

2. 注意事项

1、键的类型

Record<K, T> 要求键的类型必须是 string、number 或 symbol 类型的子类型。因此不能使用 boolean 或 自定义对象作为键类型。

错误 🌰

type InvalidRecord = Record<boolean, string>;

2、覆盖问题

如果 K 类型是联合类型,Record 会要求每个键都必须出现在对象中。这意味着即使我们只需要部分键,但是必须声明所有键。

举个 🌰

type Status = 'success' | 'error' | 'pending';
const statusMessages: Record<Status, string> = {
  success: 'Operation was successful',
  error: 'There was an error',
  pending: 'Operation is pending',
};

若是某一项不写,vscode 会给与提示信息。

3. 与 interface 对比

1、联系

二者都可用于描述对象结构,确保对象属性符合指定类型。

2、区别

1)用途与场景

如果需要定义一个具有复杂结构、方法或需要被多个类实现的类型,选择 interface。

如果是用来定义一组键值对,尤其是当键的类型可以枚举或确定是,选择 Record 更加简洁。

2)扩展性

interface 可扩展,支持继承,通过 extends 关键字扩展已有接口,从而增加或修改属性。

Record 不可扩展,只是一个工具类型。

举个 🌰

interface Animal {
  name: string;
}
interface Dog extends Animal {
  breed: string;
}
const myDog: Dog = {
  name: "Buddy",
  breed: "Golden Retriever"
};

Record 无法直接扩展,但可以使用交叉类型(&)将 Record 和另一个类型结合。

type Animal = {
  name: string;
};
type Dog = Record<"breed", string> & Animal;
const myDog: Dog = {
  name: "Buddy",
  breed: "Golden Retriever"
};

3)描述方法

Record 不能描述对象的方法,仅用于定义键值对类型,因此定义方法需要使用 interface。

interface Person {
  name: string;
  getName(): string;
  setName(value: string): void;
}

let person: Person = {
  name: "Alice",
  getName: function () {
    return this.name;
  },
  setName: function (value: string) {
    this.name = value;
  }
};

4)声明合并

TypeScript 支持接口的声明合并,这意味同名接口会自动合并属性,而 Record 做不到。

举个 🌰

// 假设我们有一个接口
interface LibraryBook {
  title: string;
  author: string;
}

// 继续扩展这个接口
interface LibraryBook {
  publishedYear: number;
}

// 现在 LibraryBook 接口同时拥有了 title, author 和 publishedYear 属性
// Record 不支持声明合并
type BookRecord = Record<string, any>;

// 下面的声明不会合并到 BookRecord,而是创建了一个新的类型别名
type BookRecord = {
  publishedYear: number;
};

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2075730.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

抖音ip地址与实际地址不符是怎么回事

在数字化时代&#xff0c;社交媒体已成为人们日常生活不可或缺的一部分&#xff0c;而抖音作为其中的佼佼者&#xff0c;更是吸引了数以亿计的用户。然而&#xff0c;在使用抖音的过程中&#xff0c;不少用户发现了一个有趣而又令人困惑的现象&#xff1a;抖音显示的IP地址与实…

趣味算法------煤球数目

目录 前言&#xff1a; 题目描述&#xff1a; 解题思路&#xff1a; 具体代码&#xff1a; 前言&#xff1a; 数列在数学中是一个非常基础且重要的概念&#xff0c;它指的是按照一定顺序排列的一系列数。数列中的每一个数被称为该数列的项。 数列可以分为有限数列和无限数列…

7 nestjs 环境变量

安装 pnpm i --save nestjs/confignestjs/config 内部使用 dotenv 实现。 配置 一般会在根模块AppModal中导入&#xff0c;并使用.forRoot()静态方法导入它的配置 import { Module } from nestjs/common; import { ConfigModule } from nestjs/config; ​ Module({imports: …

降低游戏直播软件开发风险:自建团队、外包公司与现成源码

随着游戏直播行业的快速发展&#xff0c;越来越多的企业和个人开始涉足这一领域。然而&#xff0c;在游戏直播软件的开发过程中&#xff0c;选择合适的开发模式对于降低供应链风险至关重要。本文将探讨三种主要的游戏直播软件开发模式&#xff0c;并分析它们各自的风险管理策略…

设计模式篇(行为型模式 - DesignPattern)(持续更新迭代)(图片待加载)

目录 一、模版方法模式&#xff08;制作豆浆问题&#xff09; 1. 豆浆制作问题 2. 模板方法模式 2.1. 基本介绍 2.2. 代码实现 2.3. 钩子方法 2.4. 应用案例 应用一&#xff1a;Android中View的draw 应用二&#xff1a;Spring 框架应用的源码分析 2.5. 注意事项和细节…

泰国中小企业局局长率考察团到访深兰科技

继泰国社会发展和人类安全部考察团的访问之后&#xff0c;深兰科技本周迎来了第二波泰国政府考察团的莅临。 2024年8月23日&#xff0c;泰国中小企业促进局局长巴尼塔西那瓦女士率领泰国东盟企业家协会、泰国法政大学及泰国企业家代表团访问了深兰科技集团总部。深兰科技集团董…

卡牌抽卡机小程序搭建,探索新鲜有趣的拆卡体验

卡牌作为一种新的潮玩方式&#xff0c;市场热度逐渐提升&#xff0c;在各大社交平台上&#xff0c;拆卡的话题层出不穷&#xff0c;各种卡牌迅速走红&#xff0c;成为了当下“顶流”&#xff0c;吸引了众多的消费者&#xff01;卡牌的价格低&#xff0c;还涉及到了动漫等各个热…

电商行业为什么要做私域?

有伙伴提到&#xff0c;他们所在的电商企业是否有必要进行私域运营&#xff0c;担心投入太大。 实际上&#xff0c;私域运营对于电商企业来说是非常有必要的。它是企业的用户数据资产&#xff0c;关乎着企业未来的发展。私域运营能够帮助企业更好地了解用户需求&#xff0c;提…

Vulkan入门系列17 - 多重采样( Multisampling)

一:概述 我们的程序现在可以加载多个级别的纹理,从而解决了在渲染远离观察者的物体时出现的伪影问题。现在图像变得平滑多了,但仔细观察,你会发现绘制的几何图形边缘呈现锯齿状。这在我们早期渲染一个四边形的程序中尤为明显: 这种不希望有的效果被称为 “锯齿”,…

2024高质量:备战金九银十的Java八股文+场景题,看完这篇就够了!

前言 又到一年金九银十面试跳槽季&#xff0c;你准备好了吗&#xff1f; 今天为大家整理了目前互联网出现率最高的大厂面试题&#xff0c;所谓八股文也就是指文章的八个部分&#xff0c;文体有固定格式:由破题、承题、起讲、入题、起股、中股、后股、束股八部分组成&#xff0…

Python 数据分析之Numpy学习(二)

Python 数据分析之Numpy学习&#xff08;二&#xff09; 接上文&#xff1a;Python 数据分析之Numpy学习&#xff08;一&#xff09; 四、数组的索引和切片 索引即通过一个无符号整数值获取数组里的值。Python索引是从0的位置开始。 切片即对数组里某个片段的描述。 # 载入…

虚幻5|制作玩家血量,体力(还未编辑,只用于引用)

未编写&#xff0c;仅引用 优化后&#xff1a; 把增加生命&#xff0c;减少生命&#xff0c;也可以用在体力里&#xff0c;更改如下 限制浮点&#xff0c;如果血量或体力按10来扣&#xff0c;如果你的血量降低到5&#xff0c;那么就会以5的数值来扣&#xff0c;而不会扣成-5…

如何在路由器中抓包分析

方法是在openwrt中一般都集成了tcpdump抓包工具&#xff0c;可以通过命令抓包保存为pcap文件&#xff0c;导出来后可以通过wireshark分析。 相信大部分研发人员都在windows下抓过包&#xff0c;最常用的软件就是wireshark&#xff0c;通过wireshark可以很方便的分析数据报文。抓…

理解运营商和全球网络

目录 理解运营商和全球网络 如何上网 光纤入户 购买设备 配置网络 互联网的发展 引入 国家推动 理解运营商和全球网络 如何上网 光纤入户 也就是俗称的拉网线 将光纤宽带服务直接连接到你家中 光纤是由运营商提供 通过玻璃丝传递光电信号,传进来变成模拟信号,再由调制…

【计算机网络】socket网络编程 --- 实现一些简易UDP网络程序

&#x1f466;个人主页&#xff1a;Weraphael ✍&#x1f3fb;作者简介&#xff1a;目前正在学习c和算法 ✈️专栏&#xff1a;Linux &#x1f40b; 希望大家多多支持&#xff0c;咱一起进步&#xff01;&#x1f601; 如果文章有啥瑕疵&#xff0c;希望大佬指点一二 如果文章对…

笔记整理—uboot启动过程(6)env_init与init_sequence总结

上一章说到uboot的BL2部分板级初始化&#xff0c;这一章将继续对uboot的环境变量初始化内容进行说明。 env_init&#xff0c;顾名思义这是与环境变量相关的初始化。env_init有许多个&#xff0c;因为uboot支持不同的启动介质&#xff08;不同的芯片或开发板&#xff09;。其中i…

Android - 音频参数合入

音频参数宏观来看分为两部分&#xff0c;audio和music。不管是哪个平台都需要分别合入这两部分。 A10 music参数 相关工程师调试后会提供 audio_para 文件&#xff0c;将该文件替换至对应工程下的文件编译即可 例: device/sprd/sharkle/sl8541e_1h10_32b/rootdir/system/et…

练习题 — for循环:数一数有几个字母a? 加油呀

昨天的知识点今天复习了一遍&#xff0c;感觉效果还不错奥&#xff01; 案例题&#xff1a;数一数有几个字母a&#xff1f; count 0 name "itheima is a brand of itcast" for x in name:if x "a":count 1 print(count)#4 完结 &#x1f389; 继续更…

不会用AI?那是你不懂提示词工程!一文读懂提示词,三个原则轻松使用AI

现在市场充斥着大量的AI工具&#xff0c;但是大概80%的人都是把他当作一个搜索引擎&#xff0c;最近小编接到很多后台私信&#xff0c;总结了一下&#xff1a; 1、AI根本没用&#xff1b; 2、AI给出的东西&#xff0c;就是模版&#xff1b; 3、AI给不了想要的内容 这里就有…

PCB中焊盘的注意事项

这种不要在焊盘边上打过孔&#xff0c;不然焊盘损坏修都没法修&#xff1a; 把连接焊盘的飞线拉远点&#xff0c;再打过孔&#xff1a;