TypeScript泛型

泛型函数

作用：提高类型的可复用性

语法：function xxx(s : T): T {}

使用：

1.简写：xxx()

function fn(x: T): T {
  return x
}

fn("str")
fn(34)
fn([])

2.完整写法xxx<类型>()（ts类型推论不准时使用）

如果不使用完整写法，代码会报错

function fn(x: T): T {
  return x
}

type MyFile = {
  name: string,
  author: string,
  size?: number,
  price?:number
}

let f = fn({ name: '我与地坛', author: '史铁生' })
if (f.size) { 
  f.size
}

泛型别名和泛型接口

使用场景：有大量相似的对象结构

语法：type Xxx = { data: T } 或 interface Xxx { data: T }

例如：

type LoginApiRES = {
  code: number,
  message: string,
  data: {
    token: string,
    name:string
  }
}

type UserListApiRES = {
  code: number,
  message: string,
  data: {
    id: string,
    name:string
  }[]
}

const l: LoginApiRES = {
  code: 200,
  message: "响应成功",
  data: {
    token: 'we874hdfh93',
    name:'石榴'
  }
}

const u: UserListApiRES = {
  code: 304,
  message: '缓存中取数据',
  data: [{
    id: "32425",
    name:'菠萝'
  }]
}

以上的代码中，使用类型别名定义了重复的字段，我们可以使用泛型别名提取公共的部分

type RES = {
  code: number,
  message: string,
  data: T
}

type LoginApiRES = RES<{
  token: string,
  name: string
}>

type UserListApiRES = RES<{
  id: string,
  name: string
}[]>

const l: LoginApiRES = {
  code: 200,
  message: "响应成功",
  data: {
    token: 'we874hdfh93',
    name: '石榴'
  }
}

const u: UserListApiRES = {
  code: 304,
  message: '缓存中取数据',
  data: [{
    id: "32425",
    name: '菠萝'
  }]
}

泛型工具

Partial

作用：设置所有属性为可选的

语法：: Partial<类型>

type MyType = {
  name: string,
  age: number,
  gender:string,
  gender1:string,
  gender2:string,
  gender3:string,
}

// 设置所有属性只读后，可以不用一下子把所有属性都写一遍
let obj: Partial = {
  name:'李华'
}
// 属性可以在后续操作中添加，而且有提示
obj.gender1 = "sdfsf"

Readonly

作用：设置所有属性为只读的

语法：: Readonly<类型>

type Option = {
  baseURL: string,
  url:string
}

let axiosOption: Readonly = {
  baseURL: "localhost:3000",
  url:'/login'
}

// 此时修改配置会报错,因为里面的属性都是只读属性
axiosOption.baseURL = "sdfklj"

Pick

作用：从对象类型中挑选出部分属性，组成新的对象类型

语法：: Pick<类型, "属性1"|"属性2">

type User = {
  name: string,
  age: number,
  sex: string,
  id:string
}

let u: Pick = {
  name: '张三',
  age:23
}

// 相当于以下代码
// let u: { name: string, age: number } = {
//   name: "张三",
//   age:23
// }

Omit

作用：从对象类型中删除部分属性，剩余的属性组成新的对象类型

语法：: Omit<类型, "要删除的属性1"|"要删除的属性2">

type User = {
  name: string,
  age: number,
  sex: string,
  id: string
}

let u1: Omit = {
  name: '张三',
  age: 23
}