• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

TypeScript泛型

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

泛型的概念

指不预先确定的数据类型,具体的类型要在使用的时候才能确定。咋一听,是不是觉得JavaScript本身就是这样?这是由于理解有误。前面说“在使用的时候确定”,而非在程序执行的时候确定。

泛型函数

现在有个需求:一个被定义的函数原本输入字符串输出字符串,现在想让它同时支持输入输出字符串数组,如何实现?

1.通过函数重载

// 函数调用时依照声明的顺序进行匹配
function log(value: string): string; 
function log(value: string[]): string[];
 
function log(value: any): any{
    console.log(value);
    return value;
}
log("abc");
log(["10","abc"]);

2.使用联合参数

function logs(value: string | string[]): string | string[]{
    return value
}

以上两种都OK,但是不够简洁,不够灵活。下面使用泛型。

function log1<T>(value: T): T{
    return value
}
等价于
let log1 = <T>(value: T) => {
    return value
};
log1<string>("hello");   // 调用的时候指定类型
log1<string[]>(["hi","ha"]);

泛型接口

// 要注意<T>的位置,前者在使用时必须指定类型,后者在使用时无须指定类型
interface Log<T> {
    (value: T): T;
}
let log3: Log<number> = (v) => { console.log("必须指定类型",v);return v };
log3(12);
 
interface Log{
    <T>(value: T): T;
}
let log3: Log = (v) => { console.log("无须指定类型",v);return v};
log3<number>(10); // 无须指定类型,如果要指定类型,在调用的时候指定
log3(5);

泛型类

对类的成员进行约束,注意不能约束静态成员。

class Log<T> {
   run(value: T) {
      console.log(value);
      return value
   }
}
let log1 = new Log<number>(); // 可以进行约束
log1.run(1);
let log2 = new Log(); // 也可以不进行约束
log2.run("2");

泛型约束

泛型约束是指,传入的参数必须符合约束,不符合约束的参数无法传入。

function log<T>(value: T):T{
   console.log(value.length); // 如果访问.length属性,TS编译器会报错,因为不知道value有没有这个属性
   return value
}
此时使用泛型约束
interface Length {
   length: number;
   type?: string;
}
// extends Length表示允许value参数通过.操作符访问Length中定义的属性
function log<T extends Length>(value: T): T{
   console.log(value, value.length,value.type);
   return value
}
// 所有具有length属性的值,都可以被当做参数传入log函数
log([1,2,3]);
log("123");
log({length: 1});

在这个例子中,约束传入的参数必须具有length属性

使用泛型有什么好处?

  1. 函数和类可以支持多种类型,增强程序的扩展性。
  2. 不必写多条函数重载、冗长的联合类型声明,增强代码可读性。
  3. 灵活控制类型之间的约束

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
深入浅出TypeScript(5)- 在React项目中使用TypeScript发布时间:2022-07-18
下一篇:
TypeScript模块系统、命名空间、声明合并发布时间:2022-07-18
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap