详解TS中的 infer 与高阶泛型类型

一. infer

infer 的定义：infer 表示在 extends 条件语句中以占位符出现的用来修饰数据类型的关键字，被修饰的数据类型等到使用时才能被推断出来。

infer 占位符式的关键字出现的位置：通常infer出现在以下三个位置上。

1. infer 出现在extends 条件语句后的函数类型的参数类型位置上

interface Customer {
  custname: string
  buymoney: number
}

// 1
type custFuncType = (cust: Customer) => void
type inferType<T> = T extends (x: infer P) => any ? P : T

type inferRes = inferType<custFuncType> // Customer


// 2
type custFuncType = (cust: Customer) => number
type inferType<T> = T extends (x: infer P) => string ? P : T

type inferRes = inferType<custFuncType> // (cust: Customer) => number

2. infer 出现在 extends 条件语句后的函数类型的返回值类型上

// 1
interface Customer {
  custname: string
  buymoney: number
}

type custFuncType = (cust: Customer) => string
type inferType<T> = T extends (x: any) => infer P ? P : T

type inferRes = inferType<custFuncType> // string

// 2
interface Customer {
  custname: string
  buymoney: number
}

type custFuncType = (cust: Customer) => string
type inferType<T> = T extends (x: string) => infer P ? P : T

type inferRes = inferType<custFuncType> // (cust: Customer) => string

3. infer 会出现在类型的泛型具体化类型上。

class Subject {
  constructor(public num: number, public project: string) {}
}

let chineseSub = new Subject(100, '语文')
let matchSub = new Subject(100, '数学')
let englishSub = new Subject(100, '英语')
// 此处的Subject作为类型使用
let setSub = new Set<Subject>([chineseSub, matchSub, englishSub])
// 此处的Subject作为变量使用
type ss = typeof setSub
type eleType<T> = T extends Set<infer V> ? V : never

let res: eleType<ss>

export {}

二. 类的类型定义

class Person {}

// 通用
type common<T> = new (...args: any[]) => T
let mm: common<Person> = Person

// 1
let p1: new (name: string, phone: number, notional: string) => Person = Person

// 2
let p2: new (...args: any[]) => any = Person

// 3
let p3: typeof Person = Person

三. 泛型定义类工厂函数

class TestClass {
  constructor(public name: string, public age: number) { }
  eat() {
    console.log(this.name + 'haha');
  }
}

type ConstructorType<T> = new (...args: any[]) => T

type ArgumentsType<T extends new (...args: any[]) => any> = T extends new (...args: infer R) => any ? R : never
// args = [name: string, age: number] 元组
function createInstance<T, V extends new (...args: any[]) => any>(Constructor: ConstructorType<T>, ...args: ArgumentsType<V>) {
  return new Constructor(...args)
}

let p = createInstance<TestClass, typeof TestClass>(TestClass, 'kk', 18)
p.eat() // kkhaha

四. Ref的infer应用（unref）

function unref<T>(ref: T): T extends Ref<infer V> ? V : T {
  return isRef(ref) ? (ref.value as any) : ref
}
// 基本类型
let baseRef = ref(23) // { value: 23 }
// 一个基本类型会转化为Ref<number>
// let baseUnref = unref<Ref<number>>(baseRef)
let baseUnref = unref(baseRef)
// 对象
let objectRef = ref({ name: 'kk' })
let objectUnref = unref(objectRef)

// 当使用对象作为参数时，在使用ref时不会将对象转化为Ref对象，所以直接返回

isRef 类型判断的实现

五. 高阶类型

1. Extract

排除不成立的，寻找重合部分

type Extract<T, U> = T extends U ? T : never

• 父子类

定律一：子类extends 父类=》子类extends 父类返回true=>返回T类型

class People {
  public name: string = 'jj'
}

class ChinesePeople extends People {
  public addr: string = 'yy'
}

type Extract<T, U> = T extends U ? T : never

type extractType = Extract<ChinesePeople, People> // ChinesePeople

定律二：父类 extends 子类=>父类 extends 子类返回false 因为父类继承子类本身不成立

但如果希望人为制造一个true 获取到People

那只有子类实例属性或实例方法个数必须和父类一样多

class People {
  public name: string = 'jj'
}

class ChinesePeople extends People {
  public addr: string = 'yy'
}

type Extract<T, U> = T extends U ? T : never

type extractType = Extract<People, ChinesePeople> // never

如果两个类都为可选属性，那么如果父类extends子类也成立：

class People {
  public name?: string = 'jj'
}

class ChinesePeople extends People {
  private age?: number
}

type Extract<T, U> = T extends U ? T : never

type extractType = Extract<People, ChinesePeople> // People

或者属性一致

class People {
  public name: string = 'jj'
}

