Typescript学习 泛型工具类型

typeof 获取一个变量或对象的类型

interface Person {
    name: string
    age: number
}

const amin: Person = {
    name: "amin",
    age: 17
}

type Amin = typeof amin // type Amin = Person
const person: Amin = { // const person: Person
    name: "小明",
    age: 18
}

type Sum = (a: number, b: number) => number
const sum: Sum = (a, b) => a + b

type Add = typeof sum // type Add = (a: number, b: number) => number
const add: Add = (a, b) => a + b // const add: Sum

const res = add(5, 5) // const res: number
console.log(res) // 10

keyof 获取某种类型的所有键 返回联合类型 a | b | c

interface Person {
    name: string
    age: number
}

type PersonKeys = keyof Person // type PersonKeys = "name" | "age"
type PersonKeys2 = keyof Person[] // 数组的属性
// type PersonKeys2 = number | "length" | "toString" | 
// "toLocaleString" | "pop" | "push" | "concat" | "join" | "reverse" |
// "shift" | "slice" | "sort" | "splice" | "unshift" | "indexOf" | 
// "lastIndexOf" | ... 14 more ... | "includes"
type PersonKeys3 = keyof {[x: string]: Person} // type PersonKeys3 = string | number 
// ts支持数字索引和字符串索引 keyof一个对象类型  返回的就是 string | number 

class Person {
    name: string
    constructor(name: string) {
        this.name = name
    }

    nameLenght() {
        return this.name.length
    }
}

type P = keyof Person // type P = "name" | "nameLenght"

in 遍历枚举类型

interface Person {
    name: string
    age: number
}

type PersonKeys = keyof Person // type PersonKeys = "name" | "age"

type Person2 = {
    [P in  PersonKeys]: Person[P]
} // type Person2 = { name: string, age: number }

infer 占位 声明一个类型

type ReturnType<T extends (...args: any[]) => any> = T extends (...args: any[]) => infer R ? R : any
type Sum = (a: number, b: number) => number
type R1 = ReturnType<Sum> // type R1 = number

const sum: Sum = (a: number, b: number): R1 => a + b // type Sum = (a: number, b: number) => number
// ReturnT<Sum> 就是函数返回值的类型
const res = sum(2, 3) // const res: number
console.log(res) // 5

extends 继承类

interface Person {
    name: string
    age: number
}
interface P extends Person {
    hobby: string[]
}
// 空对象时 Type '{}' is missing the following properties from type 'P': hobby, name, age(2739)
const person: P  = { 
    name: "zf",
    age: 10,
    hobby: ["teach", "eat", "sleep"]
}
// ---------------------------------------------------------------
class Person {
    name: string
    age: number
    constructor(name: string, age: number) {
        this.name = name
        this.age = age
    }
}
interface P extends Person {
    hobby: string[]
}
// 空对象时 Type '{}' is missing the following properties from type 'P': hobby, name, age(2739)
const person: P  = { 
    name: "zf",
    age: 10,
    hobby: ["teach", "eat", "sleep"]
}

Partial 将类型的属性转成可选项？

type Person = {
    name: string
    age: number
}
type P = Partial<Person>
// type P = {
//   name?: string | undefined;
//   age?: number | undefined;
// }
const person: P = {
    name: "zf"
}

Pick 从目标类型中 获取制定属性的类型

type Pick<T, U extends keyof T> = {
    [key in U]: T[key]
}

type Person = {
    name: string
    age: number
}

type P = Pick<Person, "name">
// type P = {
//   name: string
// }

type P2 = Pick<Person, "name" | "age">
// type P2 = {
//  name: string
//  age: number
// }

Mutable Readonly

type Person = {
    readonly name: string
    age: number
}
const person: Person = {
    name: "amin",
    age: 18
}
person.age = 17
person.name = "zf" // Cannot assign to 'name' because it is a read-only property.
// --------------------------------------
type Mutable<T> = {
  -readonly [P in keyof T]: T[P] // 去除属性的只读属性
}
type Person = {
    readonly name: string
    age: number
}
const person: Mutable<Person> = {
    name: "amin",
    age: 18
}
person.age = 17
person.name = "zf"
// ---------------------------------------------
type Readonly<T> = {
  +readonly [P in keyof T]: T[P] // 添加属性的只读属性
}
type Person = {
    name: string
    age: number
}
const person: Readonly<Person> = {
    name: "amin",
    age: 18
}
person.age = 17 // Cannot assign to 'age' because it is a read-only property.(2540)
person.name = "zf" // Cannot assign to 'name' because it is a read-only property.(2540)

Record

type Record<K extends keyof any, T> = { [P in K]: T };
type Sum = {
    a: any,
    b: any
}
// 将类型中所有的键的类型都转成目标类型
const sum: Record<keyof Sum, number> = {
    a: 5,
    b: 6
}

Exclude

type Exclude<T, U> = T extends U ? never : T;
// 从T中找出U中没有的值

type PersonKeys = Exclude<"name"| "age" | "gender", "name" | "hobby"> // type Person = "age" | "gender"

Extract

type Extract<T, U> = T extends U ? T : never;
// 从T中找出U中有的值
type PersonKeys = Extract<"name"| "age" | "gender", "name" | "hobby"> // type PersonKeys = "name"

Omit

type Omit<T, K> = Pick<T, Exclude<keyof T, K>> 
// 使用
type Foo = Omit<{name: string, age: number}, 'name'> // -> { age: number }
// Pick<{name: string, age: number}, Exclude<"name" | "age", "name">> 
// Pick<{name: string, age: number}, "age"> 
// { age: number }

type Omit2<T, K> = Pick<T, Extract<keyof T, K>>

// 使用
type Foo = Omit2<{name: string, age: number}, 'name'> // -> { name: string }
// Pick<{name: string, age: number}, Extract<"name" | "age", "name">> 
// Pick<{name: string, age: number}, "name"> 
// { name: string }

AxiosReturnType

import { AxiosPromise } from 'axios' // 导入接口
type AxiosReturnType<T> = T extends (...args: any[]) => AxiosPromise<infer R> ? R : any

// 使用
type Resp = AxiosReturnType<Api> // 泛型参数中传入你的 Api 请求函数