Dimples's blog Dimples's blog
首页
  • 前端随笔

    • React
  • 系列文章

    • 《ES6 教程》笔记
    • 《Vue》笔记
    • 《TypeScript》笔记
  • 后端文章

    • Java
    • Python
    • 数据库
  • 学习笔记

    • 《Rust》笔记
    • 《SpringBoot》笔记
    • 《Django》笔记
    • 《Docker》笔记
    • 《Python爬虫》笔记
技术分享
友情链接
索引
关于
GitHub (opens new window)

DimplesY

不会写代码
首页
  • 前端随笔

    • React
  • 系列文章

    • 《ES6 教程》笔记
    • 《Vue》笔记
    • 《TypeScript》笔记
  • 后端文章

    • Java
    • Python
    • 数据库
  • 学习笔记

    • 《Rust》笔记
    • 《SpringBoot》笔记
    • 《Django》笔记
    • 《Docker》笔记
    • 《Python爬虫》笔记
技术分享
友情链接
索引
关于
GitHub (opens new window)
  • Exclude 的实现
    • 动手实现 Exclude
      • Exclude 的作用
      • MyExclude 的实现
  • infer 递归实现反转数组
  • 《TypeScript》笔记
DimplesY
2022-08-14

Exclude 的实现

# 动手实现 Exclude

最近在刷题,碰到了一个手动实现Excelude<T, U>的题目

原题地址:https://github.com/type-challenges/type-challenges/blob/main/questions/00043-easy-exclude/README.zh-CN.md (opens new window)

也欢迎大家和我一起共同学习!

# Exclude 的作用

在 ts 中,我们能够使用 Exclude<T,U> 这个工具,帮助我们把 T 类型当中属于 U 类型的部分去除后得到一个新的类型,ts 已经自己提供了,使用方式如下:

type myType = Exclude<'a' | 'b' | 'c', 'a'>
1

得到的 myType 为 'a'|'b',明白 Exclude 的作用以后就可以自己手动实现一个了

# MyExclude 的实现

首先我们使用 js 来实现,代码如下,假设 Exclude 为一个函数

/**
 * T: ['a', 'b', 'c']
 * U: ['a']
 */
function MyExclude(T: any[], U: any[]) {
  const result = []
  for (let i = 0; i < T.length; i++) {
    const temp = T[i]
    if (!U.includes(temp)) {
      result.push(temp)
    }
  }
  return result
}

const T = ['a', 'b', 'c']
const U = ['a']
MyExclude(T, U) // ['b', 'c']
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

有上述的函数代码可以知道,在获得最终类型的时候,必定会经过循环,在 ts 中使用 extends 关键字可以实现,ts 的代码实现如下 :

type MyExclude<T, U> = T extends U ? never : T
1

原理如下图所示:

T U Result
a a never
b a b
c a c

将 T 当中的每一项,取出与 U 当中的每一项进行比较,相同返回 never,不同则返回 T 当中的项

帮助我修改此页面 (opens new window)
#前端#TypeScript
上次更新: 2022/11/20, 18:28:09
infer 递归实现反转数组

infer 递归实现反转数组→

最近更新
01
使用 strapi 快速构建 API 和 CMS 管理系统
03-03
02
Rust 开发环境
11-26
03
使用 paka.dev 为 npm 包生成文档
11-24
更多文章>
Theme by Vdoing | Copyright © 2020-2025 Dimples YJ | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式