Typescript泛型详解解读

泛型 : 在定义函数、接口、类的时候不能预先确定要使用的数据的类型,而是在使用函数、接口、类的时候才能确定数据的类型

普通方法示例：

需求:定义一个函数,传入两个参数,第一参数是数据,第二个参数是数量,函数的作用:根据数量产生对应个数的数据,存放在一个数组中

(() => {
    // 需求:定义一个函数,传入两个参数,第一参数是数据,第二个参数是数量,函数的作用:根据数量产生对应个数的数据,存放在一个数组中
    // 定义一个函数
    function getArr1(value: number, count: number): number[] {
      // 根据数据和数量产生一个数组
      const arr: number[] = []
      for (let i = 0; i < count; i++) {
        arr.push(value)
      }
      return arr
    }
    const arr1 = getArr1(10.25, 3)
    console.log(arr1)
  
  })()
      

普通方法示例2：

 需求:可以传入任意类型的数据,返回来的是存储这个任意类型数据的数组

(() => {

  //需求:可以传入任意类型的数据,返回来的是存储这个任意类型数据的数组
  function getArr3(value: any, count: number): any[] {
    // 根据数据和数量产生一个数组
    const arr: any[] = []
    for (let i = 0; i < count; i++) {
      arr.push(value)
    }
    return arr
  }
  const arr1 = getArr3(100.123, 3)
  const arr2 = getArr3('abc', 3)
  console.log(arr1)
  console.log(arr2)
  // arr1中存储的是数字类型的数据
  // arr2中存储的是字符串类型的数据
  console.log(arr1[0].toFixed(2)) // 没有任何的智能提示的信息(要么有方法名字的提示信息,要么有错误的提示信息)
  console.log(arr2[0].split('')) // 没有任何的智能提示的信息(要么有方法名字的提示信息,要么有错误的提示信息)

  })()

泛型方法示例：

(() => {

  function getArr4(value: T, count: number): T[] {
    // 根据数据和数量产生一个数组
    // const arr: T[] = []
    const arr: Array = []
    for (let i = 0; i < count; i++) {
      arr.push(value)
    }
    return arr
  }
  const arr1 = getArr4(200.12345, 5)
  const arr2 = getArr4('abcdefg', 5)
  console.log(arr1)
  console.log(arr2)
  console.log(arr1[0].toFixed(3))  // 有智能提示的信息
  console.log(arr2[0].split(''))   // 有智能提示的信息

  })()
      

以上代码详细解读：

• function getArr4(value: T, count: number): T[]：
  • getArr4 是函数名。
  •  是类型参数，它是一个类型占位符。通过使用泛型，这个函数可以处理不同类型的数据。
  • value: T 表示函数接受一个类型为 T 的参数 value，这个参数将作为数组元素的内容。
  • count: number 表示函数还接受一个 number 类型的参数 count，用于指定生成数组的长度。
  • : T[] 是函数的返回值类型，表示函数将返回一个元素类型为 T 的数组。
• const arr: Array = []：声明了一个名为 arr 的常量，它是一个类型为 Array（等同于 T[]）的数组，即元素类型为 T 的数组，用于存储生成的数组元素，初始化为空数组。
• for (let i = 0; i < count; i++) { arr.push(value); }：通过 for 循环，根据 count 的值，将 value 重复 count 次添加到 arr 数组中。
• return arr：循环结束后，返回生成的数组 arr。

• const arr1 = getArr4(200.12345, 5)：调用 getArr4 函数，明确指定类型参数 T 为 number。传入数值 200.12345 作为 value 参数，5 作为 count 参数。函数执行后会返回一个包含 5 个 200.12345 的数组，并将其赋值给 arr1。
• const arr2 = getArr4('abcdefg', 5)：调用 getArr4 函数，指定类型参数 T 为 string。传入字符串 'abcdefg' 作为 value 参数，5 作为 count 参数。函数执行后会返回一个包含 5 个 'abcdefg' 的数组，并将其赋值给 arr2。
• onsole.log(arr1[0].toFixed(3))：访问 arr1 数组的第一个元素（类型为 number），调用 toFixed(3) 方法将该数字四舍五入保留三位小数，并将结果打印到控制台。由于 arr1 的类型被明确为 number[]，所以在访问 arr1[0] 时会有智能提示，编辑器能识别出 toFixed 方法是 number 类型的可用方法。
• console.log(arr2[0].split(''))：访问 arr2 数组的第一个元素（类型为 string），调用 split('') 方法将该字符串拆分成字符数组，并将结果打印到控制台。同样，因为 arr2 的类型被明确为 string[]，在访问 arr2[0] 时会有智能提示，编辑器能识别出 split 方法是 string 类型的可用方法。