您当前的位置:首页 > 网站建设 > javascript
| php | asp | css | H5 | javascript | Mysql | Dreamweaver | Delphi | 网站维护 | 帝国cms | React | 考试系统 | ajax |

TypeScrip中泛型的案例详解

51自学网 2022-05-02 21:35:49
  javascript

泛型的定义

// 需求一: 泛型 可以支持不特定的数据类型, 要求,传入的参数和返回参数一致// 这种方式虽然能实现传入和返回的参数一致,但是失去类型参数检验/*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中泛型内容请搜索wanshiok.com以前的文章或继续浏览下面的相关文章希望大家以后多多支持wanshiok.com!


node.js做一个简单的爬虫案例教程
React+TypeScript进行项目构建案例讲解
51自学网,即我要自学网,自学EXCEL、自学PS、自学CAD、自学C语言、自学css3实例,是一个通过网络自主学习工作技能的自学平台,网友喜欢的软件自学网站。
京ICP备13026421号-1