Typescript体操类型学习1

文章目录

  • TS 类型体操练习
    • Tuple to Union
    • Tuple to Object
    • First of Array
    • Last of Array
    • Pop
    • Length of Tuple


TS 类型体操练习

Tuple to Union

Implement a generic TupleToUnion<T> which covers the values of a tuple to its values union.

TupleToUnion 的目标是将元组类型中的元素类型转换为联合类型。

type Arr = ['1', '2', '3']type Test = TupleToUnion<Arr> // expected to be '1' | '2' | '3'

实现:

type TupleToUnion<T extends any[]> = T[number];

使用索引访问类型 T[number],它会返回元组 T 中所有元素的联合类型

因为元组的索引是数字类型,所以 T[number] 表示取出元组中所有位置的类型,然后将它们合并成一个联合类型。

Tuple to Object

Given an array, transform it into an object type and the key/value must be in the provided array

将一个元组类型转换为对象类型,这个对象类型的键/值和元组中的元素对应。

const tuple = ['tesla', 'model 3', 'model X', 'model Y'] as consttype result = TupleToObject<typeof tuple> // expected { 'tesla': 'tesla', 'model 3': 'model 3', 'model X': 'model X', 'model Y': 'model Y'}

实现:

type TupleToObject<T extends readonly any[]> = {[K in T[number]]: K
}

上一题说到,T[number] 可以返回元组T中所有元素的联合类型,拿到起所有类型后,使用in 进行遍历,就可以达到 Tuple to Object 效果

First of Array

Implement a generic First<T> that takes an Array T and returns its first element’s type.

实现一个First<T>泛型,它接受一个数组T并返回它的第一个元素的类型。

type arr1 = ['a', 'b', 'c']
type arr2 = [3, 2, 1]type head1 = First<arr1> // expected to be 'a'
type head2 = First<arr2> // expected to be 3

实现:

第一反应就是直接取索引为0的一个元素类型来实现, type First<T extends any[]> = T[0];

但当遇到Expect<Equal<First<[]>, never>>:
在这里插入图片描述

所以要考虑当数组为空时,是取不到第一个元素索引的

因此最终实现:

type First<T extends any[]> = T extends [] ? never : T[0];

Last of Array

Implement a generic Last<T> that takes an Array T and returns its last element.

实现一个Last<T>泛型,它接受一个数组T并返回其最后一个元素的类型。

type arr1 = ['a', 'b', 'c']
type arr2 = [3, 2, 1]type tail1 = Last<arr1> // expected to be 'c'
type tail2 = Last<arr2> // expected to be 1

实现:

First of Array 一样, 要进行空数组判断,如果是空数组,就返回 never 类型, 表示永远不会发生;使用剩余运算,infer推断最后一个元素之前的所有元素,保留最后一个元素推断 last ,如果满足非空数组,则返回最后一个元素类型。

type Last<T extends any[]> = T extends [...infer _, infer last] ? last : never;

Pop

Implement a generic Pop<T> that takes an Array T and returns an Array without it’s last element.

实现一个泛型Pop<T>,它接受一个数组T,并返回一个由数组T的前 N-1 项(N 为数组T的长度)以相同的顺序组成的数组。

type arr1 = ['a', 'b', 'c', 'd']
type arr2 = [3, 2, 1]type re1 = Pop<arr1> // expected to be ['a', 'b', 'c']
type re2 = Pop<arr2> // expected to be [3, 2]

这里的case要求:

在这里插入图片描述

所以我们不能将空数组,直接返回never,而是返回[]类型

实现:

type Pop<T extends any[]> = T extends [...infer remain, infer last]? remain: [];

Length of Tuple

For given a tuple, you need create a generic Length, pick the length of the tuple

创建一个Length泛型,这个泛型接受一个只读的元组,返回这个元组的长度。

type tesla = ['tesla', 'model 3', 'model X', 'model Y']
type spaceX = ['FALCON 9', 'FALCON HEAVY', 'DRAGON', 'STARSHIP', 'HUMAN SPACEFLIGHT']type teslaLength = Length<tesla> // expected 4
type spaceXLength = Length<spaceX> // expected 5

实现:

在 TypeScript 中,数组是具有 length 属性的对象,该属性表示其长度, 所以可以直接这样获取元组的长度:

type Length<T extends any[]> = T["length"];

在这里插入图片描述

当我们调用 Length<typeof tesla> 时,typeof tesla 是一个只读数组。我们无法将只读数组分配给 any[] 类型,因此我们需要进一步限制 T 仅允许只读数组:


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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SDKMAN多版本SDK并行管理工具