class ChinesePeople extends People {
  public name: string = 'jj'
  // private age?: number
  // public addr: string = 'yy'
}

type Extract<T, U> = T extends U ? T : never

type extractType = Extract<People, ChinesePeople> // People

• 联合类型

// 取合集
type unionExtractType = Extract<string, string | number> // string

type unionExtractType1 = Extract<string | number, string | number | boolean> // string | number

另一种情况

type unionExtractType2 = Extract<string | number, string> // string

两个合集为或时，会挨个将左侧与右侧进行判断，例如：

string extends string ? // string
number extends string ? // never

所以返回 string

加入将Extract更改一下

// 将never更改为boolean
type Extract<T, U> = T extends U ? T : boolean

// string | number | boolean
type unionExtractType3 = Extract2<string | number | symbol, string | number> 

断言番外

function testFunc(one: string | number, two: string) {
    one as string
    one as number
    one as any
    // 单类型可以断言为联合类型
    two as string | number | boolean
}

• 函数类型

在返回值相同时，参数有包含关系，第一个参数相同，参数少 extends 参数多成立

type func1 = (name: string, age: number) => string
type func2 = (name: string) => string

// (name: string) => string
type unionFunc = Extract<func2, func1>

Extract应用场景

泛型函数重载：（比较繁琐）

function cross<T extends object, U extends object>(obj1: T, obj2: U): T & U
function cross<T extends object, U extends object, V extends object>(obj1: T, obj2: U, obj3: V): T & U & V
function cross<T extends object, U extends object, V extends object>(obj1: T, obj2: U, obj3?: V) {}

使用Extract优化：

type Extract<T, U> = T extends U ? T : never

function cross<T, U>(obj1: Extract<T, object>, obj2: Extract<U, object>): T & U
function cross<T, U, V>(obj1: Extract<T, object>, obj2: Extract<U, object>, obj3: Extract<V, object>): T & U & V
function cross<T, U, V>(obj1: Extract<T, object>, obj2: Extract<U, object>, obj3?: Extract<V, object>) {}

深层优化：

type Extract<T, U> = T extends U ? T : never
type CyosTyp<T> = Extract<T, object>

function cross<T, U>(obj1: CyosTyp<T>, obj2: CyosTyp<U>): T & U
function cross<T, U, V>(obj1: CyosTyp<T>, obj2: CyosTyp<U>, obj3: CyosTyp<V>): T & U & V
function cross<T, U, V>(obj1: CyosTyp<T>, obj2: CyosTyp<U>, obj3?: CyosTyp<V>) {}

2. Exclude

与Extract相反，排除成立的，寻找差异部分

使用Exclude获取指定属性

interface People {
    name: string
    age: number
    addr: string
    male: boolean
}

// 使用keyof获取所有key
type exc1 = Exclude<keyof People, 'name'> // age | addr | male

获取Woker接口中存在，而Student接口不存在的属性

interface Student {
    name: string
    age: number
    addr: string
    male: boolean
}

interface Worker {
    name: string
    age: number
    addr: string
    salary: boolean
}

type exc1 = Exclude<keyof Student, keyof Worker> // 'salary'

3. Record

理解keyof

type dataType = {
  name: string,
  age: number
}

// 返回key
type oneType<T, U> = T extends keyof U ? T : never

type test = oneType<'name', dataType> // name


// 返回类型
type twoType<T, U> = T extends keyof U ? U[T] : never

type test = twoType<'name', dataType> // string

keyof any

type threeType<T> = T extends keyof any ? T : never

type anyType = keyof any // number | string | symbol

type Customer  = {
  name: string, 
  age: number
}

type oneRes = threeType<Customer> // never

type oneRes = threeType<number> // number
type oneRes = threeType<3> // 3     3 extends number true

let str = 'haha'
type oneRes = threeType<typeof str> // string
type oneRes = threeType<'xixi'> // xixi     xixi extends number true

let sym = Symbol('ui')
type oneRes2 = threeType<typeof sym> // symbol

Record

type Record<K extends keyof any, T> = {
  [P in K] : T
}
// in 代表遍历K的联合类型

约束对象的结构

// 约束key只能为number / string
type test2 = Record<string | number, Student>

如果传入第一个参数为string，那么代表形成一个key为字符串的索引类型

interface Student {
    name: string
    age: number
    addr: string
    male: boolean
}

type test1 = Record<string, Student>

如果传入第一个参数为number，那么代表形成一个key为数值的索引类型

interface Student {
    name: string
    age: number
    addr: string
    male: boolean
}

type test1 = Record<number, Student>

索引中字符串和数字类型可以进行转换：

[x: string]可以是字符串，数字，Symbol类型

// 1
type TTT  = {
    [x: string]: string
}

// 也可以是Symbol
const sym = Symbol('op')
let testObj: TTT  = {
    3: 'hha',
    as: '123',
    'rr': '900',
    sym: '123'
}

