TypeScrip中泛型的案例详解

2022-04-15 0 918

泛型的定义

// 需求一: 泛型 可以支持不特定的数据类型, 要求,传入的参数和返回参数一致

// 这种方式虽然能实现传入和返回的参数一致,但是失去类型参数检验
/*
function getData(value: any): any {
    return "success"
}
*/

// 定义泛型解决需求一
// T表示泛型(这里的大写字母可以随便定义,但一般默认为T) 具体什么类型是调用这个方法的时候决定的
function getData<T>(value: T):T{
    return value;
}

// 传入的字符串类型
var get = getData<string>("hello")
console.log(get)

// 传入的类型为数字
var getTwo = getData<number>(666)
console.log(getTwo)

// 需求二:比如有个最小堆算法,需要同时支持返回数字和字符串两种类型,通过类的泛型来实现

// 定义类的泛型
class minCla<T> {
    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 minNum = new minCla<number>();
minNum.add(2);
minNum.add(1);
minNum.add(7);
console.log(minNum.min());  // 返回 1


// 字符的比较是按ascii码比较的
var minNumTwo = new minCla<string>();
minNumTwo.add("c");
minNumTwo.add("z");
minNumTwo.add("a");
console.log(minNumTwo.min())    // 返回a

泛型的接口

// 实现泛型接口的两种方式
// 方式一:
// 定义一个泛型接口
interface Func {
    <T>(value: T): T
}

// 定义一个函数实现泛型接口
var f: Func = function<T>(value: T) {
    return value;
}
f<string>("hello")
f<number>(666)

// 方式二:
interface FuncONe {
    <T>(value: T): T
}

var f1: FuncONe = function<T>(value: T):T {
    return value;
}

f1<string>("world")
f1<number>(666)

实现泛型类

/*
1、定义一个User类,这个类的作用是映射数据库字段
2、然后定义一个MysqlDb的类这个类用于操作数据库
3、然后把User类作为参数传入到MysqlDb中
*/

/*版本一:
class User {
    usernam: string | undefined;
    password: string | undefined;
}

class MysqlDb {
    add(user: User): boolean {
        console.log(user);
        return true;
    }
}

var u1 = new User();
u1.usernam = "pika";
u1.password = "pika"

var msql = new MysqlDb();
msql.add(u1);
*/

// 但是上述定义的表和数据库不能保证传入的数据的正确性
// 版本二
// 定义操作数据库的泛型
class MysqlDb <T>{
    add(info: T): boolean {
        console.log(info);
        return true;
    }
}

// 定义一个user类和数据库进行映射
class User {
    usernam: string | undefined;
    password: string | undefined;
}

var u1 = new User();
u1.usernam = "pika";
u1.password = "pika"

// 实例化一个数据库(类当成一个参数来约束传入参数的类型)
var msql = new MysqlDb<User>();
msql.add(u1);   // 保证传入数据的格式是User类型的

综合案例

需求:
功能: 定义一个操作数据库的库 支持Mysql MongoDb
要求1: Mysql MongoDb功能一样,都有add update delete get方法
注意: 约束统一的规范、以及代码重用
解决方案: 需要约束规范所以要定义接口,需要代码重用所以用到泛型
    1、接口: 在面向对象编程中,接口是一种规范的定义,它定义了行为和动作的规范
    2、泛型:通俗理解:泛型就是解决 类 接口 方法的复用性
*/

// 实现流程:
// 定义一个接口,对所有方法的约束
interface DbMethod<T> {
    add(info: T): boolean;
    update(info: T, id: number): boolean;
    delete(id: number): boolean;
    get(id: number): boolean;
}

// 定义一个Mysql数据库类,注意:要实现泛型接口 这个类也应该是一个泛型类
class MysqlDbs<T> implements DbMethod<T> {
    add(info: T): boolean {
        console.log(info);
        return true;
    }    
    
    update(info: T, id: number): boolean {
        var obj = {
            username: "xxxx",
            password: "666"
        }
        return true
    }

    delete(id: number): boolean {
        console.log("delete success");
        return true
    }
    
    get(id: number): boolean {
        var arr = [
            {username: "xxx",
            password: "xxxxx"
            }
        ];
        return true
    }
}
// 测试:
class Users {
    username: string | undefined;
    password: string | undefined;
};

// 使用Users类来约束传入的参数正确性
var mysql = new MysqlDbs<Users>();
var u = new Users();
u.username = "xxxx"
u.password = "xxxxxx"
// 模拟数据库的增删改查
mysql.add(u);
mysql.get(1);
mysql.update(u, 1);
mysql.delete(1)



// 定义一个MongoDb数据库类,注意:要实现泛型接口 这个类也应该是一个泛型类
class MongoDb<T> implements DbMethod<T> {
    add(info: T): boolean {
        console.log(info);
        return true;
    }    
    
    update(info: T, id: number): boolean {
        var obj = {
            username: "xxxx",
            password: "666"
        }
        return true
    }

    delete(id: number): boolean {
        console.log("delete success");
        return true
    }
    
    get(id: number): boolean {
        var arr = [
            {username: "xxx",
            password: "xxxxx"
            }
        ];
        return true
    }
}

// 测试:
class Userd {
    username: string | undefined;
    password: string | undefined;
};

// 使用Users类来约束传入的参数正确性
var mysql = new MongoDb<Userd>();
var u = new Userd();
u.username = "xxxx"
u.password = "xxxxxx"
// 模拟数据库的增删改查
mysql.add(u);
mysql.get(1);
mysql.update(u, 1);
mysql.delete(1)

到此这篇关于TypeScrip中泛型的案例详解的文章就介绍到这了,更多相关TypeScrip中泛型内容请搜索NICE源码以前的文章或继续浏览下面的相关文章希望大家以后多多支持NICE源码!

免责声明:
1、本网站所有发布的源码、软件和资料均为收集各大资源网站整理而来;仅限用于学习和研究目的,您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。 不得使用于非法商业用途,不得违反国家法律。否则后果自负!

2、本站信息来自网络,版权争议与本站无关。一切关于该资源商业行为与www.niceym.com无关。
如果您喜欢该程序,请支持正版源码、软件,购买注册,得到更好的正版服务。
如有侵犯你版权的,请邮件与我们联系处理(邮箱:skknet@qq.com),本站将立即改正。

NICE源码网 JavaScript TypeScrip中泛型的案例详解 https://www.niceym.com/30122.html