📕
余烬的小册
数据结构与算法GitHub
  • 总述
  • 经验记录
    • 经验总结
      • web component
      • 前端性能优化总结与分析
      • 我的长列表优化方案
      • 双向通讯解决方案
      • 🔧基于istanbul实现代码测试覆盖率工具
      • 表单系统(低代码表单)
      • 跨端小程序
      • 设计一个即时聊天功能
      • 跨页面通讯 3658699fe4cb4d0bbe22b0881390bacd
    • 踩坑记录
      • HTML踩坑记录
      • Flutter踩坑记录
      • CSS踩坑记录
  • 源码解析
    • Vue源码解析
      • Vue2源码解析系列-响应式原理
      • Vue2源码解析系列-模板编译
      • Vue2源码解析系列-渲染系统(待更新)
        • Patch
      • Vue2源码解析系列-调度系统(todo)
      • Vue2组件更新流程(todo)
      • 如何学习Vue源码
      • Vue3源码解析系列-响应系统
      • Vue3源码解析系列-渲染系统
      • Vue3源码解析系列-组件化和渲染优化(todo)
      • Vue router源码解析(todo)
    • React源码解析(todo)
    • 微前端
      • qiankun源码解析(todo)
    • Vite源码解析
      • Vite Client源码
      • Vite Server源码(todo)
  • 前端技术
    • javaScript
      • ES6
        • 变量声明
        • 模块化
        • 箭头函数
        • 你不知道的for...of
        • 新的数据结构Set和Map
        • JavaScript异步编程终极解决方案
        • ES6 Class 3a0c0a225a534984aabe9a943c5df975
      • JavaScript Error
      • JavaScript浅拷贝和深拷贝
      • JavaScript闭包
      • JavaScript最佳实践
      • JavaScript设计模式
      • async函数的polyfill
    • 深入理解JavaScript系列
      • JavaScript中的继承
      • JavaScript原始类型和引用类型
      • JavaScript浅拷贝和深拷贝
      • JavaScript手写系列
      • JavaScript之this
      • 词法环境和环境记录
      • JavaScript内存泄漏
      • 执行上下文
      • 从ECMAScript规范中学习this
    • TypeScript
      • TypeScript基础教程
      • Typescript高级操作
      • TypeScript工具类型
      • Typescript手写实现工具类型
      • Typescript总结(思维导图)
    • 浏览器原理
      • 页面渲染原理
      • 浏览器存储
      • JavaScript事件循环
      • 事件循环
      • 跨域
      • DOM事件流
      • 从输入url到页面渲染
      • 判断节点之间的关系及根据节点关系查找节点
      • history API
    • 跨端技术
      • Flutter
        • Flutter布局组件
    • 前端工程化
      • Babel插件开发指南
      • 循环依赖
      • pm2
    • React
      • React 状态管理
      • React组件通讯
      • Redux入门
      • Flux
      • React Hook(todo)
      • Effect
  • 服务器端
    • 计算机网络
      • 应用层
      • 运输层
      • 物理层
      • 数据链路层
      • HTTP缓存
      • HTTPS
      • 网络层
    • NodeJs
      • Node.js
      • nodejs最佳实践
      • 《深入浅出Nodejs》小结
      • mongoose填充(populate)
      • node事件循环
      • Node子进程
      • nestjs从零开始
      • nodejs流
      • Nodejs调试
      • Koa源码解析
    • 服务器
      • 操作系统
      • Linux
      • nginx常用指令
      • nginx常用配置
    • 数据库
      • Mysql常见语法
      • MongoDB Indexes索引
  • 前端安全与性能优化
    • 前端安全
      • 跨站脚本攻击(XSS)
      • 跨站点请求伪造(CSRF)
      • 点击劫持
      • 中间人攻击
      • 越权攻击与JWT
    • 前端性能优化
      • 前端监控系统
      • 前端性能优化总结与分析 7348bba0918645b1899006dc842a64c1
      • 衡量性能的核心指标 0dc15ef127cf4f4a9f1137c377420292
      • 图片懒加载
  • 杂项
    • 其他
      • Git
      • web component框架
      • 实现滚动框的懒加载
      • Stencil指南
    • CSS
      • 定位和层叠上下文
      • BFC
      • 盒模型
      • css选择器
      • css变量
