// ts中类型主要包括 1.元组 2.接口(对象,函数,构造器)类型 3.枚举类型 4.字面量类型 5.特殊类型

// ts中类型类型运算主要包括 1.条件类型 : 2.推导类型 3.联合类型 4.交叉类型 5.映射类型

特殊类型

  • never 代表不可达,比如函数抛异常的时候,返回值就是 never。
  • void 代表空,可以是 undefined 或 never。
  • any 是任意类型,任何类型都可以赋值给它,它也可以赋值给任何类型(除了 never)。
  • unknown 是未知类型,任何类型都可以赋值给它,但是它不可以赋值给别的类型。
    1. extends 的不同用处
    2. // extends ? : 条件类型
    3. // extends class 类继承
    4. // T extends string 类型约束
    5. // infer 推导类型
    6. // | 联合类型
    7. // & 交叉类型
    8. // key of 映射类型
    9. type MapType<T> = { [Key in keyof T]?: T[Key] }
    10. keyof T 是查询索引类型中所有的索引,叫做索引查询
    11. T[Key] 是取索引类型某个索引的值,叫做索引访问

//取出props类型

  1. type GetRefType<P> = 'ref' extends keyof P ? P extends {ref : infer Value|undefined} ? Value : never : never
  2. type ImplRefType = GetRefType<{name:"ws",ref:'ws'}>

类型约束例子

  1. // function getPv(obj,key){
  2. // return obj[key]
  3. // }
  4. // function getpv<T>(obj:T,key:any):any{
  5. // return obj[key]
  6. // }
  7. function getPv<T extends object,Key extends keyof T>(obj:T,key:Key):T[Key]{
  8. return obj[key]
  9. }
  10. getPv({a:1,b:2},'a')

// ts 子类型 父类型

//模式匹配

  1. type GetReturnType<T> = T extends (...args:unknown[])=> infer ReturnType ? ReturnType : never
  2. type Type = GetReturnType<()=>string>

//递归

  1. type GR<T extends string> = T extends `${infer A}${' '}` ? GR<A> : T
  2. type GL<T extends string> = T extends `${' '}${infer A}` ? GL<A> : T
  3. type A = GL<GR<' ws '>>
  4. type obj = {
  5. a: {
  6. b: {
  7. c: {
  8. f: () => 'dong',
  9. d: {
  10. e: {
  11. guang: string
  12. }
  13. }
  14. }
  15. }
  16. }
  17. }
  18. type DeepReadOnly<T extends Record<string,any>> = {
  19. readonly [key in keyof T] :T[key] extends object ? T[key] extends Function ? T[key] : DeepReadOnly<T[key]> :T[key] }
  20. type DRR = DeepReadOnly<obj>

//重新构造

  1. type UppercaseKey<T extends object> = {
  2. [Key in keyof T as Uppercase<Key & string>] : T[Key]
  3. }
  4. // key in 'NAME'|'AGE'
  5. type GG = UppercaseKey<{name:string;age:number}>
  6. type Change<T> = {
  7. [Key in keyof T as `${Key & number}` ]:[T[Key],T[Key]]
  8. }
  9. type v = Change<{1:1,3:2}>
  10. type AppendArgument<T,U> = T extends (...args:infer Args)=>infer A ? (...args:[...Args,U])=> A:never
  11. type AppendArgumentResult = AppendArgument<(name:string)=>string,number>
  12. type ToRe<T> = {
  13. -readonly [key in keyof T] -?: T[key]
  14. }
  15. type Ad = ToRe<{
  16. readonly a?:string;
  17. readonly b?:number
  18. }>
  19. interface P {
  20. name:string;
  21. age:number;
  22. hobby:string[];
  23. }
  24. type Filter<T extends Record<string,any>,U> = {
  25. [key in keyof T as U extends T[key] ? key :never]:T[key]//此处包含联合类型的特性
  26. }
  27. type FilterRt = Filter<P,string|number>
  28. type JJ = string|number extends string ? true :false

//联合类型

联合类型比较特殊 会有分布式条件类型A extends A ? [B] extends [A] ? false : true : never

当 A 是联合类型时:

  • A extends A 这种写法是为了触发分布式条件类型,让每个类型单独传入处理的,没别的意义。
  • A extends A 和 [A] extends [A] 是不同的处理,前者是单个类型和整个类型做判断,后者两边都是整个联合类型,因为只有 extends 左边直接是类型参数才会触发分布式条件类型。

