泛型 : 在定义函数、接口、类的时候不能预先确定要使用的数据的类型,而是在使用函数、接口、类的时候才能确定数据的类型
普通方法示例:
需求:定义一个函数,传入两个参数,第一参数是数据,第二个参数是数量,函数的作用:根据数量产生对应个数的数据,存放在一个数组中
(() => {// 需求:定义一个函数,传入两个参数,第一参数是数据,第二个参数是数量,函数的作用:根据数量产生对应个数的数据,存放在一个数组中// 定义一个函数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<T>(value: T, count: number): T[] {// 根据数据和数量产生一个数组// const arr: T[] = []const arr: Array<T> = []for (let i = 0; i < count; i++) {arr.push(value)}return arr}const arr1 = getArr4<number>(200.12345, 5)const arr2 = getArr4<string>('abcdefg', 5)console.log(arr1)console.log(arr2)console.log(arr1[0].toFixed(3)) // 有智能提示的信息console.log(arr2[0].split('')) // 有智能提示的信息})()
以上代码详细解读:
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
类型的可用方法。