浅谈TypeScript泛型T和any的区别

举报
青年码农 发表于 2022/08/25 22:24:38 2022/08/25
【摘要】 点击上方“青年码农”关注 回复“特效源码”可获取各种资料 当我们定义一个变量或者重构之前的JavaScript代码不确定类型的时候,一般会有两种解决方式。 1. 使用any 简单粗暴,任何类型都可以,但是失去了ts类型保护的优势。 2. 使用泛型 不预先指定具体的类型,而是在使用的时候在指定类型限制的一种特性。 看下...

点击上方“青年码农”关注

回复“特效源码”可获取各种资料

当我们定义一个变量或者重构之前的JavaScript代码不确定类型的时候,一般会有两种解决方式。

1. 使用any

简单粗暴,任何类型都可以,但是失去了ts类型保护的优势。

2. 使用泛型

不预先指定具体的类型,而是在使用的时候在指定类型限制的一种特性。

看下面的这个函数


       function identity(arg: any): any {
           return arg;
       }
   
  

identity这个函数接收一个参数,这个参数是任意类型,返回的结果也是任意类型.。如果这个函数的传入的类型和返回的类型相同,使用any类型,就无法实现这个约束。

因此,需要一种方法使返回值的类型与传入参数的类型是相同的。这里,我们使用了类型变量,它是一种特殊的变量,只用于表示类型而不是值。


       function identity<T>(arg: T): T {
           return arg;
       }
   
  

没有明确要求传递参数的类型,虽然也是任意类型,但是保证了传入类型和返回类型的一致性。

let output = identity<string>("myString");
  

使用<>明确string类型,作为参数传给函数。另外一种是类型推论,这种方法更普遍,

let output = identity("myString");
  

调用函数我们没有明确传入的类型,编译器帮我们去识别,并设置它的类型。如果复杂的情况,编译器不能自动判断类型的话,那就需要我们手动设置。

通过上面简单的例子,我们可以很好的理解这两个区别,打个比方,你去超市买东西,你给的是钱,售货员给你的是商品,类型不同,可以用any。如果你去超市破零钱,那售货员给你的还是钱,类型相同,可以用泛型<T>。

any就不用过多讲解使用方式,和其他类型一样,主要说说泛型的使用

1.在函数中使用


       function echo<T>(arg:T):T{
           return arg
       }
       const result=echo(true)
   
  

很好理解,给的什么,返回的就是什么。


       function swap<T,U>(arg:[T,U]):[U,T]{
           return [arg[1],arg[0]]
       }
       const result2=swap(['string',123])
   
  

和上面类似,传递两个参数,返回时做了调换。

2.在类中使用


       class Animal<T> {
        name:T;
        constructor(name: T){
         this.name = name;
        }
        action<T>(say:T) {
          console.log(say)
        }
       }
       let cat = new Animal('cat');
       cat.action('mimi')
   
  

实例化Animal的时候,传递的参数是string类型,因此在调用cation方法时也要是相同的类型。

3.在接口中使用


       interface KeyPair<T,U>{
           key:T,
           value:U
       }
       let kp1:KeyPair<number,string>={key:1,value:'string'}
       let kp2:KeyPair<string,number>={key:'abc',value:12}
   
  

文章来源: blog.csdn.net,作者:NMGWAP,版权归原作者所有,如需转载,请联系作者。

原文链接:blog.csdn.net/NMGWAP/article/details/125814853

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。