精华内容
下载资源
问答
  • ts中的泛型相关

    2020-08-03 14:43:19
    -----ts中泛型泛型方法、泛型类、泛型接口-------------------------------- 泛型解决了类、接口、方法复用性,以及对不特定数据类型支持(类型校验) 泛型:在方法调用时,由程序员指定泛型具体是什么类型 --...
    -----ts中泛型、泛型方法、泛型类、泛型接口--------------------------------
    泛型解决了类、接口、方法的复用性,以及对不特定数据类型的支持(类型校验)
    泛型:在方法调用时,由程序员指定泛型具体是什么类型
    ----eg
    //最小堆算法
    class Apple<T>{  //定义泛型类,在实例化的时候需要规定类型
    //这里是用来存放数组的
      public lists:T[]=[]; //泛型数组
      list(value:T){ //泛型参数
        this.lists.push(value);
      }
    
      min():T{  //定义泛型方法返回值
        let minNumber = this.lists[0];
    
        for(let a=0;a<this.lists.length;a++){
          if(minNumber<this.list[a]){
            minNumber=this.lists[a]
          }
        }
        console.log(minNumber);// 最小数
        return minNumber;
      }
    }
    
    let a = new Apple<number>(); // 定义一个泛型类,在实例化的时候需要规定类型
    a.list(1);
    a.list(12);
    a.list(13);
    a.min();
    
    -----泛型接口 接口关键字:interface
    //---写法一
    interface People<T>{
      (value:T):T;
    }
    let name:People<string> = function<T>(value:T):T{
      return value
    }
    console.log(name("gutu is my name!"));
    
    
    //写法二
    interface Apple{
      <T>(value:T):T
    }
    
    let eat:Apple = function People<T>(value:T):T{
      return value;
    }
    console.log(eat<string>("apple is wondefule"));
    
    //泛型接口的写法和定义变量承接的时候的写法需要一致
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    展开全文
  • TypeScript中的泛型 1.1 泛型的定义 泛型:软件工程中,我们不仅要创建一致的定义 良好的API,同时也要考虑可重用性。组件不仅能够支持当前的数据类 型,同时也能支持未来的数据类型,这在创建大型系统时为你提供了...

    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}
    
    
    展开全文
  • 12 ts中的泛型

    2021-04-26 18:17:19
    // 在定义函数或者类时,如果遇到类型不明确就可以使用泛型泛型就是一个不确定类型 function cache<T,P>(prop: T,flag: P): T { return prop } // 指定泛型类型 let a = cache<string, number>('...
    // 在定义函数或者类时,如果遇到类型不明确就可以使用泛型,泛型就是一个不确定的类型
    function cache<T,P>(prop: T,flag: P): T {
      return prop
    }
    
    // 指定泛型类型
    let a = cache<string, number>('123', 122)
    
    interface Animal<T> {
      name: T;
    }
    
    class Dog<T, P> implements Animal<T> {
      name: T
      age: P
      constructor(name: T, age: P) {
        this.name = name
        this.age = age 
      }
    }
    
    let obj = new Dog('小黄', 8)
    
    console.log(obj)
    
    展开全文
  • 这段TS代码 调用了函数fn 传入了一个 123 number类型数据,但是res返回类型是一个 any 类型,如图: 我们传入是一个number类型数据,在这个函数应该返回也是number类型,但是这时候res丢失了类型...

    先不直接说泛型,一步一步理解为什么使用泛型,什么时候使用

    先看一段代码

    function fn (value) {
      return value
    }
    const res = fn(123)
    

    这段TS代码中 调用了函数fn 传入了一个 123number类型的数据,但是res的返回类型是一个 any 类型,如图:
    在这里插入图片描述
    我们传入的是一个number类型的数据,在这个函数中应该返回的也是number类型,但是这时候res丢失了类型数据,这不是一个好的现象啊,老铁。

    这时候想,既然我们传入的是一个number类型的数据,那我给fn加个类型判断?这样我们的函数就变成了如下:

    function fn (value: number) : number {
      return value
    }
    const res = fn(123)
    

    这时候的 res的类型数据是正确的了,如图:
    在这里插入图片描述
    但是,不对啊,老铁。
    如果我们传入的值是一个 stringboolean或者非基础数据类型呢?对象?函数?这时候怎么办啊,老铁。
    any?难不成要万物皆 any?不能忍啊,老铁。。这时候就是 generics 泛型的使用时候了,看代码:

    function fn<T> (value: T) : T {
      return value
    }
    const num: number = 123
    const res1 = fn(num)
    const num: number = 123
    const res1 = fn(num)
    

    最终返回的类型数据如图:
    在这里插入图片描述
    这时候可以看到fn函数
    传入的是一个 123值的 number类型数据的时候,res1 返回的类型数据是 number
    传入的是一个 str值的 string类型数据的时候,res2返回的类型数据是string

    函数fn后面带的一个 <T> 括号,括号里面的T是占位符可以随意写的,如<A>或者<B>

    这个时候就有小伙伴想了,就这???那我们再来看一段代码

    function fn2<T, U> (value: [T, U]): [U, T] {
      return [value[1], value[0]]
    }
    
    const res3 = fn2(['str', 123])
    

    此时再来看 res3的返回类型,如图:
    在这里插入图片描述
    也就是说泛型数据,我们给他传入了一个什么类型的数据,就返回一个什么样的数据类型回来。这样数据类型永远就是对得上的了

    展开全文
  • 一个泛型函数方法 function fn<T>(v:T,s:string,ss?:T):T{ //T是约定俗成;不一定叫这个; return v; //return 固定东西一直报错; } function f<T>(v:T):void{ // ...
  • 泛型】指在定义函数、接口或类时候,不预先指定具体类型,而在使用时候再指定具体类型一种特性。 【函数泛型】 functiongetArr(value:any,count:number):any{ constarr:any[]=[] for(leti=0;i<count...
  • 如题,本篇我们介绍写ts中的泛型。 什么是泛型呢?我们可以理解为泛型就是在编译期间不确定方法的类型(广泛之意思),在方法调用时,由程序员指定泛型具体指向什么类型。泛型在传统面向对象编程语言中是极为常见的,...
  • TS 一些工具泛型的使用及其实现(续)之前写了一篇 TS 一些工具泛型的使用及其实现, 但是一直没怎么使用 TS,回首看文章,发现... 阅读本流水账需要对 TS 中的以下东西有所了解extendskeyofininfer&|?-?+?neverunk...
  • TypeScript中的泛型工具

空空如也

空空如也

1 2 3 4 5 ... 9
收藏数 171
精华内容 68
关键字:

ts中的泛型