详解 Typescript 泛型函数

小黄瓜没有刺2024-03-07 10:12

一. 泛型函数

泛型函数格式1：

js 复制代码 
函数名<泛型类型〉(参数中可以使用泛型类型)：返回值也可以是泛型类型
js 复制代码 
泛型函数格式2：函数名<泛型类型1,泛型类型2>(参数中可以使用泛型类型)：返回值也可以是泛型类型

案例

1. 快速排序

typescript 复制代码 
const quickSort = function <T>(arr: Array<T>): Array<T> {
  if (arr.length < 1) {
    return arr
  }
  let midIndex = Math.floor(arr.length / 2)
  let mid = arr.splice(midIndex, 1)[0]
  let leftArr: Array<T> = [], rightArr: Array<T> = [];

  for (let i = 0; i < arr.length; i++) {
    if (arr[i] < mid) leftArr.push(arr[i]); else rightArr.push(arr[i])
  }
  return [...quickSort(leftArr), mid, ...quickSort(rightArr)]
}

// function quickSort<T>(arr: Array<T>)

2. 泛型函数重载

1. 🀄中文排序

typescript 复制代码 
// 1
const sortChinese = function <T extends string>(arr: Array<T>): Array<T> {
  return arr.sort((firstStr, secondStr) => {
    return firstStr.localeCompare(secondStr, 'zh-CN')
  })
}

// 2
const sortChinese = function <T>(arr: Array<T>): Array<T> {
  return arr.sort((firstStr, secondStr) => {
    // 解决T上方法不存在问题
    return (firstStr as any).localeCompare(secondStr, 'zh-CN')
  })
}

2. 字符串排序

typescript 复制代码 
let str = 'bacf'

const sortString = function (str: string) {
  let stringArray = str.split('')
  // 数组使用快速排序进行排序
  let sortArray = quickSort(stringArray)
  return sortArray.join('')
}

3. 数组混序

typescript 复制代码 
// 判断是否中文
const isChinese = function <T>(arr: Array<T>): boolean {
  let pattern = /[\u4e00-\u9fa5]+/g
  return arr.some(item => {
    return pattern.test(item as string)
  })
}

// 中文+英文 混合排序
const sort = function <T>(arr: Array<T>): Array<T> {
  // 中文数组
  if (isChinese(arr)) {
    return sortChinese(arr)
  }

  let newArr = arr.map(item => {
    return typeof item === 'string' ? sortString(item) : item
  })
	// 英文，数字数组
  return quickSort(newArr as any)
}

4. 中文，英文，数字联合排序（瑕疵版）

typescript 复制代码 
const quickSort = function <T>(arr: Array<T>): Array<T> {
  if (arr.length < 1) {
    return arr
  }
  let midIndex = Math.floor(arr.length / 2)
  let mid = arr.splice(midIndex, 1)[0]
  let leftArr: Array<T> = [], rightArr: Array<T> = [];

  for (let i = 0; i < arr.length; i++) {
    if (arr[i] < mid) leftArr.push(arr[i]); else rightArr.push(arr[i])
  }
  return [...quickSort(leftArr), mid, ...quickSort(rightArr)]
}

const sortChinese = function <T>(arr: Array<T>): Array<T> {
  return arr.sort((firstStr, secondStr) => {
    return (firstStr as any).localeCompare(secondStr, 'zh-CN')
  })
}

const sortString = function (str: string, count: number = 5) {
  let stringArray = str.split('')
  let sortArray = quickSort(stringArray)
  let resStr = sortArray.join('')
  return resStr.length > 10 ? resStr.slice(0, count) : resStr
}

// 判断是否中文
const isChinese = function <T>(arr: Array<T>): boolean {
  let pattern = /[\u4e00-\u9fa5]+/g
  return arr.some(item => {
    return pattern.test(item as unknown as string)
  })
}

const isString = function (val: any): val is string {
  return typeof val === 'string'
}

// 中文+英文 混合排序
const sort = function <T>(data: T, count: number = 5): Array<T> | string | undefined {
  if (isString(data)) {
    return sortString(data, count)
  }
  if (data instanceof Array) {
    if (isChinese(data)) {
      return sortChinese(data)
    }

    let newArr = data.map(item => {
      return typeof item === 'string' ? sortString(item) : item
    })

    return quickSort(newArr as any)
  }
}

// console.log(sort('bascbzs'));
console.log(sort(['这里', '哈哈']));

断言错误！！

5. 泛型函数重载方式

typescript 复制代码 
const quickSort = function <T>(arr: Array<T>): Array<T> {
  if (arr.length < 1) {
    return arr
  }
  let midIndex = Math.floor(arr.length / 2)
  let mid = arr.splice(midIndex, 1)[0]
  let leftArr: Array<T> = [], rightArr: Array<T> = [];

  for (let i = 0; i < arr.length; i++) {
    if (arr[i] < mid) leftArr.push(arr[i]); else rightArr.push(arr[i])
  }
  return [...quickSort(leftArr), mid, ...quickSort(rightArr)]
}

