【TS】1368- 秒懂 TypeScript 泛型工具类型！

阿宝哥精心准备的《轻松学 TypeScript》视频教程已经更新到第十九期了，合集播放量已达 14W+。通过形象生动的动画，让你轻松搞懂 TypeScript 的难点和核心知识点！

如果你刚接触 TypeScript 不久，在阅读 TypeScript 内置工具类型的用法和内部实现的文章时，可能会看到 Pick 工具类型，对于该类型的语法你可能会感到陌生。

type Pick<T, K extends keyof T> = {[P in K]: T[P];
};type User = {id: number;name: string;address: string;
};type PickedUser = Pick<User, "id" | "name">;

其实学习新事物一种比较好的方式是使用类比。接下来阿宝哥将借助 JavaScript 中的函数来帮助你快速理解 Pick 工具类型背后的语法。

function Pick(obj, keys) {const ret = {};for (const key of keys) {ret[key] = obj[key];}return ret;
}const user = {id: 666,name: "阿宝哥",address: "厦门",
};const PickedUser = MyPick(user, ["id", "name"]);

在以上代码中，function 是关键字用于声明函数，Pick 是函数名称，而小括号内的 obj 和 keys 是参数，大括号中定义的是函数体。

而对于 Pick 工具类型来说，type 关键字用于给类型取个别名，方便重复使用，Pick 就是类型的名称。尖括号内的 T 和 K 属于类型参数，与 JavaScript 函数中参数的区别是类型参数存储的是类型，而 JavaScript 函数参数存储的是值。

其中 extends 是泛型约束的语法，用于约束类型的范围。大括号中是该工具类型的具体实现，它使用了 TypeScript 映射类型的语法。

其实，你可以把 TypeScript 内置的工具类型理解成特殊的函数，它们被用于处理 TypeScript 中存在的类型。调用工具类型的方式与调用 JavaScript 函数的区别是使用的是尖括号。

最后，为了便于大家理解，阿宝哥以图片的形式来演示一下 Pick 工具类型的执行过程。

如果你想详细了解映射类型，可以观看 “用了 TS 映射类型，同事直呼内行！” 这篇文章。

扫码查看 轻松学 TypeScript 系列视频教程

（目前已更新 19 期）

你喜欢以这种形式学 TS 么？喜欢的话，记得点赞与收藏哟。

【TS】1368- 秒懂 TypeScript 泛型工具类型！相关推荐

TypeScript 实用工具类型之 Pick 类型
TypeScript 实用工具类型之 Pick 类型 TypeScript 实用工具类型之 Pick 类型 1. 什么是对象类型转换? 2. 什么是 TypeScript Pick? 2.1 用 Pi ...
TypeScript 实用工具类型之 Partial 类型
TypeScript 实用工具类型之 Partial 类型 TypeScript 实用工具类型之 Partial 类型 1. 场景概述 2. Partial<Type> 3. 使用 Int ...
typescript （TS）进阶篇 --- 内置高阶泛型工具类型（Utility Type）
第一部分前置内容关键字 keyof 索引查询对应任何类型T,keyof T的结果为该类型上所有公有属性key的联合: interface Eg1 {name: string,readonly a ...
【前端进阶】-TypeScript高级类型 | 泛型约束、泛型接口、泛型工具类型
前言博主主页
TypeScript泛型工具
Required 将类型的属性变成必选 interface Person {name?: stringage?: numberhobby?: string[] }// 下面的类型不用定义, TypeS ...
一文讲解Typescript中工具类型
想继续深入Ts其他知识点的同学可以关注下往期文章~
实用typescript_TypeScript 泛型使用2-常见的工具类型
TypeScript 泛型使用2-常见的工具类型 hucheng91:TypeScript 泛型使用1zhuanlan.zhihu.com 接上篇,这篇梳理下TypeScript 封装了很多常见的基 ...
TypeScript里的工具类型Partial的理解用法
TypeScript里的工具类型Partial的理解用法 Partial 可以快速把某个接口类型中定义的属性类型变成可选的(Optional): 其实Partial源码很简单 Partial 可以快速 ...
【TS】546- 掌握 TS 这些工具类型，让你开发事半功倍
创建了一个"重学TypeScript"的微信群,想加群的小伙伴,加我微信 "semlinker",备注重学TS. 一.类型别名 TypeScript 提供了为类 ...

【TS】1368- 秒懂 TypeScript 泛型工具类型！

【TS】1368- 秒懂 TypeScript 泛型工具类型！相关推荐

最新文章

热门文章