精华内容
下载资源
问答
  • TS 泛型类与类型约束

    2021-08-11 18:02:16
    泛型类 注意: 不能用于类的静态成员 报错: 实例化: 注意: 实例化时可以不指定类型,此时函数调用时可以传入任意的数据类型 泛型约束 举个栗子: 报错: 泛型约束 注意:T继承了Length接口,表示T受到了一定...

    泛型类

    注意: 不能用于类的静态成员
    在这里插入图片描述

    报错信息:
    在这里插入图片描述
    实例化类:
    在这里插入图片描述
    注意:实例化时可以不指定类型,此时函数调用时可以传入任意的数据类型

    泛型约束

    举个栗子:
    在这里插入图片描述
    报错信息:
    在这里插入图片描述
    泛型约束
    在这里插入图片描述
    注意:T继承了Length接口,表示T受到了一定约束,传入的参数需要具有length属性
    比如:
    在这里插入图片描述

    小结:泛型的好处
    1. 函数和类可以轻松的支持多种类型,增强程序的扩展性
    2. 不必写多条函数重载,冗长的联合类型声明,增强代码的可读性
    3. 灵活控制类型之间的约束

    展开全文
  • ts泛型

    2021-11-22 23:01:53
    class Point<T>{ x:T y:T z:T constructor(x:T,y:T,z:T) { this.x=x this.y=y this.z:z } } const p=new Point<sring>('123','23','231')
    class Point<T>{
    x:T
    y:T
    z:T
    constructor(x:T,y:T,z:T) {
    this.x=x
    this.y=y
    this.z:z
    }
    }
    const p=new Point('123','23','231')//类型推导
    const p2=new Point<sring>('123','23','231')
    const p3:Point<sring>=new Point('123','23','231')
    const p4:sring[]=['123','23','231']
    const p5:Array<string>=['123','23','231']//开发不推举

    展开全文
  • TypeScript中的泛型 1.1 泛型的定义 泛型:软件工程中,我们不仅要创建一致的定义 良好的API,同时也要...通俗理解:泛型就是解决接口方法的复用性、以及对不特定数据类型的支持。 1.2 泛型函数 /** * 泛型的举例

    TypeScript中的泛型

    1.1 泛型的定义

    泛型:软件工程中,我们不仅要创建一致的定义 良好的API,同时也要考虑可重用性。组件不仅能够支持当前的数据类
    型,同时也能支持未来的数据类型,这在创建大型系统时为你提供了十分灵活的功能。
    在像C#和Java这样的语言中,可以使用泛型来创建可重用的组件,’ 个组件可以支持多 种类型的数据。 这样用户就可以
    以自己的数据类型来使用组件。
    I
    通俗理解:泛型就是解决类接口方法的复用性、以及对不特定数据类型的支持。

    1.2 泛型函数

    /**
     * 泛型的举例
     */
    
    //只能返回string类型的数据
    function getData(value: string): string {
        return value;
    }
    
    //同时返回string类型和number
    //方法1:类型定义两个函数,缺点代码冗余
    
    function getData1(value: string): string {
        return value;
    }
    
    function getData2(value: number): number {
        return value
    }
    
    
    //方法2:使用any 缺点,相当于放弃了类型检测
    function getData3(value: any): any {
        return value;
    }
    
    
    /**
     * 需求:传入什么返回什么类型(传入的参数和返回的参数一致)
     * 例如:传入number返回number  传入string返回string
     * 方法:使用泛型,可以支持不特定的数据类型
     * T表示泛型,具体是什么类型调用这个方法的时候决定的
     */
    
    function getData4<T>(value: T): T {
        return value;
    }
    
    //   调用
    console.log(getData4<number>(123));
    console.log(getData4<string>('kjh'));
    
    
    // 同时我们可以任意指定返回的类型参数为any等
    function getData5<T>(value: T): any {
        return value;
    }
    
    
    

    1.3 泛型类

    /**
     * 泛型类的举例
     * 泛型类:比如有个最小堆算法,需要同时支持返回数字和字符串两种类型。
     * 通过类的泛型来实现
     */
    
    class minClass {
        public list: number[] = [];
    
        add(num: number) {
            this.list.push(num);
        }
    
        minNumber(): number {
            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;
        }
    }
    
    //使用minClass
    var m = new minClass();
    m.add(1)
    m.add(2)
    m.add(10)
    m.add(99)
    
    console.log(m.minNumber());
    //1
    
    
    /**
     * 问题来了,上面我们封装的类不能满足传入字符串返回字符串,传入数字返回数字的要求
     * 方法:使用泛型类解决问题
     */
    
    
    class minClass2<T>{
        public list:T[] = [];
    
        add(value:T):void{
            this.list.push(value);
        }
    
        minNumber():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;
        }
    }
    
    //调用泛型类
    //实例化类  并且制定了类的T代表的类型是number
    var m1 = new minClass2<number>();
    m1.add(1)
    m1.add(2)
    m1.add(3)
    console.log(m1.minNumber()); //1
    
    
    //实例化类  并且制定了类的T代表的类型是string
    var m2 = new minClass2<string>();
    m2.add('a')
    m2.add('b')
    m2.add('c')
    console.log(m2.minNumber());  //a
    

    1.4 泛型接口

    /**
     * 泛型接口
     */
    
     
     /**
      * 先定义一个函数接口
      * 缺点:只能传入string类型
      */
    
     interface ConfigFn{
         (value1:string,value2:string):string;
     }
    
     var setData:ConfigFn = function(value1:string,value2:string):string{
         return value1 + value2;
     }
    
     console.log(setData('name','张三'));
    
    
     /**
      * 第一种定义泛型的方法
      * 使用泛型接口
      * 要求:按照我们传入的数据类型进行判断
      */
    
      interface ConfigFn2 {
        <T>(value:T):T;
      }
    
      var getData:ConfigFn2 = function<T>(value:T):T{
          return value;
      }
    
      console.log(getData<string>('张三'));
      console.log(getData<number>(999));
    
    
      /**
      * 第二种定义泛型的方法
      * 使用泛型接口
      * 要求:按照我们传入的数据类型进行判断
      */
    
      interface ConfigFn3<T>{
          (value:T):T;
      }
    
      var myGetData:ConfigFn3<string> = function<T>(value:T):T{
          return value;
      }
    
      console.log(myGetData('20'))
    

    2.1 深入泛型类(超级重点)

    • 把类作为参数来约束数据传入的类型:定义一个User的类这个类的作用就是映射数据库字段
      然后定义一个MysqlDb的类这个类用于操作数据库,之后把user类作为参数传,入到MysqlDb中
    /**
     * 解释:把类作为参数来约束数据传入的类型
     * 定义一个User的类这个类的作用就是映射数据库字段
     * 然后定义一个MysqlDb的类这个类用于操作数据库
     * 后把user类作为参数传,入到MysqlDb中
     */
    
    
    
    //User类来映射数据库字段
    class User{
        userName:string | undefined;
        passWord:string | undefined;
    }
    
    //定义一个MysqlDb的类这个类用于操作数据库
    class MySqlDB{
        add(user:User):boolean{
            console.log(user);
            return true;
        }
    }
    
    
    var u = new User();
    u.userName = 'admin';
    u.passWord = '123456';
    
    var Db = new MySqlDB();
    Db.add(u);
    //User {userName: "admin", passWord: "123456"}
    
    
    
    /**
     * 接下来我们再定义一个文章类
     */
    
    class Article{
        title:string | undefined;
        status:string | undefined;
        desc:string | undefined;
    }
    
    //定义一个MysqlDb的类这个类用于操作数据库
    class MySqlDB2{
        add(article:Article):boolean{
            console.log(article);
            return true;
        }
    }
    
    
    var a = new Article();
    a.title = '时间去哪儿了'
    a.status = '200'
    a.desc = '宝鸡新闻网'
    
    var Db2 = new MySqlDB2();
    Db2.add(a);
    //Article {title: "时间去哪儿了", status: "200", desc: "宝鸡新闻网"}
    
    
    
    • 但是我们发现一个问题,如果数据库中有多个字段,我们需要每次重新定义mysqlDB类
    /**
     * 问题:如果数据库中有多个字段,我们需要每次重新定义mysqlDB类
     * 解决:使用泛型类解决重复封装
     */
    
    //定义操作数据库的泛型类
    class MysqlDB<T>{
        add(info: T): boolean {
            console.log(info);
            return true;
        }
    }
    
    
    //这时候我想定义一个User类
    
    class User {
        userName: string | undefined;
        passWord: string | undefined;
    }
    
    var u = new User();
    u.userName = 'admin'
    u.passWord = '123456'
    
    //使用User类来约束泛型类
    var DB = new MysqlDB<User>();
    
    
    
    //我又想定义一个Aritcile类
    class Article {
        title: string | undefined;
        status: string | undefined;
        desc: string | undefined;
    }
    
    var a = new Article();
    a.title = '时间去哪儿了'
    a.status = '200'
    a.desc = '宝鸡新闻网'
    
    var Db2 = new MysqlDB<Article>();
    
    
    
    //这样我一个泛型类,可以给多个数据库字段使用
    //实例化的时候进行传值
    class Person{
        name:string | undefined;
        age:number|undefined;
        id:number | undefined;
        constructor(params:{
            name:string | undefined,
            age:number | undefined,
            id?:number | undefined
        }){
            this.name = params.name;
            this.age = params.age;
            this.id = params.id;
        }
    }
    
    var p = new Person({
        name:'张三',
        age:20
    })
    
    var db = new MysqlDB<Person>();
    
    
    
    • 数据库修改
    /**
     * 修改数据库数据
     */
    
    //定义操作数据库的泛型类
    class MysqlDB<T>{
        //增加
        add(info: T): boolean {
            console.log(info);
            return true;
        }
    
        //修改
        updata(info:T,id:number):boolean{
            console.log(info)
            console.log(id);
            return true;
        }
    }
    
    
    
    class Person{
        name:string | undefined;
        age:number|undefined;
        id:number | undefined;
        constructor(params:{
            name:string | undefined,
            age:number | undefined,
            id?:number | undefined
        }){
            this.name = params.name;
            this.age = params.age;
            this.id = params.id;
        }
    }
    
    var p = new Person({
        name:'张三',
        age:20
    })
    
    var db = new MysqlDB<Person>();
    db.updata(p,12);
    //Person {name: "张三", age: 20, id: undefined}
    
    p.id = 12;
    db.updata(p,12);
    // Person {name: "张三", age: 20, id: 12}
    
    
    展开全文
  • 如题,本篇我们介绍写ts中的泛型。 什么是泛型呢?我们可以理解为泛型就是在编译期间不确定方法的类型(广泛之意思),在方法调用时,...泛型函数、泛型类、泛型接口。 08_generic.ts /* * ts中泛型 * 泛型就是...

    如题,本篇我们介绍写ts中的泛型。

    什么是泛型呢?我们可以理解为泛型就是在编译期间不确定方法的类型(广泛之意思),在方法调用时,由程序员指定泛型具体指向什么类型。泛型在传统面向对象编程语言中是极为常见的,ts中当然也执行泛型,如果你理解c#或java中的泛型,相信本篇理解起来会很容易。

    泛型函数、泛型类、泛型接口。

    08_generic.ts

    /*
     * ts中泛型
     *    泛型就是在编译期间不确定方法的类型(广泛之意思),在方法调用时,由程序员指定泛型具体指向什么类型
     */
     
    //1 泛型函数
     
    /**
     * 获取数组中最小值 (数字)
     * @param {number[]} arr
     * @returns {number}
     */
    function  getMinNumber(arr:number[]):number{
        var min=arr[0];
        arr.forEach((value)=>{
            if(value<min){
                min=value;
            }
        });
        return min;
    }
     
    /**
     * 获取数组中最小值 (字符串)
     * @param {number[]} arr
     * @returns {number}
     */
    function  getMinStr(arr:string[]):string{
        var min=arr[0];
        arr.forEach((value)=>{
            if(value<min){
                min=value;
            }
        });
        return min;
    }
     
    console.log(getMinNumber([1, 3, 5, 7, 8]));//1
    console.log(getMinStr(["tom","jerry","jack","sunny"]));//jack
     
    /**
     * 获取数组中最小值 (T泛型通用)
     * @param {T[]} arr
     * @returns {T}
     */
    function getMin<T>(arr:T[]):T{
       var min=arr[0];
       arr.forEach((value)=>{
          if(value<min){
              min=value;
          }
       });
        return min;
    }
     
    console.log(getMin([1, 3, 5, 7, 8]));
    console.log(getMin(["tom","jerry","jack","sunny"]));
     
     
    //2 泛型类
    class GetMin<T>{
         arr:T[]=[];
         add(ele:T){
             this.arr.push(ele);
         }
        min():T{
           var min=this.arr[0];
           this.arr.forEach(function (value) {
              if(value<min){
                  min=value;
              }
           });
           return min;
        }
    }
      var gm1= new  GetMin<number>();
       gm1.add(5);
       gm1.add(3);
       gm1.add(2);
       gm1.add(9);
    console.log(gm1.min());
     
    var gm2= new  GetMin<string>();
    gm2.add("tom");
    gm2.add("jerry");
    gm2.add("jack");
    gm2.add("sunny");
    console.log(gm2.min());
     
     
     
    /**
     * 3 泛型函数接口
     */
    interface ConfigFn{
        <T>(value:T):T;
    }
     
    var getData:ConfigFn=function<T>(value:T):T{
        return value;
    }
    getData<string>('张三');
    // getData<string>(1243);  //错误
     
     
    // 类似  Map<String,Object> Param  接口
    interface Param{
        [index:string]:any
    }
     
     
     
    //4 泛型类接口
     
    /**
     * page分页对象
     */
    class Page{
        private currentPage:number=1; //当前页码 默认1
        private pageSize:number=10;//每页条数 默认为10
        private sortName:string; //排序字段
        private sortOrder:string="asc"; // 排序规则 asc | desc 默认为asc正序
     
     
         constructor(param:Param){
             if(param["currentPage"]){
                 this.currentPage=param["currentPage"];
             }
             if(param["pageSize"]){
                 this.pageSize=param["pageSize"];
             }
             if(param["sortName"]){
                 this.sortName=param["sortName"];
             }
             if(param["sortOrder"]){
                 this.sortOrder=param["sortOrder"];
             }
         }
     
        public    getStartNum():number{
            return   (this.currentPage-1)*this.pageSize;
        }
    }
     
     
    class User{
         id:number;//id主键自增
         name:string;//姓名
         sex:number;//性别 1男 2女
         age:number;//年龄
         city:string;//城市
         describe:string;//描述
     
    }
     
    //泛型接口
    interface  BaseDao<T> {
         findById(id:number):T;//根据主键id查询一个实体
         findPageList(param:Param,page:Page):T[];//查询分页列表
         findPageCount(param:Param):number;//查询分页count
         save(o:T):void;//保存一个实体
         update(o:T):void;//更新一个实体
         deleteById(id:number);//删除一个实体
    }
     
    /**
     * 接口实现类
     */
    class UserDao<User> implements BaseDao<User>{
         findById(id:number):User{
     
            return null;
         }
        findPageList(param:Param,page:Page):User[]{
             return [];
        }
        findPageCount(param:Param):number{
             return   0;
        }
        save(o:User):void{
     
        }
        update(o:User):void{
     
        }
        deleteById(id:number){
     
        }
    }

     

    展开全文
  • TS泛型的使用方法

    千次阅读 2020-11-08 15:30:02
    TS泛型 1. 前言 有时候,我们想让一个函数的参数和返回类型是相同的,就可以使用类型变量。 类型变量是一种特殊的变量,用于表示类型而不是值。 function identity<T>(arg : T) : T{ return arg; } ...
  • TS泛型

    2021-01-07 21:45:52
    TS泛型 泛型可以创建可重用的组件,一个组件可以支持多种类型,解决,接口,方法的复用性,以及对不确定数据类型的使用 class MinCla<T>{ public list:T[]=[]; add(value:T):void{ this.list.push(value) } ...
  • Typescript 2.7 新特性:类型断言的!符号的使用项目场景问题描述:原因分析:解决方案: 项目场景 ...其中defaltValue是泛型类中的成员变量,也是泛型类。 原因分析: 提示:这里填写问题的分析: 例如:
  • ts 泛型 高级类型

    千次阅读 2021-01-08 17:33:17
    /* type t = 1 | 2 */ Omit 从泛型 T 中提取出不在泛型 K 中的属性类型,并组成一个新的对象类型 type Omit, K extends keyof any> = Pick, Exclude, K>>; interface IUser { name: string; age: number; address: ...
  • ts 泛型

    2020-11-17 16:23:03
    泛型类 解决类的复用。 深入泛型类 若是不加上类CC作为规范,传入其他值也可以。 定义A类泛型,并且把类作为传入参数的规范,就可以实现类的复用。 泛型接口 普通函数接口 接口泛型加上函数也要定义 第二...
  • ts泛型

    2020-11-09 23:32:45
    泛型 在定义函数、接口或者的时候、不需要先指定具体类型、而在用的时候再指定类型的一种特性。 其实就是把也当作变量(是可变的,未知的)使用,把放在<>尖括号内,表示声名的类型。 定义 function ...
  • TS泛型的使用

    2021-05-18 13:38:20
    泛型是指在定义函数、接口或的时候,不预先指定具体的类型,而在使用的时候在指定类型的一直特征。 2、为什么要使用泛型 因为any会在调试中丢失很多的信息,所以我们不建议使用any,这个时候应该有更好的解决...
  • 什么是泛型 简单来说,泛型是指一种类型在不同地方,存在不同的...或者使用any,但是这样会失去使用ts的类型约束,现在改为使用泛型就可以解决这种问题 function creatValue<T>(a: T):T { return a; } creatValu
  • 一文搞懂 TS 泛型,让你头不再晕

    万次阅读 多人点赞 2020-06-21 10:27:24
    觉得 TypeScript 泛型有点难,想系统学习 TypeScript 泛型相关知识的小伙伴们看过来,本文从八个方面入手,全方位带你一步步学习 TypeScript 中泛型,详细的内容大纲请看下图: 一、泛型是什么 软件工程中,我们...
  • ts类泛型接口扩展

    2021-06-22 08:41:15
    ts是支持函数定义来定义类型的,ts的函数定义一般被称为泛型 如: 它的作用其实就是 可以看出来了,其实这种写法跟 是一样的,那么可以简单理解上面那个,就是传入一个T然后返回一个T,像函数一样, 只不过用来...
  • ts泛型接口

    2021-11-22 22:37:54
    interface iPerson<T1=string,T2=number>{ name:T1 age:T2 } const p:iPerson={ name:"why", age:18 }
  • ts泛型定义

    2021-11-02 22:57:48
    泛型就是解决 接口 方法的复用性、以及对不特定数据类型的支持 泛型函数 function getData<T>(value: T): T { return value; } console.log(typeof getData<number>(123)); console.log(typeof get...
  • ts泛型使用举例

    千次阅读 2018-04-17 15:31:20
    使用ts页有一段时间了,对于我这种泥腿子前端来说,一开始就是为了赶个时髦学学ts,对于它对开发有什没特别的好处并不是非常能体会,反而在一开始的时候觉得为什么要搞一个这么麻烦的东西出来,各种编译错误,几度想...
  • TS泛型<T>

    2021-12-03 17:14:40
    泛型:在定义函数,接口,的时候,不预先指定具体的类型,而在使用的时候在去指定类型的一种特征 函数定义泛型实例如下 //函数泛型格式如下 函数方法名<T>(参数):返回值 function createArray<T>...
  • TS-泛型

    千次阅读 2019-07-22 14:18:09
    TS-泛型 1.当需要 定义 一个 参数 类型 与 返回 值 类型 不确定的 函数 时: 使用 any function test(name:any):any{ console.log('this is 泛型 demo'); /* ... */ return name } test(123); ...
  • ts泛型工具函数

    2021-03-31 10:09:56
    TS泛型语法糖工具函数 partial 将所有持有属性变为可选 interface data { title: String, desc: String, say?: String } const testPartial = (dataOne: data, dataTwo: Partial<data>) => { return...
  • TypeScript-继承-接口-泛型

    千次阅读 2019-08-31 10:55:34
    TypeScript-继承-接口实现继承的简单例子定义接口接口的继承接口的多继承实现多个接口泛型使用泛型函数多重泛型 实现继承的简单例子 class Human{ static totalPeople = 0; constructor(protected name: ...
  • TypeScript泛型类 - 把类作为参数类型的泛型类 */ /* 泛类:泛型可以帮助我们避免重复的代码以及对不特定数据类型的支持(类型校验),下面我们看看把类当做参数的泛型类 1、定义个类 2、把类作为参数来...
  • TS泛型声明语法

    2021-09-26 16:58:07
    泛型方法 普通函数 function foo<T>(x: T): T { return x; } 箭头函数 const foo = <...泛型类 class GenericNumber<T> { zeroValue: T; add: (x: T, y: T) => T; } 泛型接口 interface C
  • 目录TS指南1. TS基本类型2. (class)3. 面向对象的特点3.1 封装... 泛型(Generic) TS指南 1. TS基本类型 类型声明语法: let 变量: 类型; let 变量:{ 属性1:类型, 属性2:类型, [propName: strin
  • typescript (ts) 泛型初探

    2021-01-18 09:57:55
    1.泛型(Generics)是指在定义函数、接口或的时候,不预先指定具体的类型,而在使用的时候再指定类型的一种特性。 2.就是一种不确定的数据类型,可以把运行时的问题提前到编译时期(java里是这么说的 我觉得在ts ...
  • ts 函数 接口 泛型

    2021-06-14 11:08:34
    // a类型 b类型 返回值类型 function ... } } // 泛型 不知道具体类型 // 给fn指定两个泛型TK, a为T类型,b为K类型,返回值T类型 function fn, K>(a:T, b:K):T{ return a; } // 调用时指定TK的类型 fn, string>(1,"2")
  • TS-泛型T

    2021-12-11 19:52:43
    泛型就是在定义,接口,函数不预先指定类型,而是在使用的时候在指定类型的一种特性 泛型的具体应用 function f12<T>(x:T,y:T):T[] { return [x,y] } f12<string | number>('a',2) // 传入联合类型 ...
  • ts中的数组、泛型数组

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 9,831
精华内容 3,932
关键字:

ts泛型类