// 2
type TTT  = {
    [x: number]: string
}

let testObj: TTT  = {
    3: 'hha',
    '1': '123'
}

变种

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

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

因为索字符串引可以替代数字和Symbol类型，所以P会被解析为字符串索引：

可以用来约束数组，因为数组是以数字为索引的对象结构。

let arr: test1 = [{
    name: 'kk',
    age: 18,
    addr: 'ee',
    male: true
},
{
    name: 'kk',
    age: 13,
    addr: 'qe',
    male: true
}]

数组扁平化

---

目标：

[{}, {}]
{
  1: {},
  2: {}
}

• 实现方式一

const goodSymId = Symbol('goodid')
interface dataType {
    name: string,
    price: number,
    [goodSymId]: number
}

let goodList: dataType[] = [
    {
        name: '苹果',
        price: 3,
        [goodSymId]: 101
    },
    {
        name: '橘子',
        price: 6,
        [goodSymId]: 102
    },
    {
        name: '橙子',
        price: 9,
        [goodSymId]: 103
    }
]

type resGoodsType = Record<number, dataType>
let res: resGoodsType = {}

goodList.forEach(goods => {
    res[goods[goodSymId]] = goods
})

{
  "101": {
    "name": "苹果",
    "price": 3,
    [Symbol(goodid)]: 101
  },
  "102": {
    "name": "橘子",
    "price": 6,
    [Symbol(goodid)]: 102
  },
  "103": {
    "name": "橙子",
    "price": 9,
    [Symbol(goodid)]: 103
  }
}

Record和object区别

区别1： Record 获取到是索引参数类型，所以可以赋初值为{} 而object也可以，但是再次赋值会出现错误。

区别2：Record是泛型，获取值可以有自动提示功能，而object无法实现自动提示。

Map与Record区别

interface dataType {
    name: string,
    price: number,
    [goodSymId]: number
}

let data = new Map<string, dataType>()
data.set('key', {
        name: '苹果',
        price: 3,
        [goodSymId]: 101
    })

4. Pick

仅保留部分属性

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

interface Book {
  book_name: string,
  book_price: number,
  book_publish: string
}

type PickType = Pick<Book, 'book_name' | 'book_price'>
// {
//		book_name: string,
//    book_price: number,	
//}

5. Omit

type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>

interface Todo {
	title: string 
  completed: boolean 
  description: string
}

type test = Omit<Todo, 'description'>
// 拆解
type ExcludeType = Exclude<keyof Todo, 'description'> // 'title' | 'completed'

type PickType = Pick<Todo, 'title' | 'completed'>
// {
// 	title: string 
//   completed: boolean 
// }

模拟Promis定义ts类型

type ResolveType = (resolve_success: any) => any
type RejectType = (reject_fail: any) => any

class MyPromise {
  public resolveFunc!: ResolveType
  public rejectFunc!: RejectType
  constructor(promiseParams: (resolve: ResolveType, reject: RejectType) => any) {
    this.resolveFunc = (resolve_success: any): any => {
      console.log('success');
    }

    this.rejectFunc = (reject_fail: any): any => {
      console.log('fail');
    }
    promiseParams(this.resolveFunc, this.rejectFunc)
  }
}

new MyPromise(function (resolve: ResolveType, reject: RejectType) {
  resolve('success')
})

函数解构

type CustObjType = { custname: string, degree: number }
type funcType = (one: CustObjType, two: string) => void

function func(fn: funcType) {
  fn({ custname: 'kk', degree: 18 }, 'good')
}
// 解构使用CustObjType进行限制
func(function({ degree }: CustObjType, two: string) {
  console.log(degree);
})

vuex准备：实现action类型

不使用new来实例化类

class Store<S> {
  public state!: S
  commit!: CommitType
}

// let store: Store2<string> = {
let { state, commit }: Store2<string> = {
  state: 'gg',
  commit: (type: string, payload: any) => {}
}

简易actions

type CommitType = (type: string, payload?: any) => void
type ActionsHandler<S, R> = (store: Store<S>, payload?: any) => any
type ActionsTrss<S, R> = {
  [Key: string]: ActionsHandler<S, R>
}

class Store<S> {
  public state!: S
  commit!: CommitType
  constructor(storeOptions: StoreOptions<S>) { }
}

interface StoreOptions<T> {
  state: T,
  actions: ActionsTrss<T, T>
}

function createStore<S>(storeOptions: StoreOptions<S>) {
  return new Store<S>(storeOptions)
}

let storeOptions: StoreOptions<string> = {
  state: 'kk',
  actions: {
    add({ commit }, payload) {
      commit('food', '宫傲鸡丁')
    },
    del({ commit, state }) {

    }
  }
}