网站LOGO
白雾茫茫丶
页面加载中
3月5日
网站LOGO 白雾茫茫丶
记录学习、生活和有趣的事
菜单
  • 热评
    用户的头像
    首次访问
    上次留言
    累计留言
    我的等级
    我的角色
    打赏二维码
    打赏博主
    TS 中的类型验算,高级通用 API 实现
    点击复制本页信息
    微信扫一扫
    文章二维码
    文章图片 文章标题
    创建时间
  • 一 言
    确认删除此评论么? 确认
  • 本弹窗介绍内容来自,本网站不对其中内容负责。
    按住ctrl可打开默认菜单

    TS 中的类型验算,高级通用 API 实现

    谢明伟 · 原创 ·
    前端开发 · ReactTypeScript
    共 2571 字 · 约 2 分钟 · 265

    前言

    由于现在工作使用的技术栈是 ReactTypeScriptahooks,工作中需要用到大量的类型定义,特此记录一下一些常用的 类型通用API 封装。

    TS 内置类型

    Partial:将 T 所有属性变为可选属性
    Required:将 T 所有属性变为必选属性
    Readonly:将 T 所有属性变为只读属性
    NonNullable:过滤 T 类型中的 null 及 undefined 类型
    Parameters:获取函数的参数类型,将每个参数类型放在一个元组中
    Omit<T, K>:从类型 T 中剔除 K 中的所有属性
    Pick<T, K>:从类型 T 中挑选 K 中的所有属性
    Exclude<T, U>:提取存在于 T,但不存在于 U 的类型组成的联合类型
    Extract<T, U>:提取联合类型 T 和联合类型 U 的所有交集
    Record<T, K>:构造一个具有一组属性 K (类型 T )的类型

    TS 内置关键字

    extends:继承、泛型约束、条件类型
    infer:这玩意我到现在都还没搞懂
    keyof:将一个类型的属性名全部提取出来当做联合类型
    typeof:在类型上下文中获取变量或者属性的类型
    in:常用来遍历枚举类型

    TS compiler 内部实现的类型

    Uppercase:构造一个将字符串转大写的类型
    Lowercase:构造一个将字符串转小写的类型
    Capitalize:构造一个将字符串首字符转大写的类型
    Uncapitalize:构造一个将字符串首字符转大小写的类型

    实现 Optional API,实现部分类型变为可选

    ts 代码:
    type Article = {
      title: string;
      content: string;
      author: string;
      date: Date;
      readCount: number;
    }
    
    // 实现 T 部分类型变为可选
    type Optional<T,K extends keyof T> = Omit<T,K> & Partial<Pick<T,K>>; 
    
    type ArticleTodo = Optional<Article,'author' | 'date' | 'readCount'>
    // { title: string; content: string; author?: string; date?: Date; readCount?: number; }

    实现 GetOptional API,获取类型中的所有可选字段

    ts 代码:
    type Article = {
      title: string;
      content: string;
      author?: string;
      date?: Date;
      readCount?: number;
    }
    
    // 获取 T 类型中的所有可选字段
    type GetOptional<T> = {
      [P in keyof T as T[P] extends Required<T>[P] ? never : P]: T[P]
    };
    
    type ArticleTodo = GetOptional<Article>
    // { author?: string; date?: Date; readCount?: number; }

    实现 DeepReadonly API,实现不可变类型的深度遍历

    ts 代码:
    type Article = {
      title: string;
      name:{
        first:string;
        lasr:string;
      }
    }
    
    // API,实现不可变类型的深度遍历
    type DeepReadonly<T extends Record<string | symbol,any>> = {
      readonly [k in keyof T]: DeepReadonly<T[K]>;
    };
    
    type ArticleTodo = DeepReadonly<Article>

    实现 UnionToIntersection API,将联合类型转为交叉类型

    ts 代码:
    type Article = { title:string } | { name:string } | { date: Date }
    
    // API,将联合类型转为交叉类型
    type UnionToIntersection<T> = 
      (T extends any ? (x: T) => any : never) extends (x: infer R) => any ? R : never;
    
    type ArticleTodo = UnionToIntersection<Article>
    // { title:string } & { name:string } & { date: Date }

    本篇文章会不间断更新。

    声明:本文由 谢明伟(博主)原创,依据 CC-BY-NC-SA 4.0 许可协议 授权,转载请注明出处。

    还没有人喜爱这篇文章呢

    现在已有

    1

    条评论
    发一条!
    1. 头像
      · · 辽宁
      • 等级:Lv.2
      • 角色:访客
      • 在线:三月内
      头像
      沙发

      咋图标都加载失败了

      评论
    博客logo 白雾茫茫丶 记录学习、生活和有趣的事 51统计 百度统计
    MOEICP 萌ICP备20236860号 ICP 粤ICP备2023007649号 ICP 粤公网安备44030402006402号

    🕛

    本站已运行 2 年 63 天 15 小时 56 分

    🌳

    自豪地使用 Typecho 建站,并搭配 MyLife 主题
    白雾茫茫丶. © 2022 ~ 2024.
    网站logo

    白雾茫茫丶 记录学习、生活和有趣的事
     
     
     
     
    壁纸