TypeScrip中泛型的案例详解

泛型的定义

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

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

(0)

相关推荐

  • 前端深入理解Typescript泛型概念

    首先介绍一下泛性的概念 泛型程序设计(generic programming)是程序设计语言的一种风格或范式.泛型允许程序员在强类型程序设计语言中编写代码时使用一些以后才指定的类型,在实例化时作为参数指明这些类型. 泛型是指在定义函数,接口或者类的时候,不预先定义好具体的类型,而在使用的时候在指定类型的一种特性. 先举一个简单的例子 假设我们定义一个函数,它可以接收一个number类型做为参数,并且返回一个number类型. function genericDemo(data: number):

  • 深入理解typescript中的infer关键字的使用

    infer 这个关键字,整理记录一下,避免后面忘记了.有点难以理解呢. infer infer是在 typescript 2.8中新增的关键字. infer 可以在 extends 条件类型的字句中,在真实分支中引用此推断类型变量,推断待推断的类型. 例如:用infer推断函数的返回值类型 type ReturnType<T> = T extends (...args: any[]) => infer R ? R : any; type fn = () => number type

  • 如何通俗的解释TypeScript 泛型

    概述 在 TypeScript 中我们会使用泛型来对函数的相关类型进行约束.这里的函数,同时包含 class 的构造函数,因此,一个类的声明部分,也可以使用泛型.那么,究竟什么是泛型?如果通俗的理解泛型呢? 什么是泛型 泛型(Generics)是指在定义函数.接口或类的时候,不预先指定具体的类型,而在使用的时候再指定类型的一种特性. 通俗的解释,泛型是类型系统中的"参数",主要作用是为了类型的重用.从上面定义可以看出,它只会用在函数.接口和类中.它和js程序中的函数参数是两个层面的事物

  • 教你使用webpack打包编译TypeScript代码

    TypeScript打包 webpack整合 通常情况下,实际开发中我们都需要使用构建工具对代码进行打包: TS同样也可以结合构建工具一起使用,下边以webpack为例介绍一下如何结合构建工具使用TS: 步骤如下: 初始化项目 进入项目根目录,执行命令 npm init -y,创建package.json文件 下载构建工具 命令如下: npm i -D webpack webpack-cli webpack-dev-server typescript ts-loader clean-webpac

  • TypeScript泛型参数默认类型和新的strict编译选项

    概述 TypeScript 2.3 增加了对声明泛型参数默认类型的支持,允许为泛型类型中的类型参数指定默认类型. 接下来看看如何通过泛型参数默认将以下react组件从js(和jsX)迁移到 TypeScript (和TSX): class Greeting extends react.Component { render() { return <span>Hello, {this.props.name}!</span>; } } 为组件类创建类型定义 咱们先从为Component类

  • 为什么TypeScript的Enum会出现问题

    目录 发生了什么呢? 什么时候用 控制枚举的数字 Bit值 控制索引 非数字枚举 结论 TypeScript引入了很多静态编译语言的特性,比如class(现在是JavaScript的一部分了),interface, generics和union types等. 但是今天有一个类型需要着重讨论下,这就是enum. 对于很多的静态语言来说,枚举是一个很非常常见的语言特性.比如,c,c#,java和swift.枚举就是你在代码里可以用的一组常量. 我们用TypeScript来新建一个enum来代表一周

  • TypeScrip中泛型的案例详解

    泛型的定义 // 需求一: 泛型 可以支持不特定的数据类型, 要求,传入的参数和返回参数一致 // 这种方式虽然能实现传入和返回的参数一致,但是失去类型参数检验 /* function getData(value: any): any { return "success" } */ // 定义泛型解决需求一 // T表示泛型(这里的大写字母可以随便定义,但一般默认为T) 具体什么类型是调用这个方法的时候决定的 function getData<T>(value: T):T{

  • Python中return用法案例详解

    python中return的用法 1.return语句就是把执行结果返回到调用的地方,并把程序的控制权一起返回 程序运行到所遇到的第一个return即返回(退出def块),不会再运行第二个return. 例如: def haha(x,y): if x==y: return x,y print(haha(1,1)) 已改正: 结果:这种return传参会返回元组(1, 1) 2.但是也并不意味着一个函数体中只能有一个return 语句,例如: def test_return(x): if x >

  • Java jvm中Code Cache案例详解

    Code Cache JVM生成的native code存放的内存空间称之为Code Cache:JIT编译.JNI等都会编译代码到native code,其中JIT生成的native code占用了Code Cache的绝大部分空间 相关参数 Codecache Size Options -XX:InitialCodeCacheSize 用于设置初始CodeCache大小 -XX:ReservedCodeCacheSize 用于设置Reserved code cache的最大大小,通常默认是2

  • IIS服务器中部署PHP案例详解

    部署网站前查看一下系统是否已经安装CGI 1.启动iis服务器,打开IIS服务器 打开IIS服务器,点击网站,右击"添加网站" 2.创建网站 点击"添加网站"后,进入页面填写网站相关内容,如:网站名称.物理路径(网站所在文件夹),点击"确定"创建成功 3.PHP设置 点击创建好的网站,点击"处理程序映射",点击右侧的"添加映射模块",在弹出层中输入对应的参数,点击确认 设置默认文档 点击"默认文档

  • Java BigDecimal中divide方法案例详解

    1.首先说一下用法,BigDecimal中的divide主要就是用来做除法的运算.其中有这么一个方法. public BigDecimal divide(BigDecimal divisor,int scale, int roundingMode) 第一个参数是除数,第二个参数代表保留几位小数,第三个代表的是使用的模式. BigDecimal.ROUND_DOWN:直接省略多余的小数,比如1.28如果保留1位小数,得到的就是1.2 BigDecimal.ROUND_UP:直接进位,比如1.21如

  • Python字典中items()函数案例详解

    Python3:字典中的items()函数 一.Python2.x中items():   和之前一样,本渣渣先贴出来python中help的帮助信息: >>> help(dict.items) Help on method_descriptor: items(...) D.items() -> list of D's (key, value) pairs, as 2-tuples >>> help(dict.iteritems) Help on method_de

  • JavaScript 解决ajax中parsererror错误案例详解

    解决ajax的parsererror错误的终极办法(后台传给前台的数据json问题) 出现这个问题的原因是因为后台传给前台的数据出现了问题,ajax对于json的格式特别的严格 下面是会出现这个问题的ajax请求 $.ajax({ type:'get', url:"{php echo $this->createWebUrl('ajax',array('ac'=>'cunByXiangId'))}", data:{id:id}, dataType:'json',//这个地方是

  • C++中inline用法案例详解

    1 引入inline关键字的原因 在c/c++中,为了解决一些频繁调用的小函数大量消耗栈空间(栈内存)的问题,特别的引入了inline修饰符,表示为内联函数,栈空间就是指放置程序的局部数据(也就是函数内数据)的内存空间.在系统下,栈空间是有限的,假如频繁大量的使用就会造成因栈空间不足而导致程序出错的问题,如,函数的死循环递归调用的最终结果就是导致栈内存空间枯竭. 下面我们来看一个例子: #include <stdio.h> #include<string.h> // 函数定义为in

  • js中getBoundingClientRect( )方法案例详解

    一.getBoundingClientRect() 解析 getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置. 语法 rectObject = object.getBoundingClientRect(); 值 rectObject.top:元素上边到视窗上边的距离; rectObject.right:元素右边到视窗左边的距离; rectObject.bottom:元素下边到视窗上边的距离; rectObject.left:元素左边到视窗左边的距离; rect

  • Java中泛型的示例详解

    目录 泛型概述 使用泛型的好处 泛型的定义与使用 定义和使用含有泛型的类 含有泛型的方法 含有泛型的接口 泛型通配符 通配符基本使用 通配符高级使用----受限泛型 泛型概述 我们都知道集合中是可以存放任意对象的,只要把对象存储集合后,那么这时他们都会被提升成Object类型.当我们在取出每一个对象,并且进行相应的操作,这时必须采用类型转换. 大家观察下面代码: public class GenericDemo { public static void main(String[] args) {

随机推荐