TypeScript 泛型的详细使用 ＜T, K, V＞

• 泛型 可以创建可重用的组件，一个组件可以支持多种类型，解决类、接口、方法的复用性，以及对不确定数据类型的使用。

• 泛型字母可以自己随意指定，但是一个泛型字母在同一个函数中每次使用时只会代表一种数据类型。

• 泛型的简单案例

  // 定义一个函数，用于批量生成数字数组
  function getArr1 (value: number, count: number): number[] {
    const arr: number[] = []
    for (let index = 0; index < count; index++) {
      arr.push(value)
    }
    return arr
  }
  // 调用生成数字数组
  const arr1: number[] = getArr1(1, 10)
  
  // 定义一个函数，用于批量生成字符串数组
  function getArr2 (value: string, count: number): string[] {
    const arr: string[] = []
    for (let index = 0; index < count; index++) {
      arr.push(value)
    }
    return arr
  }
  // 调用生成字符串数组
  const arr2: string[] = getArr2('1', 10)
  

  如果遇到上面这样的需求，那么就需要写多个方法来使用，下面通过泛型来进行实现

  // 定义一个泛型函数
  function getArr<T>(value: T, count: number): T[] {
    const arr: T[] = []
    for (let index = 0; index < count; index++) {
      arr.push(value)
    }
    return arr
  }
  // 调用生成数字数组
  const arr3: number[] = getArr<number>(1, 10)
  // 调用生成字符串数组
  const arr4: string[] = getArr<string>('1', 10)
  // 调用生成数字数组，不指定数据类型，默认会自动识传入的数据类型
  const arr5: number[] = getArr(1, 10)
  // 调用生成字符串数组，不指定数据类型，默认会自动识别传入的数据类型
  const arr6: string[] = getArr('1', 10)
  

• 多个泛型参数的使用

  // 多个泛型参数
  function getList<K, V>(key: K, value: V): [K, V] {
    return [key, value]
  }
  const list1 = getList<string, number>('dzm', 20)
  const list2 = getList<number, number>(10, 20)
  // 不传默认会自动识别传入的参数类型
  const list3 = getList('dzm', 20)
  const list4 = getList(10, 20)
  
  
  // 多个泛型参数
  function getList1<K, V>(key: K, value: V, key2: K, value2: V) {
    return [key, value, key2, value2]
  }
  const list5 = getList1<string, number>('dzm', 20, 'xyq', 20)
  const list6 = getList1<number, number>(10, 20, 10, 20)
  // 不指定类型，每个泛型默认会识别传入的第一个参数的数据类型，后面如果有同样的泛型都需要按照一样的数据类型进行传入，否者就会报错
  // 比如第一个参数的泛型是 K，传入的第一个参数是 string, 那么后面 key2 的数据可以也必须是 string。
  const list7 = getList1('dzm', 20, 'xyq', 20)
  const list8 = getList1(10, 20, 10, 20)