typescript 类型体操之 16-medium-pop持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第14天，点击查看活动详情

前言

在学习typescript的过程当中，有一个github库对其类型的学习特别有帮助，是一个有点类似于leetcode的刷题项目，能够在里面刷各种关于typescript类型的题目，在上一篇文章中，我们完成了中等的第七题，今天来做中等的第八题 16-medium-pop

下面这个是类型体操github仓库：

type-challenges/type-challenges: Collection of TypeScript type challenges with online judge (github.com)

16-medium-pop

import type { Equal, Expect } from '@type-challenges/utils'

type cases = [
  Expect<Equal<Pop<[3, 2, 1]>, [3, 2]>>,
  Expect<Equal<Pop<['a', 'b', 'c', 'd']>, ['a', 'b', 'c']>>,
]

从README和测试用例中能够得出，题目需要我们实现一个工具类型 Pop，起作用和 JS 中数组的pop方法是相似的。

利用 JS 进行对比学习

JS 简单实现，因为实现的是 JS 内部的函数，所以尽量就不是用到其他的内置函数。

简单的循环传入的对象，并且并入每一项，除了最后一个元素，这样就是对最后一位做了删除。

function myPop(arr){
    let newArr = []
    for(let i=0;i<arr.length-1;i++){
        newArr = [...newArr,arr[i]]
    }
    return newArr
}

实现 Pop

这道题的知识点我们在昨天的题目中已经讲过了，虽然 JS 不支持将 rest 参数定义在前面，但是 TS 支持，那么通过将前面的参数都定义为 rest，最后一位定义为 last，这样就能够拿到前面的数组了。

type Pop<T extends any[]> = T extends [...infer rest,infer R]? rest : never

TS 数组方法扩展

既然都实现了 JS 的数组方法 pop，那不妨在实现一下 TS 版本的其他数组方法，其他的还有 Push，Shift，Unshift，这三个方法。

Push

Push 方法的作用主要是在数组后面添加元素，在简单题中我们已经处理过了，就是通过解构简单的将两个类型放入同一个数组当中：

type Push<T extends any[], V> = [...T, V];
type S1 = Push<[1,2],3>
// type S1 = [1, 2, 3]

Shift

Shift 的作用主要是删除掉数组的第一个元素，解法和 Pop 是完全相同的，通过 infer 和解构来实现。

type Shift<T extends any[]> = T extends [infer F, ...infer R] ? R : never;
type S2 = Shift<[1,2,3]>
// type S2 = [2, 3]

Unshift

Unshift 的作用则是和 Push 互补的，在数组的前面添加一个元素，做法和 Push 也是相同的。

type Unshift<T extends any[], V> = [V, ...T];
type S3 = Unshift<[1,2],3>
// type S3 = [3, 1, 2]

知识点

关于上述提到了部分的知识点：

解构赋值
infer 关键字

今天的知识点依然都是旧的知识点，但是做到一道题的时候，有时候能够去稍微举一反三一下，我们能够实现某一个方法，是否能够将其他类似的同类型方法也一起实现了呢，有助于更加巩固这方面的知识。

总结

今天我们做完了中等的第八题，题目比较简单，主要还是灵活运用学习过的 TS 特性

typescript 类型体操 之 16-medium-pop

前言