const sortChinese = function <T>(arr: Array<T>): Array<T> {
  return arr.sort((firstStr, secondStr) => {
    return (firstStr as any).localeCompare(secondStr, 'zh-CN')
  })
}

const sortString = function (str: string, count: number = 5) {
  let stringArray = str.split('')
  let sortArray = quickSort(stringArray)
  let resStr = sortArray.join('')
  return resStr.length > 10 ? resStr.slice(0, count) : resStr
}

// 判断是否中文
const isChinese = function <T extends string>(arr: Array<T>): boolean {
  let pattern = /[\u4e00-\u9fa5]+/g
  return arr.some(item => {
    return pattern.test(item)
  })
}

const isString = function (val: any): val is string {
  return typeof val === 'string'
}

// 中文+英文 混合排序
// 字符串重载（可省略）
function sort(data: string): string
// 数组重载
function sort<T>(data: T, count?: number): T
// 实现签名
function sort(data: any, count: number = 5): any {
  if (isString(data)) {
    return sortString(data, count)
  }
  if (data instanceof Array) {
    if (isChinese(data)) {
      return sortChinese(data)
    }

    let newArr = data.map(item => {
      return typeof item === 'string' ? sortString(item) : item
    })

    return quickSort(newArr as any)
  }
}

console.log(sort('bascbzs'));
// console.log(sort(['这里', '哈哈']));

ref函数重载签名

typescript 复制代码 
// 函数重载
export function ref<T extends object>(value: T): ToRef<T>
export function ref<T>(value: T): Ref<UnwrapRef<T>>
export function ref<T = any>(): Ref<T | undefined>
export function ref(value?: unknown) {
  return createRef(value)
}
typescript 复制代码 
export declare interface Ref<T = any>{
  value: T;
  [RefSymboll]: true
}

二. 泛型工厂函数

工厂函数类型定义：代表所有类的构造函数【等价JS的构造函数】的函数类型

泛型工厂函数定义：一个可以创建任意类对象的通用函数 工厂函数应用场景：

使用场景1：在一些不方便直接 new 类名（）格式来创建对象的创建，例如：后面讲解的装饰器中就多次用到。

使用场景2：在一些项目测试或者调试中简化代码使用。

简略promise

typescript 复制代码 
type PromiseFuncType = (resolve: string, reject: string) => any

class MYPromise {
  constructor(promiseFunc: PromiseFuncType) {
    promiseFunc('success', 'fail')
  }
}

let p = new MYPromise(function(resolve, reject): void {
  console.log(resolve, reject);
})

1. interface的两种方式

typescript 复制代码 
// 1
type commonFunc = (...args: any) => any
// 当作函数类型使用
interface commonFuncInter {
  (...args: any): any
}

// 2
// 当作对象类型使用
interface commonFuncInter {
  eat: (...args: any) => any
}
let func: commonFuncInter[eat] = function(count: string, money: number): void {}

2. 类的类型

typescript 复制代码 
class CommercialBank {
  public address: string = 'bj'
  public name: string = 'ww'
  static count: number

  constructor(name: string, address: string) {
    this.address = address
    this.name = name
  }
  loan(): void {
    console.log(this.name + "银行贷款");

  }
}

// 类的抽象
type CommercialBankType = new (...arg: any) => CommercialBank
type ConstructorType = new (...arg: any) => any

let Constructor: ConstructorType = CommercialBank
let p1 = new Constructor('广大银行', '哈哈园')

工厂函数类型定义：代表任意一个类的构造函数【等价Js的构造函数】的函数类型。

1.类构造函数对象变量

2.创建类对象的一个类型

3. 工厂函数

typescript 复制代码 
// 相当于约束constructor
function createInstanceFactory (Constructor: { new (...arg: any):any }) {
  console.log(Constructor.name +"被创建对象")
  new Constructor("广大银行"，"万绿园")
}

4. 泛型工厂函数

typescript 复制代码 
function createInstanceFactory<T>(Constructor: { new (...arg: any): T }) {
  console.log(Constructor.name +"被创建对象")
  new Constructor("广大银行"，"万绿园")
}

// 类型 -> CommercialBank 和 类 -> CommercialBank
let p3 = createInstanceFactory<CommercialBank>(CommercialBank)

5. 返回值类型约束

typescript 复制代码 
type MyClassDecorator = <T>(targetClass: new (...args: any[]) => T) => void

function Controller(rootPath: string): MyClassDecorator {
  return function(targetClass) {}
}

// 或者
type MyClassDecorator = <T>(targetClass: { new (...args: any[]): T }) => void

三. 泛型函数&交叉类型

交叉类型是多个类型属性和方法的合并后的类型，属于多个类型的并集，必须是两个类型的全部属性和方法才能赋值给交叉类型变量。【可选属性和方法除外】

而联合类型的变量可以接受联合类型中任意一种数据类型全部属性和方法，也可以是两个类型的全部属性和全部方法【可选属性和方法除外】

获取属性和方法区别： 交叉类型变量可以获取两个类型的任意厲性和任意方法，而联合类型的变量只能获取两个类型的共同属性和方法【交集属性和交集方法】