至于为什么要用[A]这总形式 其实在ts被解析的时候底层会直接传入是不是T(也就是联合类型) 如果是就按照分布式情况处理 如果不是就正常处理所以 以下都可以防止触发分布式条件类型

  1. A extends A ? [B] extends [A] ? false : true : never
  2. A extends A ? {ws:B} extends {ws:A} ? false : true : never
  3. A extends A ? (()=>B) extends (()=>B) ? false : true : never
  1. type UppercaseA<T extends string> = T extends 'a' ? Uppercase<T> : T
  2. type UppercaseAR = UppercaseA<'a'|'b'|'c'>
  3. type IsUnion<A,B=A> = A extends A ? [B] extends [A] ? false : true : never
  4. type IsUnionR = IsUnion<'a'|'b'>
  5. //这个可以验证分布式条件类型
  6. type TestUnion<A, B = A> = [B] extends [B] ? { a: A, b: B} : never;
  7. type TestUnionResult = TestUnion<'a' | 'b' | 'c'>;

// 内置类型

  1. // Parameters
  2. // type Parameters<T extends (...args: any) => any>
  3. // = T extends (...args: infer P) => any
  4. // ? P
  5. // : never;
  6. type TestParameters = Parameters<(name:string,age:never)=>void>
  7. //Partial Readonly Required
  8. //Pick
  9. // type Pick<T, K extends keyof T> = {
  10. // [P in K]: T[P];
  11. // };
  12. type TestPick = Pick<{name:'ws',age:10,ddd:'12'},'name'|'age'>
  13. //Record
  14. // type Record<K extends keyof any, T> = {
  15. // [P in K]: T;
  16. // };
  17. type TestRecord = Record<'a'|'b',string>
  18. type TestRecord2 = Record<string,any>
  19. //Exclude
  20. // type Exclude<T, U> = T extends U ? never : T;
  21. type TestExclude = Exclude<'a'|'b'|'c','a'|'b'>
  22. //Extract
  23. // type Extract<T, U> = T extends U ? T : never;
  24. type TestExtract = Extract<'a'|'b'|'c','a'|'b'>
  25. //Omit
  26. // type Omit<T, K extends keyof any> = Pick<T, Exclude<keyof T, K>>;
  27. type TestOmit = Omit<{name:'ws',age:10,ddd:'12'},'name'|'age'>

//协变 逆变 //协变

  1. interface Person {
  2. name: string;
  3. }
  4. interface Ws {
  5. name: string;
  6. age: number;
  7. }
  8. let person: Person = {
  9. name: '',
  10. };
  11. let wangs: Ws = {
  12. name: 'ws',
  13. age: 20,
  14. };
  15. person = wangs;
  16. // wangs = person;

//逆变

  1. let printHobbies: (ws: Ws) => void;
  2. printHobbies = (ws) => {
  3. console.log(ws.age);
  4. }
  5. let printName: (person: Person) => void;
  6. printName = (person) => {
  7. console.log(person.name);
  8. }
  9. // printName = printHobbies
  10. printHobbies = printName
  11. // printHobbies()
  12. type Func = (a: string) => '1';
  13. const func: Func = (a: 'hello') => string
  14. // type UnionToIntersection<U> =
  15. // (U extends U ? (x: U) => unknown : never) extends (x: infer R) => unknown
  16. // ? R
  17. // : never
  18. // type UnionToIntersectionTest = UnionToIntersection<{ws:1}|{wsss:2}>

extends

// type ad = 'a'&'b' extends 'a' ? true :false; // type add = 'a' extends 'a'|'b' ? true :false type addf= ['a'|'b'] extends ['a'] ? true :false type addd= 'a'|'b' extends 'a' ? true :false

// type l = { // name:string, // } type DD = {a:'1111',b:'2'} extends {} ? true :false

// 子类型一定比父类型更具体

// type fff = ['a','b','c'][number] // type GG = fff extends 'a'|'b'|'c' ? true :false // type SSS = {1:1,2:2,3:3} extends {1:1} ?true :false // type EE = {a:2}

