ts-18 进阶用法Proxy & Reflect 概念 Proxy es6新增的一个对象拦截器,类似es5的defin

Proxy & Reflect

概念
- Proxy
  - es6新增的一个对象拦截器,类似es5的defineProperty。
  - 可以监听到一个对象的变化，取值和设置值，vue3也是通过proxy做的属性的劫持
- Reflect
  - 配合Proxy用来操作对象

例子

  type Person1 = {
    name: string
    age: number
    sex: string
  }
  const proxy = (obj: any, key: any) => {
    return new Proxy(obj, {
      get(target, prop, receiver) {
        console.log('get', prop)
        return Reflect.get(target, prop, receiver)
      },
      set(target, prop, value, receiver) {
        console.log('set', prop)
        return Reflect.set(target, prop, value, receiver)
      },
    })
  }

  // 固定的太死了
  const log1 = (obj: Person1, key: 'name' | 'age' | 'sex') => {
    return proxy(obj, key)
  }

  let ps1: Person1 = log1(
    {
      name: '亚索',
      age: 18,
      sex: '男',
    },
    'name'
  )

  ps1.name = '瑞雯'
  ps1.sex
  console.log(ps1)

  // 优化后
  const log2 = <T>(obj: T, key: keyof T): T => {
    return proxy(obj, key)
  }

  let ps2 = log2(
    {
      name: '盲僧',
      age: 20,
      sex: '男',
      like: 'hs',
    },
    'like'
  )

  ps2.like

Partial & Pick

内置高级类型Partial Pick

Partial

  type Person1 = {
    name: string;
    age: number;
    msg: string;
  };

  type p = Partial<Person1>;

源码
- ```
type Partial<T> = {
  [P in keyof T]?: T[P]
}
```
- keyof 什么意思
  - keyof 之后所有的key 都会变成这样类似 for in
  - type key = 'name' | 'age' | 'msg';

Pick

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

  type Person1 = {
    name: string;
    age: number;
    msg: string;
  };

  type p = Pick<Person, 'name'>

源码
- ```
  type Pick<T, K extends keyof T> = {
    [P in K]: T[P]
  }
```
- K extends keyof T 什么意思呢
  - K 我们这传了个联合类型通过 extends约束了下你只能传你的约束的那些值 type key = 'name' | 'age' | 'msg'
  - ```
    type p = Pick<Person, 'xxxx'> // error 
```

Record & Readonly

Readonly

类似 Partial

例子

  type Person1 = {
    name: string
    age: number
    msg: string
  }

  type p1 = Readonly<Person1>
  // p1 会变成这样
  // type p1 = {
  //     readonly name: string;
  //     readonly age: number;
  //     readonly msg: string;
  // }

源码
- 也是通过 keyof 把key变成联合类型 type key = 'name' | 'age' | 'msg';
- 然后通过in 遍历给每个key 前面添加 readonly

Record

例子

用来约束key，有两个参数

  type Person1 = {
    name: string
    age: number
    msg: string
  }

  type K = 'A' | 'B' | 'C'

  type p1 = Record<K, Person1>

  // 使用
  let obj3: p1 = {
    A: { name: '亚索', age: 18, msg: '嘻嘻' },
    B: { name: '亚索', age: 18, msg: '嘻嘻' },
    C: { name: '亚索', age: 18, msg: '嘻嘻' },
  }

源码

  type Record<K extends keyof any, T> = {
    [P in K]: T
  }

  // keyof any 什么意思？
  type key = string | number | symbol

infer

基础用法

新增的关键字充当占位符

例子

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

以前可能会这么写

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

 type T1 = Type<(number | string)[]>

 type T2 = Type<boolean>

使用infer

 type Type<T> = T extends Array<infer U> ? U : T

 type T1 = Type<(number | string)[]>

 type T2 = Type<boolean>

也可以约束成 never

 // 只能传联合类型 不满足 就返回 never
 type Type<T> = T extends Array<infer U> ? U : never

 type T1 = [string, number] // [string, number]

 type T2 = Type<boolean> // never

类型提取

提取头部元素

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

  type T1 = First<Arrs> // type a = "a"

提取尾部元素

  type Last<T extends any[]> = T extends [...any[], infer Last] ? Last : []

  type T2 = Last<Arrs> // type b = "c"

删除头部元素

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

  type T3 = Shift<Arrs> // type T3 = type T3 = ["b", "c"]

删除尾部元素

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

  type T4 = Pop<Arrs> // type T4 = ["a", "b"]

递归

需求

  // 需求 Arr1 正常排序 变成 Arr2 那样
  type Arr1 = [6, 5, 4, 3, 2, 1]
  type Arr2 = [1, 2, 3, 4, 5, 6]

思路
- 使用泛型约束只能传数组类型
- 然后提取第一个放入末尾, 循环操作形成递归满足条件返回

例子

  type ReveArr<T extends any[]> = T extends [infer First, ...infer rest]
    ? [...ReveArr<rest>, First]
    : T

  type Result = ReveArr<Arr1> // type Result = [1, 2, 3, 4, 5, 6]