精华内容
下载资源
问答
  • 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}
    
    展开全文
  • 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的泛型语法糖工具函数

    partial 将所有持有属性变为可选

    interface data {
      title: String,
      desc: String,
      say?: String
    }
    
    const testPartial = (dataOne: data, dataTwo: Partial<data>) => {
      return {...dataOne, ...dataTwo}
    }
    console.log(testPartial({title: '测试1', desc: '描述1'}, {desc: '我只需要传入一个'}))
    

    Required 与partial相反 将可选属性变为必选

    const testRequired = (dataOne: data, dataTwo: Required<data>) => {
      return {...dataOne, ...dataTwo}
    }
    console.log(testRequired({title: '测试1', desc: '描述1'}, {title: '测试2',  desc: '我只需要传三个', say: '我在测试Required'}))
    

    Readonly 所有属性只读

    const testReadonly = (dataOne: data, dataTwo: Readonly<data>) => {
      return {...dataOne, ...dataTwo}
    }
    console.log(testReadonly({title: '测试1', desc: '描述1'}, {title: '测试2',  desc: '我是只读', say: '我在测试Readonly'}))
    

    Record<keys, type> keys 代表键的类型 type代表值的类型

    interface recordFace {
      title: String
    }
    type keyValue = 'home' | 'about' | 'contact'
    // type keyValue = string  key只要是string就行
    const testRecord: Record<keyValue, recordFace[]> = {
      about: [{ title: 'about'}],
      home: [{ title: 'home'}],
      contact: [{ title: 'contact'}]
    }
    

    Omit<type, key> 从type仲移除key对应的属性

    interface testOmit{
      title: String,
      desc: String
    }
    // type 定义类型
    type testOmit2 = Omit<testOmit, 'desc'>
    const todoOmit: testOmit2 = {
      title: '我又来测试了',
    }
    

    Exclude<Type, ExcludedUnion> 在type中删除ExcludedUnion 取不同部分
    Extract <Type, Union> 生成交集 取相同部分

    展开全文
  • 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 泛型 高级类型

    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泛型使用举例

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

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

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 498
精华内容 199
关键字:

ts泛型