typescript - 6.泛型
泛型函数的声明方式
// 普通函数
function info(name : string, age : number) : string {
return name + '的年龄为：' + age
}
// 匿名函数
let info = function (name : string, age : number) : string {
return name + '的年龄为：' + age
}
// 匿名函数 2
let info : (name : string, age : number) => string = function (name, age) {
return name + '的年龄为：' + age
}
PS：匿名函数 2 的声明方式中的“=>”箭头函数，表示函数的返回类型；
那么用泛型来表示上面的匿名函数，我们可以对照的样式来写；
function info<T>(msg : T) : T {
return msg
}
// 匿名函数形式的泛型类型
let myInfo : <T>(msg : T) => T = function (msg) {
return msg
}
PS：变形到这里，你会发现 : <T>(msg : T)这个就是类型了，即：泛型类型
我们也可以以对象类型的调用签名的形式，书写这个泛型类型：
let myInfo2 : {<T>(msg : T) : T} = function (msg) {
return msg
}
泛型接口的演变
泛型不但可以作为类型来使用，还可以继续变形，用对象字面量的形式存在；和上面签名形式一样
// 对象字面量形式的泛型类型
let myInfo2 : {<T>(msg : T) : T} = function (msg) {
return msg
}
PS：如果用{}对象字面量方式，那么=>箭头函数就改成：冒号的对应语法即可；
2. 继续变形，泛型类型支持{}，那么就可以使用接口方式进行分离，有助于复用；
// 将对象字面量形式用接口形式代替
interface Iinfo {
<T>(msg : T) : T
}
let myInfo : Iinfo = function (msg) {
return msg
}
console.log(myInfo<string>('Mr.Lee'))
PS：当然，还可以变形，就是将
interface Iinfo<T> {
(msg : T) : T
}
let myInfo : Iinfo<string> = function (msg) {
return msg
}
console.log(myInfo('Mr.Lee')
泛型类
class MinClas<T>{
public list:T[]=[];
add(value:T):void{
this.list.push(value);
}
min():T{
var minNum=this.list[0];
for(var i=0;i<this.list.length;i++){
if(minNum>this.list[i]){
minNum=this.list[i];
}
}
return minNum;
}
}
var m1=new MinClas<number>(); /*实例化类 并且制定了类的T代表的类型是number*/
m1.add(11);
m1.add(3);
m1.add(2);
alert(m1.min())
var m2=new MinClas<string>(); /*实例化类 并且制定了类的T代表的类型是string*/
m2.add('c');
m2.add('a');
m2.add('v');
alert(m2.min())
泛型接口
一个普通函数类接口
interface ConfigFn{
(value1:string,value2:string):string;
}
var setData:ConfigFn=function(value1:string,value2:string):string{
return value1+value2;
}
setData('name','张三');
泛型接口第一种：
interface ConfigFn {
<T>(value: T): T;
}
var getData: ConfigFn = function <T>(value: T): T {
return value;
}
getData<string>('张三');
getData<string>(1243); //错误
来看第二种写法：
interface ConfigFn<T>{
(value:T):T;
}
function getData<T>(value:T):T{
return value;
}
//也可以写匿名函数的
//let myGetData:ConfigFn<string>=function <T>(value:T):T{
// return value;
//};
let myGetData:ConfigFn<string>=getData;
myGetData('20'); /*正确*/
// myGetData(20) //错误
//可以这样写
let myGetData2: <T>(arg: T) => T = getData;
let output = myGetData2('220'); /*正确*/
赋值还有两种写法
let myGetData2: <T>(arg: T) => T = getData;
let myGetData3: {<T>(value:T):T} = getData;
泛型类
//定义操作数据库的泛型类
class MysqlDb<T>{
add(info:T):boolean{
console.log(info);
return true;
}
updated(info:T,id:number):boolean {
console.log(info);
console.log(id);
return true;
}
}
//想给User表增加数据
// 1、定义一个User类 和数据库进行映射
// class User{
// username:string | undefined;
// pasword:string | undefined;
// }
// var u=new User();
// u.username='张三';
// u.pasword='123456';
// var Db=new MysqlDb<User>();
// Db.add(u);
//2、相关ArticleCate增加数据 定义一个ArticleCate类 和数据库进行映射
class ArticleCate{
title:string | undefined;
desc:string | undefined;
status:number | undefined;
constructor(params:{
title:string | undefined,
desc:string | undefined,
status?:number | undefined
}){
this.title=params.title;
this.desc=params.desc;
this.status=params.status;
}
}
//增加操作
// var a=new ArticleCate({
// title:'分类',
// desc:'1111',
// status:1
// });
// //类当做参数的泛型类
// var Db=new MysqlDb<ArticleCate>();
// Db.add(a);
//修改数据
var a=new ArticleCate({
title:'分类111',
desc:'2222'
});
a.status=0;
var Db=new MysqlDb<ArticleCate>();
Db.updated(a,12);
