精华内容
下载资源
问答
  • 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-泛型

    1.当需要 定义 一个 参数 类型 与 返回 值 类型 不确定的 函数 时:

    • 使用 any
    function test(name:any):any{
    	console.log('this is 泛型 demo');
    	/*
    		...
    	*/
    	return name
    }
    test(123);
    使用 any  定义 时  存在 问题: 虽然 可以 知道 传入值 的类型 但是  无法 获取 函数 返回 值 的 类型 。
    

    这 个 问题 可以 用 泛型 很好 的解决。

    2.泛型定义:

    • 泛型 是 指 在 定义 函数 /接口 / 类 时,不预先 指定 具体 的 类型,而是 在 使用 的 时候 再 指定 类型限制 的 一种 特性。
    • 用法:
      使用 方法 一:
    function test<T>(name:T):T{
    	console.log('hellow 泛型');
    	/*
    		...
    	*/
    	return name;
    }
    test<number>(123);   //  最终 返回 值 是 number 类型
    
    //定义 多个 类型
    test<number|string>(123);  //  返回 值为 number 类型     可以 传入 字符串 或者  数值 类型
    //类型 之间 用 | 符号 分隔
    

    使用 类似 于 函数 传参,传 什么 数据 类型 则 T 表示 什么 数据类型,使用 <…> 表示。T也可以 换成 任意 字符。

    若指定 了 返回 值为 泛型 如 上述函数 ,则 函数 必须 返回 任意类型,即 返回值 类型 不可以 是 明确 规定 的 类型,注意 隐式转换。
    eg:

    function test<T>(name:T):T{
    	console.log('hellow 泛型');
    	/*
    		...
    	*/
    	return name+'aaa';   // error          because 字符串 + 任何 数据 都等于 字符串  所以 这里 相当于 固定了 返回 值 为 字符串
    }
    

    使用 方法 二:
    类型 推断

    //直接调用 不传 泛型 实参
    test(123);  // 此时 相当 与   test<number>(123)       编译器 会 自动识别 传入 的 参数 ,将 传入 的 参数  类型 认为 是 泛型 指定 的 类型
    
    //若 函数 有 2个 及 以上 参数  且 有 2个 及 以上 参数 指定的 类型 都为 泛型
    function test<T>(name:T,age:T):T{
    	return name;
    }
    //此时 类型 推断 会 默认 将 第一个 参数 的 数据类型 作为 泛型 指定的 类型
    test(123,'111'); //error  此时 必须 传 numbe 类型
    

    注意:使用 泛型 会相当 容易 出错 ,所以 看情况 使用 ,不要 什么 都使用 泛型。
    eg: 当 一个 函数 的 参数 使用 泛型 限制 类型 时,则 在 该 方法 内 此 参数 使用 的 方法 必须是 所有 类型 通用 的 方法 ,否则会报错。

    function test<T>(titile:T,name:T):boolean{
    	let  index = title.indexOf(name);    // error     indexOf  number boolean等 类型  不能 使用  
    	return index === -1;
    }
    
    • 在 接口 中 使用 泛型
    interface Search {
    	<T>(name:T,age:T):boolean
    }
    let fn:Search =  function <T>(name:T,age:T):boolean{
    	return  name === age;
    }
    fn<string>('111','222');
    
    • 泛型 在 类 中 的 运用
    class  Animal <T>{    // 此处 的 泛型 为 限制 构造 函数参数 类型  以及  类 成员 变量 的 类型
    	name:T;
    	constructor(name:T){
    		this.name = name;
    	}
    	action<T>(say:T):T{//  此处 为  限制 类 中 成员 方法 action    若 此处 不写 <T> 则 使用 类 声明的 <T>
    		return say;
    	}
    }
    let dog = new Animal<string>('dog');        // 此处 的 striing 为 限制 构造 函数参数 类型  以及  类 成员 变量 的 类型
    dog.action<number>(123); //  此处 为  限制 类 中 成员 方法 action   
    
    • 扩展:
      (1).约束泛型 使用 接口 约束 泛型
      使用 extends 用于 约束 泛型 如下:
    interface LengthNum {
    	length:number;
    }
    function fn<T extends LengthNum>(name:T):T{
    	return name
    }
    //  此时  相当于 约束 了 泛型 的 类型 必须 是 含有 length 属性 的 数据类型
    fn<number>(123);// error     number 类型 没有 length 属性
    
    fn<string>('111'); // success   string 类型 有 length 属性
    
    fn<object>({}); //error    object 类型 没有 length 属性
    

    (2).数组 泛型

    let arr: Array<number> = [1,2,3,4];     ===    let arr: number[] = [1,2,3,4]
    

    写一个 稍微复杂的 例子:

    function createArray<T>(length:number,value:T):Array<T>{
    		let  result: T[] = [];
    		for(let i=0;i<length;i++){
    			result.push(value);
    		}
    		return result;
    }
    createArray<string>(3,'x');   //   此时 表示 该 函数 必须 返回 一个 字符串 数组
    
    

    注意:
    1.函数 在定义 时 若 指定 返回 值 不为 void 或者 any 则 在函数 内 必须 写 return

    展开全文
  • TS泛型

    2021-01-07 21:45:52
    TS泛型 泛型可以创建可重用的组件,一个组件可以支持多种类型,解决类,接口,方法的复用性,以及对不确定数据类型的使用 class MinCla<T>{ public list:T[]=[]; add(value:T):void{ this.list.push(value) } ...

    TS泛型

    泛型可以创建可重用的组件,一个组件可以支持多种类型,解决类,接口,方法的复用性,以及对不确定数据类型的使用

    class MinCla<T>{
        public 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
        }
    }
    //这样做的一个好处是可以做类型校验,如果是any就不行,这是泛型的特点,传入什么类型返回什么类型是一致的
    var m=new MinCla<number>()
    m.add(1)
    m.add(3)
    console.log(m.min());//1
    var m1=new MinCla<string>()
    m1.add('a')
    m1.add('z')
    console.log(m1.min());//a
    

    泛型接口用法跟泛型类差不多就是把类型换成泛型就行了

    interface Config{
            <T>(value1:T):T
    }
    var getData:Config =function<T>(value1:T){ //直接在后面加:泛型接口名称,注意类和接口都可以作为参数传入
        return value1
    }
    //第二种写法
    interface Config<T>{
            (value1:T):T
    }
    function getData<T>(value1:T):T{
        return value1
    }
    var myGetData:Config<string>=getData
    

    把类作为参数类型的泛型类

    //把类作为参数约束数据传入的类型
    class User {
       username:string|undefined;
       password:string|undefined
    }
    class MySql<T> {
        add(user:T):boolean{ //把User类型作为参数赋值进去
            console.log(user);//打印出User对象
            return true
        }
    }
    var u=new User();
    u.password='123456'
    u.username="张三"
    var Db=new MySql<User>();
    Db.add(u)
    

    TS命名空间(namespace)

    命名空间属于内部模块,主要用于模块避免命名冲突,一个模块里可以有多个命名空间

    namespace A{
    	//因为命名空间是私有的,所以需要暴露出来
    	export 代码
    }
    //调用
    var a=new A.类名/方法名
    

    TS装饰器

    普通装饰器不传参

    //扩展类,方法的功能
    function logClass(params:any){
    	console.log(params);//params作为第一个参数,默认就是Animal这个类
    	//动态扩展逻辑代码
    	params.prototype.run=function(){
    	}
    }
    @logClass//注意后面不要冒号
    class Animal{
    	//逻辑代码
    }
    

    装饰器工厂可以传参

    function logClass(params:string){
    	return function(target:any){
    		console.log(params);//字符串参数
            console.log(target);//target打印出来就是Animal这个类	
    	}
    }
    @logClass('字符串参数')//注意后面不要冒号
    class Animal{
    	//逻辑代码
    }
    

    装饰器还可以重载类或者方法

    function logClass(params:any){
       return class extends params {
          apiUrl:any='我是修改的'
          getData(){
              this.apiUrl=this.apiUrl+'---------0'
              console.log(this.apiUrl);
          }
       } 
    }
    @logClass
    class HttpClient {
        public apiUrl:string|undefined;
        constructor() {
            this.apiUrl='我是构造函数里面的apiurl'
        }
        getData(){
            console.log(this.apiUrl);
        }
    }
    var http=new HttpClient();
    http.getData()//我是修改的---------0
    

    装饰器中每个参数打印的结果

    //类装饰器
    function logClass(params:any){
    	return function(target:any){
        	 console.log(params);//12345 装饰器参数
         	 console.log(target);//target打印出来就是这个HttpClient类	
     }
    }
    //属性装饰器
    function shuxing(params:any){
        return function(target:any,attr:any){
            console.log(params);//属性参数
            //getData跟a方法组成的数组对象,对于静态成员来说就是类的构造函数,对于实例来说就是类的原型对象 
            console.log(target);
            console.log(attr); //apiUrl  就是属性名称
            target[attr]=params//修改属性
        }
    }
    //方法装饰器
    function logMethod(params:any){
        return function(target:any,mName:any,desc:any){
            console.log(params);//aaa 方法参数
            console.log(target);//当前类
            console.log(mName);//getdata方法名
            console.log(desc);//描述信息 desc.value就是当前方法可以用于修改方法
            //扩展属性
            target.name='张三'
            target.Fn=function(){
                console.log(111)
            }
        }
    }
    @logClass(12345)
    class HttpClient {
        @shuxing('属性参数')
        public apiUrl:string|undefined;
        constructor() {
            // this.apiUrl='我是构造函数里面的apiurl'
        }
         @logMethod('aaa')
        getData(){
            console.log(this.apiUrl);//属性参数
        }
        a(){
    
        }
    }
    var http=new HttpClient();
    http.getData()
    console.log(http.name); //张三
    console.log(http.Fn);//fn扩展方法
    
    展开全文
  • ts 泛型

    2020-11-17 16:23:03
    定义A类泛型,并且把类作为传入参数的规范,就可以实现类的复用。 泛型接口 普通函数接口 接口泛型加上函数也要定义 第二种 相当于不把接口给函数B,而是在声明C的时候用泛型接口A规范其里面的写法。 ...

    在这里插入图片描述

    在这里插入图片描述
    代码冗余
    泛型:函数名< T >(value:T):T{}
    在这里插入图片描述
    在这里插入图片描述

    在这里插入图片描述
    在这里插入图片描述
    不能这样,万一传入的是数字就出错,所以只能传入什么返回什么。

    泛型类 解决类的复用。

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    深入泛型类

    在这里插入图片描述

    在这里插入图片描述
    在这里插入图片描述

    在这里插入图片描述
    若是不加上类CC作为规范,传入其他值也可以。
    在这里插入图片描述
    定义A类泛型,并且把类作为传入参数的规范,就可以实现类的复用。

    泛型接口

    普通函数接口
    在这里插入图片描述
    在这里插入图片描述
    接口泛型加上函数也要定义在这里插入图片描述
    第二种
    在这里插入图片描述
    相当于不把接口给函数B,而是在声明C的时候用泛型接口A规范其里面的写法。

    展开全文
  • ts泛型

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

    泛型

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

    • 定义 function 函数名<类型变量声明>(length: number, value: 类型变量): Array<类型变量> {}
    • 如:
      function 函数名(length: number, value: T): Array {};其中T就是类型的变量名;调用 函数名(参数) //给变量T赋值为string。

    1、函数里使用泛型

    function fun<T>(a:number,b:T):any{
        return a+"----"+b
    }
    let demo1=fun<string>(8,"哈哈")
    console.log(demo1)//8----哈哈
    

    2、类里面使用泛型

    class Person1<T,S>{
        name:T;
        sex:S;
        age:number
        constructor(name,sex,age){
            this.name=name;
            this.sex=sex;
            this.age=age;
        }
    }
    let demo2=new Person1<string,number>("张三","name",18)
    console.log(demo2)//Person1 {name: "张三", sex: "男", age: 18}
    

    注意看与上面不同的地方

    class Person1<T,S>{
        name:T;
        sex:S;
        age:number
        constructor(name:T,sex,age:number){
            this.name=name;
            this.sex=sex;
            this.age=age;
        }
    }
    let demo2=new Person1<string,number>("张三","男",18)
    console.log(demo2)//Person1 {name: "张三", sex: "男", age: 18}
    
    展开全文
  • TS 泛型类与类型约束

    2021-08-11 18:02:16
    注意:T继承了Length接口,表示T受到了一定约束,传入的参数需要具有length属性 比如: 小结:泛型的好处 1. 函数和类可以轻松的支持多种类型,增强程序的扩展性 2. 不必写多条函数重载,冗长的联合类型声明,增强...
  • ts泛型定义

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

    2021-05-18 13:38:20
    1、什么是泛型泛型是指在定义函数、接口或类的时候,不预先指定具体的类型,而在使用的时候在指定类型的一直特征。 2、为什么要使用泛型 因为any会在调试中丢失很多的信息,所以我们不建议使用any,这个时候...
  • 一文搞懂 TS 泛型,让你头不再晕

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

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

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

    2021-01-18 09:57:55
    typescript (ts) 泛型初探 泛型的定义: 1.泛型(Generics)是指在定义函数、接口或类的时候,不预先指定具体的类型,而在使用的时候再指定类型的一种特性。 2.就是一种不确定的数据类型,可以把运行时的问题提前到...
  • TypeScript中的泛型 1.1 泛型的定义 泛型:软件工程中,我们不仅要创建一致的定义 良好的API,同时也要考虑可重用性。组件不仅能够支持当前的数据类 型,同时也能支持未来的数据类型,这在创建大型系统时为你提供了...
  • C# 泛型参数转换

    2020-12-26 01:16:22
    为了达到这个目的,就要解决“泛型参数转换的问题”,这个问题的知识点是in out 泛型变体。老实说,这个问题本身不困难,只是非常不直观,很容易让人忘记。 首先一点,为了实现to = ts,实际上是有前提的,那就是该...
  • s泛型的使用场景和具体使用方法 ...这个时候我们就可以使用到了泛型,我们可以定义一个泛型参数在调用函数的时候传入泛型参数就可以了 function getVal<T>(obj:T,k:keyof T){ return obj[T] } //调用的时
  • 函数声明对参数类型, 返回值类型定义,没有返回值定义为void //必传x,y并且类型都为number,返回值为布尔 function fun1(x:number,y:number):boolean{ return x>y } fun1(1,3) 没有返回值定义为void: //不...
  • ts学习第七篇 泛型

    2020-12-25 01:16:00
    // 泛型 function creatArray0(length: number, value: any): Array<any> { let result: any[] = [] for(let i = 0; i < length; i++) { result[i] = i } return result } // 以上函数满足返回一个...
  • 可以用来继承一个class,interface,还可以用来判断有条件类型(很多时候在ts看到extends,并不是继承的意识) 示例: T extends U ? X : Y; 上面的类型意思是,若 T 能够赋值给 U,那么类型是 X,否则为 Y。 原理...
  • ts-泛型

    2021-07-17 17:29:50
    泛型 介绍 软件工程中,我们不仅要创建一致的定义良好的API,同时也要考虑可重用性。 组件不仅能够支持当前的数据类型,同时也能支持未来的数据类型,这在创建大型系统时为你提供了十分灵活的功能。 初始泛型 // ...
  • TS - typescript 泛型

    2021-01-21 17:01:57
    泛型 指在定义函数、接口或类的时候,不预先指定具体的类型,而在使用的时候再指定具体类型的一种特性。 实例 // 功能: 根据指定的数量 count 和数据 value, 创建一个包含 count 个 value 的数组 不用泛型的话,这...
  • 泛型是指在定义函数、接口或类的时候,不预先指定具体的类型,而在使用的时候再指定类型的一种特性。一直是ts学习中的一个重难点。 具体的学习资料还是看官网吧。这里出一个题目: 写一个函数,接受两个参数,一个为...
  • TS基础之(五)TS中的泛型

    千次阅读 2020-08-31 18:07:55
    一个泛型函数方法 function fn<T>(v:T,s:string,ss?:T):T{ //T是约定俗成的;不一定叫这个; return v; //return 固定的东西一直报错; } function f<T>(v:T):void{ // ...
  • 关于泛型可以先看看官方的介绍如下: 软件工程中,我们不仅要创建一致的定义良好的API,同时也要考虑可重用性。 组件不仅能够支持当前的数据类型,同时也能支持未来的数据类型,这在创建大型系统时为你提供了十分...
  • 目录TS指南1. TS基本类型2. 类(class)3. 面向对象的特点3.1 封装... 泛型(Generic) TS指南 1. TS基本类型 类型声明语法: let 变量: 类型; let 变量:{ 属性1:类型, 属性2:类型, [propName: strin

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,459
精华内容 2,583
关键字:

ts泛型参数