ts进阶高级笔记 ＜小满zs版本 yyds＞

类型兼容:typeScript中的类型兼容性是基于结构类型的（也就是形状），如果A要兼容B 那么A至少具有B相同的属性

协变 逆变 双协变

协变也可以叫鸭子类型

// 主类型
interface A {
    name:string
    age:number
}
// 子类型
interface B {
    name:string
    age:number
    sex:string
}

let a:A = {
    name: '老墨',
    age: 35
}

let b:B = {
    name: '老高',
    age: 40
    sex: '男'
}

// 协变
a = b

// 逆变
let fna = (params:A) {
    
}

let fnb = (params:B) {

}

fnb = fna

// 双向协变 tsconfig strictFunctionTypes 设置为false 支持双向协变 fna fnb 随便可以来回赋值

proxy & Reflect

proxy

对象用于创建一个对象的代理，从而实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等）

支持对象 数组 函数 set map

let person = {name:'qwe',age:18}
let Proxy = new proxy(person,{
    //取值
    get(){},
    //赋值
    set(target,key,value,receiver) {
        return Reflect(target,key,value,receiver)
    },
    //拦截函数的调用
    apply(){},
    //拦截in操作符
    has(){},
    //拦截for in
    ownKeys(){},
    //拦截new操作符
    construct(){}
})

const list: Set<Function> = new Set()
 
const autorun = (cb: Function) => {
    if (cb) {
        list.add(cb)
    }
}
 
const observable = <T extends object>(params: T) => {
    return new Proxy(params, {
        set(target, key, value, receiver) {
            const result = Reflect.set(target, key, value, receiver)
            list.forEach(fn => fn())
            console.log(list)
            return result
        }
    })
}
 
const person = observable({ name: "小满", attr: "威猛先生" })
 
autorun(()=>{
    console.log('我变化了')
})
 
person.attr = '威猛个捶捶'

Reflect

与大多数全局对象不同Reflect并非一个构造函数，所以不能通过new运算符对其进行调用，或者将Reflect对象作为一个函数来调用。Reflect的所有属性和方法都是静态的（就像Math对象） Reflect会返回一个布尔值 而proxy的set需要一个布尔值返回

type Person = {
  name: string
  age: number
  sex: string
}

const proxy = (obj: any, key: any) => {
  return new Proxy(obj, {
    get(target, prop, receiver) {
      console.log('get')

      return Reflect.get(target, prop, receiver)
    },
    set(target, prop, value, receiver) {
      console.log('set')
      return Reflect.set(target, prop, value, receiver)
    }
  })
}
const logAccess = <T>(obj: T, key: keyof T) => {
  return proxy(obj, key)
}

let man: Person = logAccess(
  {
    name: 'man',
    age: 18,
    sex: 'nan'
  },
  'age'
)
// let man: Person = {
//   name: 'man',
//   age: 18,
//   sex: 'nan'
// }

man.age = 30
console.log(man)

 Partial

可以将传入的类型筛选处理成可选的

type Person = {
    name:string
    age:number
}
type p = Partial<Person>

// 转换后
type p = {
    name?:string | undefined
    age?:number | undefined
}

Pick

从类型定义T的属性中，选取指定一组属性，返回一个新的类型定义。

type Person = {
    name:string,
    age:number,
    text:string
    address:string
}
 
type Ex = "text" | "age"
 
type A = Pick<Person,Ex>
// 使用后A结果为

type A = {
    text:string
    age:number
}

 Readonly

可以将传入的类型筛选处理成只读的

type Person = {
    name:string
    age:number
}
type p = Readonly<Person>

// 转换后
type p = {
    readonly name:string
    readonly age:number
}

Record

传入键名后可以给每一项的值约定类型为传入的泛型

type Person = {
    name:string
    age:number
}

type K = "A" | "B" | "C"

type B = Record<K, Person>
// 转换后的类型
let obj:B = {
    A: {name: 'qwe',age:18},
    B: {name: 'qwe',age:18},
    C: {name: 'qwe',age:18}
}

infer 是TypeScript 新增到的关键字 充当占位符

我们来实现一个条件类型推断的例子

//定义一个类型 如果是数组类型 就返回 数组元素的类型 否则 就传入什么类型 就返回什么类型

type TYPE<T> = T extends Array<any> ? T[number] : T

type A = TYPE<number[]> // type A = number
type A = TYPE<(number | string)[]> // type A = number | string

// 使用infer关键字

type TYPE<T> = T extends Array<infer K> ? K : T

// 限制只能传元组类型

type TYPE<T> = T extends Array<infer K> ? K : never

 使用infer提取元素

type Arr = ['a','b','c']
// 提取第一个元素 提取最后一个元素同理
type First<T extends any[]> = T extends [infer one,...any[]] ? []

type a = First<Arr>

// 利用infer删除最后一个元素或者第一个元素

type pop<T extends any[]> = T extends [...infer Rest,unknown] ? Rest : []
type p = pop<Arr>

利用infer做递归完成数组翻转

type Arr = [4, 3, 2, 1]

type Reserver<T extends any[]> = T extends [infer First, ...infer Reset] ? [...Reserver<Reset>, First] : []

type A = Reserver<Arr>