正文

typescript泛型(代码片段)

橘猫吃不胖～  橘猫吃不胖～  2022-12-13  581

关键词：

TypeScript泛型

1 什么是泛型
2 泛型方法
3 泛型类
4 泛型接口

1 什么是泛型

泛型的本质是参数化类型，也就是说所操作的数据类型被指定为一个参数。这种参数类型可以用在类、接口和方法的创建中，分别称为泛型类、泛型接口、泛型方法。

泛型使用<T>来定义类型，<T>中的T可以是U也可以是其他合法的字母，建议大写。泛型可以理解为不确定单独类型，函数中使用泛型，可以约束函数的参数和返回值类型相同。

2 泛型方法

当定义identity函数时，这个函数会返回任何传入它的值，不用泛型的话，这个函数可能是下面这样：

function identity(arg: number): number 
    return arg;

但是这样的话，参数和返回值规定了必须为number类型。如果我们不确定它们的类型，要怎么写呢，我们可能会使用any类型来定义函数：

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

但是使用any类型会导致这个函数可以接收任何类型的arg参数，这样就丢失了一些信息：传入的类型与返回的类型应该是相同的。如果我们传入一个数字，任何类型的值都有可能被返回。

对于这个问题，我们就可以使用类型变量来解决。类型变量是一种特殊的变量，只用于表示类型而不是值。它的语法格式为：

function 函数名<T>(参数: T): T 
    return 值;

示例代码：

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

给identity添加了类型变量T。 T帮助我们捕获用户传入的类型（比如：number），之后我们就可以使用这个类型。之后我们再次使用了 T当做返回值类型。现在我们可以知道参数类型与返回值类型是相同的了。这允许我们跟踪函数里使用的类型的信息。

定义了泛型方法后，可以用两种方法使用。

// 第一种：传入所有的参数，包含类型参数
var a = identity<string>("myString");

// 第二种：使用类型推论——即编译器会根据传入的参数自动地帮助我们确定T的类型
var a = identity("myString");

3 泛型类

当我们需要实现找最小数的算法时，并且需要同时支持返回数字和字符串两种类型，就可以通过类的泛型来实现。

示例代码：非泛型实现方式

class MinClass 
    list: number[] = [];
    add(num: number) 
        this.list.push(num);
    
    min(): number 
        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;

示例代码：泛型方式实现

class MinClass<T> 
    list: T[] = [];
    add(num: T) 
        this.list.push(num);
    
    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;

4 泛型接口

首先来看一下普通函数接口：

interface ConfigFn  // 普通函数接口
    (value1: string, value2: string): string;

那么如果将它转换成泛型接口呢？有下面两种方法：

1、第一种定义方式

interface ConfigFn 
    <T>(value: T): T; // T表示参数类型

2、第二种方式

interface ConfigFn<T> 
    (value: T): T; // T表示参数类型

typescript打字稿泛型(代码片段)

查看详情

typescript泛型(代码片段)

TypeScript泛型1什么是泛型2泛型方法3泛型类4泛型接口1什么是泛型泛型的本质是参数化类型，也就是说所操作的数据类型被指定为一个参数。这种参数类型可以用在类、接口和方法的创建中，分别称为泛型类、泛型接口、... 查看详情

typescript--泛型(代码片段)

3.6泛型：解决，类，接口，方法的复用性，以及对不特定数据类型的支持3.6.1泛型函数：如果需要一个函数传入类型必须返回类型，同时满足，泛型可以解决。any类型放弃了类型检查。functiongetData(value:any):anyreturn‘hahaha‘;//修改... 查看详情

typescript打字稿泛型示例(代码片段)

查看详情

typescript创建泛型类报错（泛型类）(代码片段)

Property‘zeroValue’hasnoinitializerandisnotdefinitelyassignedintheconstructor.Property‘add’hasnoinitializerandisnotdefinitelyassignedintheconstructor.解决方法一TypeScript的新特性所有定义的值必须赋予，初始值我们设置其值是可选z 查看详情

