TS设置接收的形参类型

在我们使用pinia时会接受参数,一般来说是传递两个参数

setGlobalState(...args: ObjToKeyValArray<GlobalState>) {
	this.$patch({ [args[0]]: args[1] });
}

例如此时传递的是globalStore.setGlobalState("token", "123");

那么此时的args就是["token","123"]

这里定义的ObjToKeyValArray如下

type ObjToKeyValArray<T> = {
	[K in keyof T]: [K, T[K]];
}[keyof T];

GlobalState定义的ts类型如下

export interface GlobalState {
	layout: LayoutType;
	language: LanguageType;
	maximize: boolean;
	primary: string;
	isDark: boolean;
	isGrey: boolean;
	isWeak: boolean;
	asideInverted: boolean;
	headerInverted: boolean;
	isCollapse: boolean;
	accordion: boolean;
	breadcrumb: boolean;
	breadcrumbIcon: boolean;
	tabs: boolean;
	tabsIcon: boolean;
	footer: boolean;
	token: string;
	userInfo: any;
	sysInfo: any;
	socket: any;
	personnelBoard: Person | null;
	assemblySize: AssemblySizeType;
}

解释一下上方ts定义

这段 TypeScript 代码定义了一个类型别名 `ObjToKeyValArray<T>`,它将一个对象类型 `T` 转换为由键值对数组组成的元组数组类型。让我解释一下它是如何工作的:

    1. `type ObjToKeyValArray<T>`:这部分定义了一个类型别名 `ObjToKeyValArray<T>`,它接受一个泛型参数 `T`,表示输入的对象类型。

    2. `{ [K in keyof T]: [K, T[K]] }`:这是一个映射类型(Mapped Type)。`keyof T` 表示获取对象 `T` 的所有键的联合类型。`[K in keyof T]` 使用映射类型来遍历对象 `T` 的所有键,并为每个键创建一个新的属性。

    3. 对于每个键 `K`,`[K, T[K]]` 表示一个由键和对应值组成的元组。这就是把对象的键值对转换为数组的操作。例如,如果对象 `T` 的类型是 `{ foo: string; bar: number }`,那么 `[K, T[K]]` 就会分别变成 `['foo', string]` 和 `['bar', number]`。

    4. `[keyof T]`:这部分是为了获取映射类型 `{ [K in keyof T]: [K, T[K]] }` 中所有属性的联合类型,即所有键值对数组组成的数组类型。

综上所述,`ObjToKeyValArray<T>` 接受一个对象类型 `T`,并将其转换为由该对象的所有键值对组成的元组数组类型。

相关推荐

  1. TS设置接收类型

    2024-06-06 14:10:01       7 阅读
  2. TS高级类型

    2024-06-06 14:10:01       33 阅读
  3. TS高级类型

    2024-06-06 14:10:01       7 阅读
  4. C++ 函数默认和函数重载

    2024-06-06 14:10:01       16 阅读
  5. 【C/C++】实参与区别

    2024-06-06 14:10:01       7 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-06-06 14:10:01       16 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-06-06 14:10:01       16 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-06-06 14:10:01       15 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-06-06 14:10:01       18 阅读

热门阅读

  1. 源代码防泄密--沙盒技术安全风险分析

    2024-06-06 14:10:01       9 阅读
  2. Nginx配置文件详解与实践

    2024-06-06 14:10:01       9 阅读
  3. 安全漏洞扫描工具

    2024-06-06 14:10:01       8 阅读
  4. 小游戏--跑酷

    2024-06-06 14:10:01       8 阅读
  5. Lambda 表达式练习

    2024-06-06 14:10:01       8 阅读
  6. 加入 Microsoft Build 2024 的 .NET 团队!

    2024-06-06 14:10:01       10 阅读
  7. 如何使用 Selenium 和 Beautiful Soup 抓取动态内容

    2024-06-06 14:10:01       11 阅读
  8. Eclipse语言编程:深入探索与实用技巧

    2024-06-06 14:10:01       10 阅读
  9. sql 调优

    2024-06-06 14:10:01       8 阅读
  10. SQL入门教程

    2024-06-06 14:10:01       9 阅读
  11. 数据分析------统计学知识点(三)

    2024-06-06 14:10:01       6 阅读
  12. 前端预览pdf文件(后端返回pdf文件流)

    2024-06-06 14:10:01       8 阅读
  13. react高阶组件——withRouter

    2024-06-06 14:10:01       8 阅读