TypeScript 泛型-泛型类型
2018-01-07 本文已影响1610人
sunxiaochuan
源码
- ts
//声明一个泛型类型的函数
function Hello<T>(arg:T):T {
return arg;
}
//声明一个方法该方法引用上面的泛型类型的函数
let myHello:<T>(arg:T) => T = Hello;
alert(myHello('xiaochuan'));
- HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TypeScript 泛型-泛型类型</title>
</head>
<body>
<script type="text/javascript" src="GenericsDemo.js"></script>
</body>
</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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TypeScript 泛型-泛型类型</title>
</head>
<body>
<!-- <script type="text/javascript" src="GenericsDemo.js"></script> -->
<script type="text/javascript" src="Lam.js"></script>
</body>
</html>
- 浏览器效果图
image.png
使用另一种方法实现示例一的功能
- ts
// //声明一个泛型类型的函数
function Hello<T>(arg:T):T {
return arg;
}
// //声明一个方法该方法引用上面的泛型类型的函数
// let myHello:<T>(arg:T) => T = Hello;
// alert(myHello('xiaochuan'));
//使用另一种写法实现上面的定义
let myHello:{<T>(arg:T):T} = Hello;
alert(myHello('xiaochuan'));
- HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TypeScript 泛型-泛型类型</title>
</head>
<body>
<script type="text/javascript" src="GenericsDemo.js"></script>
<!-- <script type="text/javascript" src="Lam.js"></script> -->
</body>
</html>
- 浏览器效果图
image.png
下面是在接口中泛型的使用
- ts
//下面是在接口中对泛型的使用
//定义一个有一个泛型函数的接口
interface Hello{
//定义一个泛型的函数
<T>(arg:T):T;
}
//声明一个泛型函数
function myHello<T>(arg:T):T{
return arg;
}
//声明一个引用 Hello 接口类型的函数 函数的值引用 myHello 函数
let MH:Hello = myHello;
// alert(MH('xiaochuan'));//这样并没有用到泛型
//下面是使用泛型的好处的实现
alert(MH<string>('xiaochuan'));
- HTML 与上例一致
- 浏览器效果图
image.png
下面是在接口中对泛型使用的另一种写法
- ts
//下面是在接口中对泛型使用的另一种写法
//在接口定义的时候就指定其为泛型
interface Hello<T>{
(arg:T):T;
}
//声明一个泛型函数
function myHello<T>(arg:T):T{
return arg;
}
//声明一个引用自接口且为 number 类型的函数
let mh:Hello<number> = myHello;
//这样的话这个参数就只能是 number 类型
alert(mh(29));
- HTML 与上例相同
- 浏览器效果图
image.png
