TS体操类型学习记录
Easy
1. Easy - 4 - Pick
从类型 T 中选出符合 K 的属性,构造一个新的类型
type MyPick<T, K extends keyof T> = {
[key in K]: T[key]
}
keyof是 TypeScript 中的一个关键字,用于获取一个类型的所有属性名组成的联合类型。extends可以用于约束泛型类型参数、定义类型继承关系和条件类型的判断。- 在映射类型中,可以通过
in关键字遍历联合类型,可以用于遍历一个类型的属性名(需要通过keyof获取属性名组成的联合类型),并对每个属性进行相应的操作。
2. Easy - 7 - Readonly
泛型 Readonly<T> 会接收一个泛型参数,并返回一个完全一样的类型,只是所有属性都会是只读 (readonly) 的。
type MyReadonly<T> = {
readonly [key in keyof T]: T[key];
}
- 在 TypeScript 中,可以使用 readonly 修饰符来指定一个只读属性。
3. Easy - 11 - Tuple to Object
将一个元组类型转换为对象类型,这个对象类型的键/值和元组中的元素对应。
type TupleToObject<T extends readonly (string | number | symbol)[]> = {
[key in T[number]]: key
}
- 元组类型是 TypeScript 中的一种特殊数据类型,它允许我们定义一个固定长度和固定类型顺序的数组。
- 通过
T[number]可以获取元组T所有成员组成的联合类型。 - 加readonly 的作用,因为测试用例定义的变量都是
const,const的作如下:
const tupleNumber = [1, 2, '33'] // (string | number)[]
const tupleNumber = [1, 2, '33'] as const // readonly [1, 2, "33"]
4. Easy - 14 - First of Array
实现一个 First<T> 泛型,它接受一个数组 T 并返回它的第一个元素的类型。
// 解法一:判断数组长度是否为0
type First<T extends any[]> = T['length'] extends 0 ? never : T[0]
// 解法二:判断是否为空数组
type First<T extends any[]> = T extends [] ? never : T[0]
// 解法三:获取T所有元素类型组成的联合类型,如果为never证明为空数组
type First<T extends any[]> = T[number] extends never ? never : T[0];
// 解法四:我们可以通过 keyof T 来获取类型 T 所有键的类型组合,那么如果 '0' 是 T 的键就表示 T 是一个非空数组
type First<T extends any[]> = '0' extends keyof T ? T[0] : never;
// 解法五:infer进行模式匹配
type First<T extends any[]> = T extends [infer A, ...infer _rest] ? A : never
- 在 TS 中
A extends B ? C : D的意思是“如果A可以赋值给B,那么类型就是C,否则就是D”。 - T[0] 获取数组
T下标为 0 的元素类型 - 在 TS 中,我们通过 extends 和 infer 可以实现一个类似于模式匹配的效果,
- 其中 ...infer _rest 是我们对元组类型使用的扩展运算,在这里用于表示剩余元素。
5. Easy - 18 - Length of Tuple
创建一个Length泛型,这个泛型接受一个只读的元组,返回这个元组的长度。
type Length<T extends readonly unknown[]> = T['length']
- 注意必须是
const的类型,否则长度类型为number
6. Easy - 43 - Exclude
从联合类型 T 中排除 U 中的类型,来构造一个新的类型。
type MyExclude<T, U> = T extends U ? never : T;
- 当
T extends U ? ...中的T为联合类型时,会把联合类型中的每一个类型单独进行判断,然后再把结果组合成一个联合类型返回。 - 如果你想避免这种行为,那么使用 [] 包裹你的类型参数即可,注意在 extends 关键字的两侧都需要:
[T] extends [U] ? ...
7. Easy - 189 - Awaited
假如我们有一个 Promise 对象,这个 Promise 对象会返回一个类型。在 TS 中,我们用 Promise 中的 T 来描述这个 Promise 返回的类型。请你实现一个类型,可以获取这个类型。
interface Thenable<T> {
then: (onfulfilled: (arg: T) => any) => any
}
type MyAwaited<T extends Promise<any> | Thenable<any>> = T extends Promise<infer A> | Thenable<infer A>
? A extends Promise<infer _X> ? MyAwaited<A> : A
: never
8. Easy - 268 - IF
实现一个 IF 类型,它接收一个条件类型 C ,一个判断为真时的返回类型 T ,以及一个判断为假时的返回类型 F。 C 只能是 true 或者 false, T 和 F 可以是任意类型。
type If<C extends boolean, T, F> = C extends true ? T : F;
9. Easy - 533 - Concat
在类型系统里实现 JavaScript 内置的 Array.concat 方法,这个类型接受两个参数,返回的新数组类型应该按照输入参数从左到右的顺序合并为一个新的数组。
type Concat<T extends any[], U extends any[]> = [...T, ...U]
- 在 TS 中,扩展语法可以对元组类型使用,用法类似于在 JS 中对值的使用
10. Easy - 898 - Includes ※
在类型系统里实现 JavaScript 的 Array.includes 方法,这个类型接受两个参数,返回的类型要么是 true 要么是 false。
type Equal<X, Y> = (<T>() => T extends X ? 1 : 2) extends <T>() => T extends Y ? 1 : 2
? true
: false;
type Includes<T extends readonly unknown[], U> =
T extends [infer F, ...infer Rest]
? Equal<F, U> extends true ? true : Includes<Rest, U>
: false;
- Equal 实现原理很复杂,暂时搞不懂,记住得了
11. Easy - 3057 - Push
type Push<T extends unknown[], U> = [...T, U]
12. Easy - 3060 - Unshift
type Unshift<T extends unknown[], U> = [U, ...T]
13. Easy - 3312 - Parameters
实现内置的 Parameters 类型
type MyParameters<T extends (...args: any[]) => any> = T extends (...args: infer P) => any ? P : never;
- 使用
infer表示待推断的类型变量,由于...args本身已经是元组类型,因此infer P最终推导出的,也是元组类型。
Medium
1. Medium - 2 - Get Return Type
type MyReturnType<T> = T extends (...args: any) => infer R ? R : never
2. Medium - 3 - Omit *
解法一,去遍历 T 中除了 K 的键。
type MyExclude<T, P> = T extends P ? never : T;
type MyOmit<T, K extends keyof T> = {
[P in MyExclude<keyof T, K>]: T[key]
}
解法二,利用 Pick 实现,获取 T 中除了 K 的键
type MyOmit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>
解法三,直接实现
这样不对,因为不应该存在的键也会存在,只不过类型为never。
type MyOmit<T, K extends keyof T> = {
[P in keyof T]: P extends K ? never : T[key]
}
要将对应的键设置为never
type MyOmit<T, K extends keyof T> = {
[P in keyof T as P extends K ? never : P]: T[P];
};
3. Medium - 3 - Readonly 2
MyReadonly2<T, K> 在 T 把 K 包含的属性置为 readonly 其余不变,不传 K 就把所有的属性变成 readonly,此时同 Readonly。
重点是 K 可以不传,所以要赋默认值。
type MyReadonly2<T, K extends keyof T = keyof T> = Readonly<Pick<T, K>> & Omit<T, K>
TS体操类型学习记录的更多相关文章
- ElasticSearch 学习记录之Text keyword 两种基本类型区别
ElasticSearch 系列文章 1 ES 入门之一 安装ElasticSearcha 2 ES 记录之如何创建一个索引映射 3 ElasticSearch 学习记录之Text keyword 两 ...
- (原)关于MEPG-2中的TS流数据格式学习
关于MEPG-2中的TS流数据格式学习 Author:lihaiping1603 原创:http://www.cnblogs.com/lihaiping/p/8572997.html 本文主要记录了, ...
- Quartz 学习记录1
原因 公司有一些批量定时任务可能需要在夜间执行,用的是quartz和spring batch两个框架.quartz是个定时任务框架,spring batch是个批处理框架. 虽然我自己的小玩意儿平时不 ...
- Java 静态内部类与非静态内部类 学习记录.
目的 为什么会有这篇文章呢,是因为我在学习各种框架的时候发现很多框架都用到了这些内部类的小技巧,虽然我平时写代码的时候基本不用,但是看别人代码的话至少要了解基本知识吧,另外到底内部类应该应用在哪些场合 ...
- UWP学习记录12-应用到应用的通信
UWP学习记录12-应用到应用的通信 1.应用间通信 “共享”合约是用户可以在应用之间快速交换数据的一种方式. 例如,用户可能希望使用社交网络应用与其好友共享网页,或者将链接保存在笔记应用中以供日后参 ...
- UWP学习记录11-设计和UI
UWP学习记录11-设计和UI 1.输入和设备 通用 Windows 平台 (UWP) 中的用户交互组合了输入和输出源(例如鼠标.键盘.笔.触摸.触摸板.语音.Cortana.控制器.手势.注视等)以 ...
- UWP学习记录8-设计和UI之控件和模式5
UWP学习记录8-设计和UI之控件和模式5 1.日历.日期和时间控件 日期和时间控件提供了标准的本地化方法,可供用户在应用中查看并设置日期和时间值. 有四个日期和时间控件可供选择,选择的依据如下: 日 ...
- UWP学习记录7-设计和UI之控件和模式4
UWP学习记录7-设计和UI之控件和模式4 1.翻转视图 使用翻转视图浏览集合中的图像或其他项目(例如相册中的照片或产品详细信息页中的项目),一次显示一个项目. 对于触摸设备,轻扫某个项将在整个集合中 ...
- UWP学习记录6-设计和UI之控件和模式3
UWP学习记录6-设计和UI之控件和模式3 1.按钮 按钮,响应用户输入和引发 Click 事件的控件. 使用<Button>就能创建一个按钮控件了.按钮是 ContentControl, ...
- UWP学习记录2-设计和UI之布局
UWP学习记录2-设计和UI之布局 1.导航基础知识 应用里,多个页面会有层次关系或者对等关系.这两种关系,通常在一个复杂应用里都会存在,而关系的选定依据: 对于对等导航,一般用选项卡(tabs)或者 ...
随机推荐
- 基于vue.js 移动可视化,拖拽生成H5系统
效果预览 功能简介 基于Vue.js(2.0)版本开发的,通过拖拽可视化的操作,生成H5的页面,类似易企秀的工具,前端展示页面运用了之前发布的 vue-animate-fullpage 插件进行动画渲 ...
- STM32开发环境配置记录——关于PlatformIO + VSCode + CubeMX的集成环境配置
前言 为什么配置这样的一个环境呢?鄙人受够了Keil5那个简陋的工作环境了,实在是用不下去,调试上很容易跟CubeMX的代码产生不协调导致调试--发布代码不一致造成的一系列问题.CubeIDE虽说 ...
- lambda表达式用法
(参数列表)->{代码块}; (int a,int b)->{return a+b;}; 本质为匿名函数 参数的类型可以省略: (a,b)->{return a+b;} 当参数只有一 ...
- vue pinia sessionstorage 数据存储不上的原因
vue pinia sessionstorage 的坑 默认的配置是开始 localStorage 如果用 sessionstorage 则发现数据存储不上 ,是因为缺少了序列化和反序列化 impor ...
- 5、SpringBoot2之整合Durid
创建名为springboot_druid的新module,过程参考3.1节 5.1.引入相关依赖 注意:虽然本文使用的是 spring boot 2.7.18 和 MySQL 5.7 ,但是出于可移植 ...
- 【RabbitMQ】05 通配符模式
需要设定交换机模式为通配符模式 Topic 在绑定规则上采用通配描述实现动态绑定 创建通配符模式的生产者 package cn.dzz.topicQueue; import com.rabbitmq. ...
- 从.net开发做到云原生运维(一)——从.net framework过渡到.net core
1. 前言 序篇讲了自己的一些感悟和经历,从这章开始就开始讲一些.net技术栈的东西了. 2. .net framework和.net core对比 .NET Framework 概述 .NET Fr ...
- 计算机论文中的SD SE是什么 ?
Standard Deviation (SD) and Standard Error (SE): 标准差和标准误差:在统计学和数据分析中常用来描述数据的分布和估计值的精确性.SD 表示标准差,SE 表 ...
- 再用国产操作系统deepin出现拖影现象
问题如题,使用deepin系统后发现不论是网页的拖动.滑动都会出现明显拖影现象,最神奇的是使用爱奇艺的客户端播放器时同样出现拖影现象. 不过这个拖影现象截图还体现不出来这个拖影的效果,估计只有录屏才可 ...
- Git报错解决:OpenSSL SSL_read: Connection was reset, errno 10054 错误解决
1.背景 最近因项目上需要,想借鉴一下spring里面的一下架构设计,在拉取spring源码是报错如下: 初步判定,估计是访问国外的网站,网速受限的原因..... 2.解决方案 打开Git命令页面,执 ...