精华内容
下载资源
问答
  • 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
    泛型:函数名< T >(value:T):T{} 不能这样,万一传入的是数字就出错,所以只能传入什么返回什么。 泛型类 解决类的复用。 深入泛型类 若是不加上类CC作为规范,传入其他值也可以。 定义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}
    
    展开全文
  • 什么是泛型 简单来说,泛型是指一种类型在不同地方,存在不同的...或者使用any,但是这样会失去使用ts的类型约束,现在改为使用泛型就可以解决这种问题 function creatValue<T>(a: T):T { return a; } creatValu

    什么是泛型

    简单来说,泛型是指一种类型在不同地方,存在不同的值,列如以下

    function creatValue(a: string):string {
    	return a;
    }
    
    function creatValueNumber(a: number):number {
    	return a;
    }
    

    或者使用any,但是这样会失去使用ts的类型约束,现在改为使用泛型就可以解决这种问题

    function creatValue<T>(a: T):T {
    	return a;
    }
    
    creatValue<string>("string")
    /** 也可以直接传入省略<> */
    creatValue("string")
    ...
    

    当然也可以做成多个

    
    function creatValue<T,X>(a: T,b:X):T {
      console.log(b)
    	return a;
    }
    
    
    creatValue<string,number>("a",123)
    // 或者
    creatValue("a",123)
    
    

    泛型的继承用法

    /** 定义基本的信息*/
    interface base {
      name:string;
      age:number;
    }
    /** 定义一个student类型,泛型不确定的类型然后继承了base */
    interface student<T extends base> {
      baseInfo: T
    }
    
    /** 这里自定义了我自己想要的类型 */
    interface myBase extends base {
      address: string;
      grade:string
    }
    
    /** 最终类型 */
    const studentA: student<myBase> ={
      baseInfo: {
        name:'张三',
        age:14,
        address:'中国',
        grade:'初一'
      }
    }
    
    /** 再定义一个身体类型 */ 
    interface bodyBase extends base {
      weight: string;
      height:string
    }
    
    const studentB: student<bodyBase> ={
      baseInfo: {
        name:'张三',
        age:14,
        weight:'70kg',
        height:'170cm'
      }
    }
    
    /** 也能将全部继承下来 */ 
    interface AllBase extends bodyBase,myBase {}
    
    const studentC: student<AllBase> ={
      baseInfo: {
        name:'张三',
        age:14,
        weight:'70kg',
        height:'170cm',
        address:'中国',
        grade:'初一'
      }
    }
    
    

    硬核一点的

    
    interface base {
      name:string;
      age:number;
    }
    
    interface student<T extends base> extends baseInfo<T> {
    
      test(t: T):T;
    }
    
    interface baseInfo<T> {
      baseInfo: T
    }
    
    interface bodyInfo extends base {
      weight: string;
      height: string;
    }
    
    const studentA:student<bodyInfo> = {
      baseInfo:{
        name:'张三',
        age:18,
        weight:'70kg',
        height:'170'
      },
      test(t: bodyInfo): bodyInfo{
        return t
      }
    }
    
    
    
    function test<T extends bodyInfo>(option: baseInfo<T>){
      option.baseInfo.age = 1
    }
    
    
    展开全文
  • 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-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 泛型类与类型约束

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

    2021-05-18 13:38:20
    1、什么是泛型泛型是指在定义函数、接口或类的时候,不预先指定具体的类型,而在使用的时候在指定类型的一直特征。 2、为什么要使用泛型 因为any会在调试中丢失很多的信息,所以我们不建议使用any,这个时候...
  • 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...
  • ts泛型接口

    千次阅读 2019-06-09 09:10:48
    函数类型接口 interface ConfigFn{ (value1:string, value2:string):string; } var setData:ConfigFn=function (value1:string, value2:string):stirng{ return value1 + value2;...函数泛型接口 i...
  • 一文搞懂 TS 泛型,让你头不再晕

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

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

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

    2020-11-12 11:14:40
    泛型(Generics)是指在定义函数、接口或类的时候,不预先指定具体的类型,而在使用的时候再指定类型的一种特性。
  • typescript (ts) 泛型初探

    2021-01-18 09:57:55
    typescript (ts) 泛型初探 泛型的定义: 1.泛型(Generics)是指在定义函数、接口或类的时候,不预先指定具体的类型,而在使用的时候再指定类型的一种特性。 2.就是一种不确定的数据类型,可以把运行时的问题提前到...
  • TypeScript中的泛型 1.1 泛型的定义 泛型:软件工程中,我们不仅要创建一致的定义 良好的API,同时也要考虑可重用性。组件不仅能够支持当前的数据类 型,同时也能支持未来的数据类型,这在创建大型系统时为你提供了...
  • 如题,本篇我们介绍写ts中的泛型。 什么是泛型呢?我们可以理解为泛型就是在编译期间不确定方法的类型(广泛之意思),在方法调用时,由程序员指定泛型具体指向什么类型。泛型在传统面向对象编程语言中是极为常见的,...
  • 先不直接说泛型,一步一步理解为什么使用泛型,什么时候使用 先看一段代码 function fn (value) { return value } const res = fn(123) 这段TS代码中 调用了函数fn 传入了一个 123 的 number类型的数据,但是res的...
  • 文章目录s泛型的使用场景和具体使用方法泛型函数泛型泛型接口 为什么要使用泛型如下情况(我们不知道对象的类型也,这样我们无法定义obj的类型也无法知道k的类型) 泛型函数 function getVal(obj,k){ return obj[k];...
  • ts重难点泛型总结

    2021-01-12 16:50:29
    1.泛型 generics 定义返回任意类型的函数 function echo<T>(arg: T): T { return arg } const res = echo(true) function swap<T, U>(tuple:[T, U]): [U, T] { return [tuple[1], tuple[0]] } const ...

空空如也

空空如也

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

ts泛型