TypeScript 泛型-泛型类型

源码

• ts

//声明一个泛型类型的函数
function  Hello(arg:T):T {
    return arg;
}
//声明一个方法该方法引用上面的泛型类型的函数
let myHello:(arg:T) => T = Hello;
alert(myHello('xiaochuan'));

• HTML

• 浏览器效果图

image.png

扩展

• Lam.ts

//简单的解释 => 表达式
//myFunc 函数名称  +  参数类型  + 返回值类型
//后面是定义这个函数的内容  参数必须是 number 类型 返回值也必须是 string 类型
// let myFunc:(a:number) => string = function(a:number):string{
//  return 'hello' + a;
// }
//实际上在后面定义函数实际内容的时候其本身就有 函数检查  所以其实可以将这个函数写成如下所示的样子
let myFunc = function(a:number):string{
    return 'hello' + a;
}
alert(myFunc(2));

• HTML

• 浏览器效果图

image.png

使用另一种方法实现示例一的功能

• ts

// //声明一个泛型类型的函数
function  Hello(arg:T):T {
    return arg;
}
// //声明一个方法该方法引用上面的泛型类型的函数
// let myHello:(arg:T) => T = Hello;
// alert(myHello('xiaochuan'));


//使用另一种写法实现上面的定义
let myHello:{(arg:T):T} = Hello;
alert(myHello('xiaochuan'));

• HTML

• 浏览器效果图

image.png

下面是在接口中泛型的使用

• ts

//下面是在接口中对泛型的使用
//定义一个有一个泛型函数的接口
interface Hello{
    //定义一个泛型的函数
    (arg:T):T;
}
//声明一个泛型函数
function myHello(arg:T):T{
    return arg;
}
//声明一个引用 Hello 接口类型的函数 函数的值引用 myHello 函数
let MH:Hello = myHello;
// alert(MH('xiaochuan'));//这样并没有用到泛型
//下面是使用泛型的好处的实现
alert(MH('xiaochuan'));

• HTML 与上例一致
• 浏览器效果图

image.png

下面是在接口中对泛型使用的另一种写法

• ts

//下面是在接口中对泛型使用的另一种写法
//在接口定义的时候就指定其为泛型
interface Hello{
    (arg:T):T;
}
//声明一个泛型函数
function myHello(arg:T):T{
    return arg;
}
//声明一个引用自接口且为 number 类型的函数
let mh:Hello = myHello;
//这样的话这个参数就只能是 number 类型
alert(mh(29));

• HTML 与上例相同
• 浏览器效果图

image.png