学习TypeScript 之 Pick与泛型约束

何为Pick?

type Pick<T, K extends keyof T> = {[key in K]: T[key]
}

就是从一个复合类型中，取出几个想要的类型的组合，例如：

// 原始类型
interface TState {name: string;age: number;like: string[];
}
// 如果我只想要name和age怎么办，最粗暴的就是直接再定义一个（我之前就是这么搞得）
interface TSingleState {name: string;age: number;
}
// 这样的弊端是什么？就是在Tstate发生改变的时候，TSingleState并不会跟着一起改变，所以应该这么写
interface TSingleState extends Pick<TState, "name" | "age"> {};

写到这里，Pick的用法就写完了，但是会有个疑问，extends不是用来继承的么？那为什么可以写在泛型里？有没有人跟我一样的疑惑?
我去查了资料后发现，还是官方文档中有这个解释（所以还是要多看文档，官方文档大多数比外面写的好得多），以下这段内容来自于官方文档。

泛型约束《官方文档传送门》

你应该会记得之前的一个例子，我们有时候想操作某类型的一组值，并且我们知道这组值具有什么样的属性。在 loggingIdentity例子中，我们想访问arg的length属性，但是编译器并不能证明每种类型都有length属性，所以就报错了。

function loggingIdentity<T>(arg: T): T {console.log(arg.length);  // Error: T doesn't have .lengthreturn arg;
}

相比于操作any所有类型，我们想要限制函数去处理任意带有.length属性的所有类型。只要传入的类型有这个属性，我们就允许，就是说至少包含这一属性。为此，我们需要列出对于T的约束要求。

为此，我们定义一个接口来描述约束条件。创建一个包含 .length属性的接口，使用这个接口和extends关键字来实现约束：

interface Lengthwise {length: number;
}function loggingIdentity<T extends Lengthwise>(arg: T): T {console.log(arg.length);  // Now we know it has a .length property, so no more errorreturn arg;
}

现在这个泛型函数被定义了约束，因此它不再是适用于任意类型：

loggingIdentity(3);  // Error, number doesn't have a .length property

我们需要传入符合约束类型的值，必须包含必须的属性：

loggingIdentity({length: 10, value: 3});

---------------------------------文档结束--------------------------------------
这是找到的唯一一处跟我的问题比较吻合的答案了，至此我们直到了在泛型中使用extends并不是用来继承的，而是用来约束类型的。所以这个K extends keyof T，应该是说key被约束在T的key中，不能超出这个范围，否则会报错的。
不知道你们理解了么~如果没有理解的话，可以留言告诉我，我们再讨论讨论。

学习TypeScript 之 Pick与泛型约束相关推荐

TypeScript 学习笔记（四）--- 泛型（Generics）
(注明:目前泛型理解不够清晰,先照葫芦画瓢,整理一个粗略版本,后续会再次补充) 一.泛型的概念在TS中,泛型(Generics)是一种创建可复用代码的方式,类似于代码组件的概念.具体来说,就是在 ...
TypeScript泛型约束
泛型约束有了泛型之后,一个函数或容器类能处理的类型一下子扩到了无限大,似乎有点失控的感觉.所以这里又产生了一个约束的概念.我们可以声明对类型参数进行约束. 我们还拿上文中的student栗子来说,想 ...
作为前端开发，如何高效学习 TypeScript
大家好,我是若川.有朋友跟我说最近面试前端候选人,问到关于 JavaScript 的一些少见误区问题,候选人很多都没回答上来,他很诧异,一个从国际大厂出来的面试者,竟然对 JavaScript 的一些 ...
TypeScript（七）泛型、声明合并、扩展阅读
TypeScript(七)泛型.声明合并.扩展阅读文章目录 TypeScript(七)泛型.声明合并.扩展阅读 1. 泛型简单的例子多个类型参数泛型约束泛型接口泛型类泛型参数的默认类型 ...
学习TypeScript(TS)，这一篇就足够了
一.TypeScript 简介 1.什么是 TypeScript? 官方文档 TypeScript 本质上是向 JavaScript 语言添加了「可选的静态类型」和「基于类的面向对象」编程,它相当于是 ...
学习Kotlin(四)对象与泛型
推荐阅读: 学习Kotlin(一)为什么使用Kotlin 学习Kotlin(二)基本语法学习Kotlin(三)类和接口学习Kotlin(四)对象与泛型学习Kotlin(五)函数与Lambda表达 ...
深入浅出学习 TypeScript 语言
课程简介 2012年10月,微软发布了首个公开版本的 TypeScript,2013年6月19日,在经历了一个预览版之后微软发布了正式版 TypeScript 0.9.TypeScript 是 Jav ...
Java学习第十六天（泛型）
Java学习第十六天---泛型与集合第一章泛型 1.1 泛型概述 1.2 泛型类 1.3 泛型类练习---抽奖问题 1.4 泛型类的子类 1.5 泛型接口 1.6 重写泛型父类或泛型接口中方法的 ...
.NET支持的泛型约束
.NET支持的类型参数约束有以下五种: where T : struct | T必须是一个结构类型 where T : class T必须是一个类(class)类型 where T : new() | ...

学习TypeScript 之 Pick与泛型约束

泛型约束《官方文档传送门》

学习TypeScript 之 Pick与泛型约束相关推荐

最新文章

热门文章