由 GitBook 提供支持
在本页
  • Typescript手写工具类型
  • 起因
  • 工具类型
  • 手写工具类型
  • Pick<Type, Keys>
  • Omit<Type, Keys>
  • Recod<K, T>
  • Exclude<T, U>
  • Extract<T, U>
  • NonNullable
  • Required
  • Partial
  • Readonly
  • Parameters
  • ReturnType
  • ConstructorParameters
  • InstanceType
  • ThisParameterType
  • OmitThisParameter
  • 参考
在GitHub上编辑
  1. 前端技术
  2. TypeScript

Typescript手写实现工具类型

Typescript手写工具类型

起因

之前有次面试的时候和面试官说了句熟悉Typescript,

面试官:那你手写实现一下Pick类型

我:………

面试官:……..

还是要保持一颗谦虚学习的心🤣🤣🤣🤣🤣

工具类型

Typescript提供一些官方工具类型,这些工具类型全局可用, 无需手动导入,通过使用这些工具类型可以减少很多重复工作,提高效率和代码整洁度。

Typescript工具类型详细介绍可以见TypeScript实用工具

手写工具类型

Pick<Type, Keys>

type MyPick<Type, Keys extends keyof Type> = {
    [P in Keys]: Type[P]
}

Omit<Type, Keys>

type MyOmit<Type, Keys extends keyof Type> = {
    [P in Exclude<keyof Type, Keys>]: Type[P]
}

Omit的作用与Pick相反,也可以借助Pick来实现Omit。

type MyOmit<Type, Keys extends keyof Type>  = Pick<Type, Exclude<keyof Type, Keys>>

Recod<K, T>

type MyRecord<K extends string | number | symbol, T> = {
    [R in K]: T
}

Exclude<T, U>

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

Extract<T, U>

type MyExtract<T, U> = T extends U ? T : never;

NonNullable

type MyNonNullable<T> = Exclude<T, undefined | null>
// 即
type MyNonNullable<T> = T extends null | undefined ? never : T;
// 或者
type MyNonNullable<T> = T & {}

Required

type MyRequired<T> = {
    [K in keyof T]-?: T[K]
}

这里的-?符号看起来很容易让人懵逼,事实上这的- 号是控制映射类型修饰符的,除此之外还有+号,可以通过-和+号来修改属性readonly或者属性可选。 也就是说上面的-?意思是remove ? ,同理,+?、+readonly分别是添加属性可选、添加属性可读的意思,但是通常情况下我们可以省略+,因为不写和写+的效果是一样的。

Partial

根据上面的介绍,我们可以很容易想到利用+?来实现Partial,也可以省略+。

type MyPartial<T> = {
    [K in keyof T]?: T[K]
}

Readonly

type MyReadonly<T> = {
    +readonly [K in keyof T]: T[K]
}

我们也可以写出移除readonly属性的工具类型:

type RemoveReadonly<T> = {
    -readonly [K in keyof T]: T[K]
}

甚至可以实现一个让数组里每个元素都readonly的工具类型。

type MyReadonlyArray<T> = {
    +readonly [P in number]: T
}

Parameters

type MyParameters<T extends (...args: any[])=>any> = T extends (...args: infer P)=>any ? P : never

ReturnType

type MyReturnType<T extends (...args: any[]) => any> = T extends (...args: any) => infer P ? P : any

ConstructorParameters

type MyConstructorParameters<T extends abstract new (...args: any[]) => any> = T extends abstract new (...args: infer P) => any ? P : never

InstanceType

type MyInstanceType<T extends abstract new (...args: any) => any> = T extends abstract new (...args: any) => infer R ? R : any

ThisParameterType

type MyThisParameterType<T> = T extends (this: infer P, ...args:never)=>any ? P : unknown;

OmitThisParameter

type MyOmitThisParameter<T> = unknown extends ThisParameterType<T> ? T : T extends (...args: infer A) => infer R ? (...args: A) => R : T

参考

上一页TypeScript工具类型下一页Typescript总结(思维导图)

最后更新于1年前

关于这部分内容可见:

demo
demo
demo
demo
demo
demo
https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-8.html#improved-control-over-mapped-type-modifiers
demo
demo
demo
demo
demo
demo
demo
Documentation - Utility Types
Documentation - TypeScript 2.8
Documentation - TypeScript 4.7