TypeScript泛型

泛型的概念

指不预先确定的数据类型,具体的类型要在使用的时候才能确定。咋一听,是不是觉得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. 灵活控制类型之间的约束

原文地址:https://www.cnblogs.com/V587Chinese/p/11474391.html

时间: 2024-11-04 04:25:34

TypeScript泛型的相关文章

【第7篇】TypeScript泛型的案例代码详解

8.1最简单泛型例子 Ts代码 /** * 没有泛型,我们要么必须给身份功能的特定类型 */ function identity1(arg: number): number { return arg; } /** * 或者:我们可以描述使用"任意"类型的标识功能: */ function identity2(arg: any): any { return arg; } Js文件 /** * 没有泛型,我们要么必须给身份功能的特定类型 */ function identity1(arg)

TypeScript 泛型

TS里面有泛型让我很意外,这个比AS3确实要强大: let myIdentity_change : <T>(arg:T)=>T=function(a){ return a }; console.log(`generic : ${myIdentity_change<string>("Hello World!!!")}`); 结果: 看看泛型接口 ①:注意接口(GenericFun)后面没有<T> interface GenericFun{    

TypeScript 第六讲 ———— TypeScript 泛型

前言: 泛型:软件工程中,我们不仅要创建一致的定义良好的API,同时也要考虑可重用性.组件不仅能够支持当前的数据类型,同时也能支持未来的数据类型,这在创建大型系统时为你提供了十分灵话的功能. 在像c和Java这样的语言中,可以使用泛型来创建可重用的组件,一个组件可以支持多种类型的数据.这样 用户就可以以自己的数据类型来使用组件. 通俗理解,泛型就是解决类接口方法的复用性.以及对不特定数据类型的支持 下面这种就只能返回string类型的数据: function getData(value:stri

TypeScript——泛型

定义:不预先确定的数据类型,具体的类型在使用的时候才能确定 好处:1.函数和类可以支持多种类型,增加的程序的可扩展性           2.不必写多条函数重载,联合类型声明,增强代码的可读性           3.灵活控制类型之间的约束 这里可以 把泛型理解为代表类型的参数 泛型函数 // 泛型函数 function log<T>(value: T): T { return value } log<string[]>(['a','b']) // 根据约束的类型带入函数 log(

TypeScript最大的目的是让程序员更具创造性

TypeScript 是 JavaScript 的一个超集,支持 ECMAScript 6 标准. TypeScript 由微软开发的自由和开源的编程语言. TypeScript 设计目标是开发大型应用,它可以编译成纯 JavaScript,编译出来的 JavaScript 可以运行在任何浏览器上. 以上为网上对 Typescript 的一些解释,那我们为什么要学 Typescript? 提到前端我们首先会想到 HTML,CSS,JavaScript 三大家族,我们掌握这三个就可以在前端界获得一

[web建站] 极客WEB大前端专家级开发工程师培训视频教程

极客WEB大前端专家级开发工程师培训视频教程  教程下载地址: http://www.fu83.cn/thread-355-1-1.html 课程目录:1.走进前端工程师的世界HTML51.HTML5与HTML4的区别2.HTML5新增的主体结构元素3.HTML5新增的的非主体结构元素 4.HTML5表单新增元素与属性5.HTML5表单新增元素与属性(续)6.HTML5改良的input元素的种类 7.HTML5增强的页面元素8.HTML5编辑API之Range对象(一)9.HTML5编辑API之

极客学院Web前端开发技术实战视频教程 初级入门+高级实战++专家课程+面试指导

===============课程目录=============== ├<初级中级>│  ├<1. HTML5开发前准备>│  │  ├1.HTML5开发前准备.mp4│  │  └2.开发前的准备-快捷键.mp4│  ├<10. React.js>│  │  ├React.js简介.txt│  │  ├<1.React 概述>│  │  │  ├React 开发环境搭建.mp4│  │  │  ├编写第一个 React 程序.mp4│  │  │  └什么

2020年前端面试复习必读文章【超百篇文章/赠复习导图】

前言 之前写过一篇 一年半经验如何准备阿里巴巴前端面试,给大家分享了一个面试复习导图,有很多朋友说希望能够针对每个 case 提供一个参考答案. 写答案就算了,一是「精力有限」,二是我觉得大家还是需要自己「理解总结会比较好」. 给大家整理了一下每个 case 一些还算不错的文章吧(还包括一些躺在我收藏夹里的好文章),大家可以自己看文章总结一下答案,这样也会理解更深刻. 「并不是所有文章都需要看」,希望是一个抛砖引玉的作用,大家也可以锻炼一下自己寻找有效资料的能力 ~ ( 文章排序不分前后,随机排

TypeScript入门-泛型

泛型 要创建一个可重用的组件,其中的数据类型就必须要兼容很多的类型,那么如何兼容呢,TypeScript提供了一个很好的方法:泛型 Hello World 要兼容多种数据格式,可能会有人想到any,即 function identify(arg: any): any{    return arg; } 使用any存在一个问题,有可能传入的值和返回的值不是同一种值,例如,传入数字,但是不确定返回的是什么值 要解决这个问题,我们需要引入类型变量-一种特殊的变量,只用于表示类型不表示值 functio