Vue3+TypeScript从入门到精通系列之：泛型

一、TypeScript泛型代码

(() => {


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

//定义一个函数，传入两个参数，第一个参数是数据，第二个参数是数量，

function getArr(value: number,count: number): number[] {
  //根据数据和数量产生一个数组
  const arr: number[] = []
  for(let i = 0; i < count; i++) {
    arr.push(value)
  }
  return arr

}

const arr1 = getArr(26,3)
console.log(arr1)


function getArr1<T>(value: T,count: number): T[]{
  //根据数据和数量产生一个数组
  const arr: Array<T> = []
  for (let i = 0; i < count; i++){
    arr.push(value)
  }
  return arr
}

const arr2 = getArr1<number>(28.2387632,4)
const arr3 = getArr1<string>("a,b,c",5)
console.log(arr2)
console.log(arr2[0].toFixed(3))

console.log(arr3)
console.log(arr3[0].split(","))

})()

二、TypeScript泛型代码转为JS代码

 tsc ./泛型.ts

泛型.js代码如下所示：

(function () {
    //泛型:定义函数、接口、类的时候不能确定使用的数据类型，而是在使用函数、接口、类的时候才能确定数据的类型
    //定义一个函数，传入两个参数，第一个参数是数据，第二个参数是数量，
    function getArr(value, count) {
        //根据数据和数量产生一个数组
        var arr = [];
        for (var i = 0; i < count; i++) {
            arr.push(value);
        }
        return arr;
    }
    var arr1 = getArr(26, 3);
    console.log(arr1);
    function getArr1(value, count) {
        //根据数据和数量产生一个数组
        var arr = [];
        for (var i = 0; i < count; i++) {
            arr.push(value);
        }
        return arr;
    }
    var arr2 = getArr1(28.2387632, 4);
    var arr3 = getArr1("a,b,c", 5);
    console.log(arr2);
    console.log(arr2[0].toFixed(3));
    console.log(arr3);
    console.log(arr3[0].split(","));
})();

三、泛型.js代码输出如下所示

node ./泛型.js
[ 26, 26, 26 ]
[ 28.2387632, 28.2387632, 28.2387632, 28.2387632 ]
28.239
[ 'a,b,c', 'a,b,c', 'a,b,c', 'a,b,c', 'a,b,c' ]