Typescript高级: 基于泛型T的函数重载来实现各个类型数据的排序

概述

• 现在我们来实现一个场景，基于泛型来写排序的工具类
• 这个工具类实现对各种类型的数据进行排序
• 目前排序算法选择的是快排

代码实现

// 基于快排，实现一个排序的函数
function quickSort<T>(arr: Array<T>): T[] {
    if (arr.length < 2) { return arr }
    const left: Array<T> = [];
    const right: Array<T> = [];
    const mid = arr.splice(Math.floor(arr.length / 2), 1)[0];
    for (var i = 0; i < arr.length; i++) {
      arr[i] < mid ? left.push(arr[i]) : right.push(arr[i])
    }
    return quickSort(left).concat(mid, quickSort(right))
}

//  对中文进行排序
function sortChinese<T>(arr: Array<T>): T[] {
    return arr.sort(function (firstnum, secondnum) {
      return (firstnum as any).localeCompare(secondnum, "zh-CN")
    })
}

// 中文+英文、数字数组排序混合方法, 分工明确
function sort(data: string, count?: number): string // [可有可无]
function sort<T>(data: T, count?: number): T // 分工明确
function sort(data: any, count: number = 5): any {
    if (typeof data === "string") {
        // 如果是字符串
        return strSelfSort(data, count)// 按照字符串自排序
    }
    if (data instanceof Array) {
        // 如果data是数组
        if (isChinese(data)) {//如果是中文数组
            return sortChinese(data);
        }
        const newArr = data.map((item) => {
            return typeof item === "string" ? strSelfSort(item) : item
        })
        // 英文、数字数组排序
        return quickSort(newArr as any);
    }
}

// 工具函数 ---- 判断数组中是否有中文元素
function isChinese<T>(arr: Array<T>): boolean {
    const reg = /[\u4e00-\u9fa5]+/g;
    return arr.some((item) => {
        return reg.test(item as any)
    })
}

// 工具函数 ---- 字符串自排序
function strSelfSort(str: string, count: number = 5): string {
    // (1) 字符串拆分成数组
    const strArray = str.split('');
    // (2) 数组进行使用快速排序算法来排序
    const strSortArray = quickSort(strArray);
    // (3) 重新把排好序的数组连接成一个字符串返回
    const strResult = strSortArray.join('');
    return strResult.length > 10 ? strResult.substring(0, count) + "..." : strResult;
}

// ------ 通用数组 -------
const numArr = [3, 1.883332, 8, 9, 20, 15, 2, 7, 13, 11, 19, 18, 5, 6, 17, 4];

// ------ 测试字符串 -------
function test1() {
  const str = "bdfaerafdfsd"
  const strResult = sort(str, 10)
  console.log("长度为:", strResult.length)
  console.log("字符串", strResult.toString())
}

// ------ 测试数组 -------
function test2() {
  const result = sort(numArr)
  console.log(result.toString());
}

// ------ 测试数值数组排序2 -------
function test3() {
  const result: number[] = []
  sort<number[]>(numArr).forEach((item: number) => {
    result.push(Number(item.toFixed(2)))
  })
  console.log(result.toString())
}

// ------ 测试字符串数组排序 -------
function test4() {
    const strArr: Array<string> = ["cba", "kkdf", "ndf", "bcdf", "dfd", "cdf"]
    console.log(sort(strArr).toString());
}

// ------ 测试中文排序 -------
function test5() {
  const chineseArr = ["武汉", "郑州", "太原", "济南", "沈阳", "大连"];
  console.log(sort(chineseArr).toString());
}

test1()
console.log("----------test1 完成-----------")
test2()
console.log("----------test2 完成-----------")
test3()
console.log("----------test3 完成-----------")
test4()
console.log("----------test4 完成-----------")
test5()
console.log("----------test5 完成-----------")

• 输出

  长度为: 13
  字符串 aabdddefff...
  ----------test1 完成-----------
  1.883332,2,3,4,5,6,7,8,9,11,13,15,17,18,19,20
  ----------test2 完成-----------
  1.88,2,3,4,5,6,7,8,9,11,13,15,17,18,19,20
  ----------test3 完成-----------
  abc,bcdf,cdf,ddf,dfkk,dfn
  ----------test4 完成-----------
  大连,济南,沈阳,太原,武汉,郑州
  ----------test5 完成-----------
  

• 在TypeScript（以及许多其他编程语言如Java和C#）中
• 泛型（Generics）是一个强大的工具，它允许程序员编写可重用的组件
• 这些组件可以处理多种类型的数据，而不仅仅是特定类型
• 泛型不仅增强了代码的可重用性，还提高了代码的可读性和可维护性

泛型使用的好处

• 1 ）提高代码重用性
  • 泛型允许你编写一个函数、类或接口，它们可以处理多种类型的数据，而不仅仅是特定的数据类型
  • 这避免了为每个数据类型编写单独的代码。例如，在提供的quickSort函数中，通过使用泛型
  • 该函数可以处理任何类型的数组，而不仅仅是数字数组
• 2 ）增强代码可读性
  • 泛型允许你在代码中显式地表示类型参数，这使得代码更容易理解
  • 通过查看函数的签名，你可以立即知道它期望什么样的输入和输出，而无需深入了解函数的实现细节
  • 在sort函数中，通过重载，我们可以清晰地看到该函数可以接受字符串或数组，并且返回相应的类型
• 3 ）减少类型转换错误
  • 泛型可以减少不必要的类型转换错误。在强类型语言中
  • 类型不匹配会导致编译错误，这有助于在开发早期捕获潜在的错误
  • 通过使用泛型，你可以确保函数、类或接口只接受和返回特定类型的值
  • 这减少了在运行时发生类型错误的可能性
• 4 ）灵活的代码结构
  • 泛型使得代码结构更加灵活
  • 你可以编写可以处理多种类型数据的通用组件，并在需要时将它们组合在一起
  • 例如，在sort函数中，根据输入数据的类型
  • 函数可以选择使用不同的排序算法（如快速排序或字符串的localeCompare方法）
• 5 ）更好的性能
  • 虽然泛型本身并不直接提高性能，但它们可以帮助你编写更高效的代码
  • 通过使用泛型，你可以避免不必要的类型转换和装箱/拆箱操作，这些操作可能会对性能产生负面影响
  • 此外，泛型允许你编写更简洁的代码，这可以减少错误并提高整体性能
• 6 ）改进错误检查
  • 在编译时，泛型可以帮助你捕获类型相关的错误
  • 例如，如果你尝试将字符串传递给期望数字的函数，编译器将会报错
  • 这有助于在开发早期发现潜在的错误，并减少在运行时调试和修复错误的时间
• 总之
  • 泛型是TypeScript（和其他支持泛型的编程语言）中一个强大的工具
  • 它可以帮助你编写更加可重用、可读、灵活和高效的代码
  • 通过使用泛型，你可以减少代码冗余，提高代码质量，并加速开发过程
  • 因此，在编写TypeScript代码时，考虑使用泛型来改进你的代码结构和性能是一个很好的做法