Typescript泛型详解解读

泛型 : 在界说函数、接口、类的时间不能预先确定要使用的数据的类型,而是在使用函数、接口、类的时间才能确定数据的类型
普通方法示例：
需求:界说一个函数,传入两个参数,第一参数是数据,第二个参数是数目,函数的作用:根据数目产生对应个数的数据,存放在一个数组中

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

复制代码

普通方法示例2：
 需求:可以传入任意类型的数据,返返来的是存储这个任意类型数据的数组

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

复制代码

泛型方法示例：

1. (() => {
3.   function getArr4<T>(value: T, count: number): T[] {
4.     // 根据数据和数量产生一个数组
5.     // const arr: T[] = []
6.     const arr: Array<T> = []
7.     for (let i = 0; i < count; i++) {
8.       arr.push(value)
9.     }
10.     return arr
11.   }
12.   const arr1 = getArr4<number>(200.12345, 5)
13.   const arr2 = getArr4<string>('abcdefg', 5)
14.   console.log(arr1)
15.   console.log(arr2)
16.   console.log(arr1[0].toFixed(3))  // 有智能提示的信息
17.   console.log(arr2[0].split(''))   // 有智能提示的信息
19.   })()
20.       

复制代码

以上代码具体解读：

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

• const arr1 = getArr4<number>(200.12345, 5)：调用 getArr4 函数，明白指定类型参数 T 为 number。传入数值 200.12345 作为 value 参数，5 作为 count 参数。函数执行后会返回一个包含 5 个 200.12345 的数组，并将其赋值给 arr1。
  
• const arr2 = getArr4<string>('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 类型的可用方法。
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。