一、简介 SDKMAN是管理多个SDK并行版本的工具&#xff0c;它提供了方便的命令行界面&#xff08;CLI&#xff09;和API&#xff0c;用于列出&#xff0c;安装&#xff0c;切换和删除候选对象。此外&#xff0c;它还为我们设置了环境变量。 它还允许开发人员安装基于JVM的SDK&…

总结jvm中GC机制(垃圾回收)

前言 本篇博客博主将介绍jvm中的GC机制&#xff0c;坐好板凳发车啦~~ 一.GC相关 1.1回收栈内存 对于虚拟机栈&#xff0c;本地方法栈这部分区域而言&#xff0c;其生命周期与相关线程相关&#xff0c;随线程而生&#xff0c;随线程而灭。并且这三个区域的内存分配与回收具有…

【深耕 Python】Data Science with Python 数据科学(7)书352页练习题

写在前面 关于数据科学环境的建立&#xff0c;可以参考我的博客&#xff1a; 【深耕 Python】Data Science with Python 数据科学&#xff08;1&#xff09;环境搭建 往期数据科学博文&#xff1a; 【深耕 Python】Data Science with Python 数据科学&#xff08;2&#xf…

OpenHarmony实战:RK3568 开发板镜像烧录指南

前言 烧录开发板是每个开发者的必修课&#xff0c;每次对系统的修改务必进行烧录测试&#xff0c;确保修改正确和不会引入新问题。 本文基于 Windows10&#xff0c;以 RK3568 开发板为例&#xff0c;指导如何烧录 OpenHarmony 镜像&#xff0c;镜像也叫固件。Hihoop&#xff…

练习 16 Web [极客大挑战 2019]LoveSQL

extractvalue(1,concat(‘~’, (‘your sql’) ) )报错注入&#xff0c;注意爆破字段的时候表名有可能是table_name不是table_schema 有登录输入框 常规尝试一下 常规的万能密码&#xff0c;返回了一个“admin的密码”&#xff1a; Hello admin&#xff01; Your password is…

【C语言】函数(涉及生命周期与作用域)

文章目录 函数&#xff08;function&#xff09;**函数的概念****函数的作用**在本阶段一般会涉及到两类函数:库函数和自定义函数自定义函数**函数的语法形式** **形参和实参****实参和形参的关系** 函数返回值**函数返回值类型说明****return 语句** 数组做函数参数**函数嵌套…

adobe stock会员开通付费付款订阅充值教程/adobe stock免费白嫖一个月

登录adobe stock的官网&#xff0c;点击你想要下载的视频&#xff0c;然后点击免费下载&#xff0c;我们点击免费试用按钮&#xff0c;可以看到非常贵&#xff0c;需要80美金一个月&#xff0c;用fomepay可以免费白嫖一个月 点击获取一张虚拟信用卡&#xff0c;就可以白嫖一个…

idea(2023.1.3)配置全局Maven环境

问题来源一&#xff1a; 1、每次在下载依赖时&#xff0c;会遇到这样的报错信息&#xff0c;报错信息如下显示&#xff1a;sun.security.provider.certpath.SunCertPathBuilderException: unable to find valid cert&#xff1b;百度结果是&#xff1a;通常表示IntelliJ IDEA …

事件队列事件循环(EventLoop) 宏任务 微任务详解 面试题

事件队列 事件循环 EventLoop 宏任务 微任务详解 一、概念二、宏任务&#xff08;多个&#xff09;、微任务&#xff08;1个&#xff09;三、Promise 的构造函数四、process.nextTick在事件循环中的处理五、vue nextTick原理 一、概念 event: 事件 loop: 循环&#xff0c;循环…

汉语语音基本特性

发音的生理基础和过程 人的发音生理机构如图 2.3.1所示,发音时由肺部收缩送出一股直流空气,经气管流至喉头声门处(声门即声带开口处),在发声之初,声门处的声带肌肉收缩,声带并拢间隙小于 1mm,这股直流空气冲过很小的缝隙,使声带得到横向和纵向的速度,此时,声带向两边运动,缝隙…

蓝桥杯真题:数字三角形

import java.util.Scanner; // 1:无需package // 2: 类名必须Main, 不可修改public class Main {public static void main(String[] args) {Scanner scan new Scanner(System.in);//在此输入您的代码...int nscan.nextInt();//输入行数nint[][] arr new int[n1][n1];//存储数…

二叉树 - 栈 - 计数 - leetcode 331. 验证二叉树的前序序列化 | 中等难度

题目 - 点击直达 leetcode 331. 验证二叉树的前序序列化 | 中等难度1. 题目详情1. 原题链接2. 基础框架 2. 解题思路1. 题目分析2. 算法原理方法1&#xff1a;栈方法2&#xff1a;计数 3. 时间复杂度 3. 代码实现方法1&#xff1a;栈方法2&#xff1a;计数 leetcode 331. 验证二…