交叉类型应用场景： 通常用于多个对象合并的场景。比如：我们把用户信息，用户角色信息合并成一个对象然后输出。当然后端可以通过连接查询的SQL 语句来完成到前端的多对象输出，但大多需要表的外键来支持，比如用户和角色就需要 角色表有用户外键，对于现实生活中有必须关联在一起的实体【比如商品和库存信息】一般建议数据表用外键来支持前端多个对象的合并输出，虽然影响了效率，但也保证了表的数据合理性和完整性。

但如果我们临时需要随机把两个根本没有外键关联的数据表取出来的对象合并在一起输出，比如用户信息和日志信息，商品信息和日志信息，订单信息和日志信息，我们就可以用交叉类型来完成。因为我们不可能为了这个临时的对象合并需求把所有的这些表都建立起外键，须知外键太多不仅增加了数据表维护的负担，而且也有较大的影响了表操作效率。

交叉类型合并两个对象

typescript 复制代码 
type objType1 = { username: string, age: number }
type objType2 = { custname: string, phone: number }


// 合并两个对象
let obj = {} as objType1 & objType2
let first: objType1 = { username: '小明', age: 17 }
let second: objType2 = { custname: '小花', phone: 123456 }

Object.keys(first).forEach(key => {
  obj[key] = first[key]
})
Object.keys(second).forEach(key => {
  obj[key] = second[key]
})

console.log(obj);

泛型实现合并对象

typescript 复制代码 
let button = {
  btntype: 'normal',
  text: "跳转到百度"
}

let link = {
  alt: 'goto baidu',
  href: 'http://www.baidu.com'
}

let href = {
  inktype: "外网",
  target: 'Openlocation._blank'
}

function cross<T extends object, U extends object>(obj1: T, obj2: U): T & U {
  // 推断
  let combine = {} as T & U
  Object.keys(obj1).forEach(key => {
    combine[key] = obj1[key]
  })
  Object.keys(obj2).forEach(key => {
    // 是否已经存在？
    if (!combine.hasOwnProperty(key)) {
      combine[key] = obj2[key]
    }
  })
  return combine
}

let c1 = cross(button, link)
console.log(c1);
json 复制代码 
{
  btntype: 'normal',
  text: '跳转到百度',
  alt: 'goto baidu',
  href: 'http://www.baidu.com'
}

泛型重载实现多个交叉类型合并

typescript 复制代码 
let button = {
  btntype: 'normal',
  text: "跳转到百度"
}

let link = {
  alt: 'goto baidu',
  href: 'http://www.baidu.com'
}

let href = {
  inktype: "外网",
  target: 'Openlocation._blank'
}

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) {
  let combine = {} as T & U
  Object.keys(obj1).forEach(key => {
    combine[key] = obj1[key]
  })
  Object.keys(obj2).forEach(key => {
    if (!combine.hasOwnProperty(key)) {
      combine[key] = obj2[key]
    }
  })

  if (obj3) {
    // T & U 为 T & U & V 的子集，所以可以进行代码运行前的推断
    // let combineUnion = combine as T & U & V
    let combineUnion = combine as typeof combine & V
    Object.keys(obj3).forEach(key => {
      if (!combine.hasOwnProperty(key)) {
        combineUnion[key] = obj3[key]
      }
    })
    return combineUnion
  }

  return combine
}

let c1 = cross(button, link, href)
console.log(c1);
json 复制代码 
{
  btntype: 'normal',
  text: '跳转到百度',
  alt: 'goto baidu',
  href: 'http://www.baidu.com',
  inktype: '外网',
  target: 'Openlocation._blank'
}
相关推荐
bloxed15 分钟前
前端文件下载多方式集合
前端·filedownload
余生H20 分钟前
前端Python应用指南（三）Django vs Flask：哪种框架适合构建你的下一个Web应用？
前端·python·django
LUwantAC29 分钟前
CSS（四）display和float
前端·css
cwtlw33 分钟前
CSS学习记录20
前端·css·笔记·学习
界面开发小八哥37 分钟前
「Java EE开发指南」如何用MyEclipse构建一个Web项目？(一)
java·前端·ide·java-ee·myeclipse
米奇妙妙wuu1 小时前
react使用sse流实现chat大模型问答，补充css样式
前端·css·react.js
傻小胖1 小时前
React 生命周期完整指南
前端·react.js
梦境之冢2 小时前
axios 常见的content-type、responseType有哪些？
前端·javascript·http
racerun2 小时前
vue VueResource & axios
前端·javascript·vue.js
m0_548514772 小时前
前端Pako.js 压缩解压库 与 Java 的 zlib 压缩与解压 的互通实现
java·前端·javascript
热门推荐
0119个Web前端交互式3D JavaScript框架和库02ARM学习（31）编译器对overlay方式的支持03玄机平台应急响应—webshell查杀04RAG 实践- Ollama+RagFlow 部署本地知识库05【一文读懂】NTN（非地面网络）技术介绍06(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明07ZZ038 物联网应用与服务赛题第J套08组基轨迹建模 GBTM的介绍与实现（Stata 或 R）09Docker 夺命连环 15 问10VSCode插件 —— Cody AI （免费AI助手！）