ts补充的更多相关文章

  1. TS 自学笔记(一)

    TS 自学笔记(一) 本文写于 2020 年 5 月 6 日 日常废话两句 有几天没有更新了,最近学的比较乱,休息了两天感觉好一些了.这两天玩了几个设计软件,过几天也写篇文章分享分享. 为啥要学 TS ...

  2. SnowflakeId雪花ID算法,分布式自增ID应用

    概述 snowflake是Twitter开源的分布式ID生成算法,结果是一个Long型的ID.其核心思想是:使用41bit作为毫秒数,10bit作为机器的ID(5个bit是数据中心,5个bit的机器I ...

  3. TypeSrcript如何引入第三方库 如果加d.ts以及async await如何使用 demo,只有代码,文字后续补充

    https://files.cnblogs.com/files/cappuccino/laya2.rar

  4. TS中补充的六个类型

    1.  元组 元组可以看做是数组的拓展,它表示已知元素数量和类型的数组.确切地说,是已知数组中每一个位置上的元素的类型 当我们为 元组 赋值时:各个位置上的元素类型都要对应,元素个数也要一致. let ...

  5. TS初探

    简介 TypeScript具有类型系统,且是JavaScript的超集.它可以编译成普通的JavaScript代码. TypeScript支持任意浏览器,任意环境,任意系统并且是开源的.Ts主要用于解 ...

  6. JavaScript 和 TypeScript 交叉口 —— 类型定义文件(*.d.ts)

    在 <从 JavaScript 到 TypeScript 系列> 文章我们已经学习了 TypeScript 相关的知识. TypeScript 的核心在于静态类型,我们在编写 TS 的时候 ...

  7. [补充资料] 手动搭建 Cloudera 集群

    本课主题 集群搭建 设置 Web 服务器 启动 ClouderManager 登入 Cloudera Manager 引言 这部份是一个补充资料,记录如何安装 Cloudera 服务器 集群搭建 查看 ...

  8. 第一阶段——CentOS6_Python3.6.1笔记(尚学堂-Python基础快速入门)+ 【补充】麦子-Python程序入门与进阶

    虚拟机环境: 设置网络 .修改网络地址 .设置网卡为nat模式 .确保物理机启动dhcp.net服务 .编辑文件:vim /etc/sysconfig/network-scripts/ifcfg-et ...

  9. (原)关于MEPG-2中的TS流数据格式学习

    关于MEPG-2中的TS流数据格式学习 Author:lihaiping1603 原创:http://www.cnblogs.com/lihaiping/p/8572997.html 本文主要记录了, ...

  10. [视频播放] HLS协议之M3U8、TS流详解

    本文转载自:<hls之m3u8.ts流格式详解> HLS,Http Live Streaming 是由Apple公司定义的用于实时流传输的协议,HLS基于HTTP协议实现,传输内容包括两部 ...

随机推荐

  1. react lodash节流this找不到正确用法

    if (!this.throttleLoadDicom) { this.throttleLoadDicom = throttle(this.loadDicomFun, 800, { leading: ...

  2. Qt项目移植

    从Qt低版本到高版本 一开始使用的是Qt Creator 4.6.2(Enterprise) 后面下载了Qt Creator 4.13.3(Enterprise) 一开始在Qt Creator 4.1 ...

  3. Python的入门学习Day 25~27——form”夜曲编程“

    Day 27 time: 2021.8.24. ​ 时流轻快,转眼间就载着我到达了学习Python的第27个日子.一开始,我还以为本次学习的全程对我而言小菜一碟--但,当我亲自走过以后,发现这些进步, ...

  4. 微信小程序中如何把数组从一个页面传到另一个页面,并且获取数据

    // 传送端 举例 wx.navigateTo({ url: 'recite/recite?openid=' + k.data.openid + '&isexist=' + k.data.is ...

  5. 2023-03-02 TypeError: null is not an object (evaluating 'ImageCropPicker.openPicker')

    问题描述:rn项目使用到了一个插件react-native-image-crop-picker,运行后报错. 原因:安装该插件的时候没有link到android包里. 解决方案: react-nati ...

  6. IO学习笔记6

    2.3 多路复用 但是NIO仍有它的缺陷,因为服务端和客户端都在一个线程中,主线程遍历客户端集合去每一个客户端都问一遍:你有没有数据,这样的话,如果有10K个客户端,只有最后一个客户端才收到了信息,但 ...

  7. 一加5T刷入魔趣

    0.准备工作 1.安装adb工具 2.下载twrp 3.5t系统包. 1.解锁bootloader 先进入原版系统,打开开发者选项,允许USB调试,勾选允许OEM解锁,高级重启选项 打开命令行输入: ...

  8. DevExpress控件显示弹出注册对话框的应对方法

    删除Properties下的license.licx,目前来看是可以的 已测试,可以不显示注册对话框

  9. Cesium开发三维地图入门

    需求:要求将GLTF三维模型放到地图上展示,并且添加各种图标和线进行标注. 用CesiumJS地图库实现代码如下: 引入CesiumJS库 1.直接clone源码包,在index.html中引入,如下 ...

  10. 第一次写,python爬虫图片,操作excel。

    第一次写博客,其实老早就注册博客园了,有写博客的想法,就是没有行动,总是学了忘,忘了丢,最后啥都没有,电脑里零零散散,东找找,西看看,今天认识到写博客的重要性. 最近闲着看了潭州教育的在线直播课程,颇 ...