typescript创建泛型类报错（泛型类）(代码片段)

layabox---typescript---泛型(代码片段)

目录1.泛型之helloworld2.泛型变量3.泛型类型4.泛型类5.泛型约束1.在泛型约束中使用类型参数2.在泛型里使用类类型1.泛型之helloworld不用泛型的话，这个函数可能是下面这样：functionidentity(arg:number):numberreturnarg;或者，使用... 查看详情

typescript入门14.泛型(代码片段)

泛型泛型是TypeScript非常重要和有趣的特性，它允许在定义函数、类或接口时使用类型参数，从而使这些定义可以适用于多种类型。通过使用泛型，我们可以编写更加通用和灵活的代码。我们可以使用尖括号<T>来表示一个类... 查看详情

typescript泛型(代码片段)

泛型基本functionadd<t>(arg1:T,arg2:T):Treturnarg1+arg2//add<number>(1,‘0‘)X泛型接口functionadd<T>(arg1:T,arg2:T):Treturnarg1+arg2//===letstudent:stringletaddFunc:<T>(arg1:T,arg2:T) 查看详情

typescript创建泛型类报错（泛型类）(代码片段)

...hasnoinitializerandisnotdefinitelyassignedintheconstructor.解决方法一TypeScript的新特性所有定义的值必须赋予，初始值我们设置其值是可选zeroValue?:T;add?:(x:T,y:T)=>T解决方法二创建构造方法constructor(zeroValue:T)this.zeroValue=zeroValue 查看详情

前端进阶-typescript高级类型|泛型约束泛型接口泛型工具类型(代码片段)

...页👉🏻蜡笔雏田学代码专栏链接👉🏻【TypeScript专栏】前两篇文章讲解了TypeScript的一些高级类型详细内容请阅读如下：🔽【前端进阶】-TypeScript高级类型|交叉类型、索引签名类型、映射类型【前端进阶... 查看详情

typescript中泛型是什么(代码片段)

在TypeScript中，泛型是一种创建可复用代码组件的工具。这种组件不只能被一种类型使用，而是能被多种类型复用。类似于参数的作用，泛型是一种用以增强类（classes）、类型（types）和接口（interfa... 查看详情

从0开始的typescriptの十：泛型(代码片段)

...型的数据，用户可以以自己的数据类型来使用组件。TypeScript中对泛型的说明：软件工程中，我们不仅要创查看详情

typescript入门手册之泛型(代码片段)

【Typescript入门手册】之泛型🚀【TypeScript入门手册】记录了出场率较高的Ts概念，旨在帮助大家了解并熟悉Ts🎉本系列会持续更新并更正，重点关照大家感兴趣的点，欢迎同学留言交流，在进阶之路上，... 查看详情

typescript入门手册之泛型(代码片段)

typescript核心篇——函数_this指向—重载—泛型(代码片段)

Typescript核心篇——函数_this指向—重载—泛型this重载泛型this当函数使用到this时，需要在参数中指出this，包括this的类型，而且this必须在函数的第一位this可以不用在接口中声明interfaceIObja:number;b:number;c(a:number):void;click... 查看详情

typescript与javascript不同之处系列===;泛型(代码片段)

本系列目的:列出TypeScript与JavaScript的不同点,缩小文档内容,提高学习速度.原文档地址:https://www.tslang.cn/index.html全系列目录1.基础类型https://blog.csdn.net/c_kite/article/details/852320212.接口https://blog.csdn.net/c_kite/article/details/8 查看详情

typescript教程#15：泛型(代码片段)

说明尚硅谷TypeScript教程（李立超老师TS新课）学习笔记。泛型在定义函数或是类时，如果遇到类型不明确就可以使用泛型比如定义了一个泛型Tfunctionfn<T>(a:T):Treturna;可以直接调用具有泛型的函数不指定泛型，TS... 查看详情