TypeScript 泛型

17 Mar 2025 | 5 分钟阅读

TypeScript 泛型是一个工具，它提供了一种创建可重用组件的方法。它创建了一个可以处理多种数据类型而不是单一数据类型的组件。它允许用户使用这些组件并使用他们自己的类型。泛型确保程序在长期内既灵活又可扩展。

泛型提供类型安全，而不会影响性能或生产力。 TypeScript 将泛型与表示类型的类型变量一起使用。泛型函数的类型就像非泛型函数一样，类型参数首先列出，类似于函数声明。

在泛型中，我们需要在打开 (<) 和关闭 (>) 括号之间编写一个类型参数，这使得它成为强类型集合。泛型使用一种特殊的类型变量 <T> 来表示类型。泛型集合只包含相似类型的对象。

在 TypeScript 中，我们可以创建泛型类、泛型函数、泛型方法和泛型接口。 TypeScript 泛型几乎与 C# 和 Java 泛型相似。

示例

下面的例子可以帮助我们清楚地理解泛型。

function identity<T>(arg: T): T {  
    return arg;  
}  
let output1 = identity<string>("myString");  
let output2 = identity<number>( 100 );
console.log(output1);
console.log(output2);

当我们编译上面的文件时，它会返回对应的 JavaScript 文件如下。

function identity(arg) {
    return arg;
}
var output1 = identity("myString");
var output2 = identity(100);
console.log(output1);
console.log(output2);

输出

泛型的优势

泛型主要有三个优势。它们如下

类型安全：我们只能在泛型中保存单一类型的对象。它不允许存储其他对象。
不需要类型转换：不需要对对象进行类型转换。
编译时检查：它在编译时进行检查，因此问题不会在运行时发生。

为什么需要泛型？

我们可以通过以下例子来理解泛型的需求。

function getItems(items: any[] ) : any[] {
    return new Array().concat(items);
}
let myNumArr = getItems([10, 20, 30]);
let myStrArr = getItems(["Hello", "JavaTpoint"]);
myNumArr.push(40); // Correct
myNumArr.push("Hello TypeScript"); // Correct
myStrArr.push("Hello SSSIT"); // Correct
myStrArr.push(40); // Correct
console.log(myNumArr); // [10, 20, 30, 40, "Hello TypeScript"]
console.log(myStrArr); // ["Hello", "JavaTpoint", "Hello SSSIT", 40]

输出

在上面的例子中，getItems() 函数接受一个类型为 any 的数组。 getItems() 函数创建一个类型为 any 的新数组，将项目连接到其中，并返回这个新数组。由于我们使用了 any 数据类型，我们可以将任何类型的项目传递给该函数。但是，这可能不是添加项目的正确方法。我们必须将数字添加到数字数组，并将字符串添加到字符串数组，但我们不想将数字添加到字符串数组或反之亦然。

为了解决这个问题，TypeScript 引入了泛型。在泛型中，类型变量只接受用户在声明时提供的特定类型。它还保留了类型检查信息。

因此，我们可以将上面的函数编写为泛型函数，如下所示。

function getItems<T>(items : T[] ) : T[] {
    return new Array<T>().concat(items);
}
let arrNumber = getItems<number>([10, 20, 30]);
let arrString = getItems<string>(["Hello", "JavaTpoint"]);
arrNumber.push(40); // Correct
arrNumber.push("Hi! Javatpoint"); // Compilation Error
arrString.push("Hello TypeScript"); // Correct
arrString.push(50); // Compilation Error
console.log(arrNumber);
console.log(arrString);

输出

在上面的例子中，类型变量 T 在尖括号 getItems<T> 中指定了函数。此变量还指定参数和返回值的类型。它确保在函数调用时指定的数据类型也将是参数和返回值的类型。

泛型函数 getItems() 接受数字数组和字符串数组。当我们调用函数 getItems<number>([10, 20, 30]) 时，它会将 T 替换为 number。因此，参数和返回值的类型将是数字数组。同样，对于函数 getItems<string>(["Hello", "JavaTpoint"])，参数类型和返回值将是字符串数组。现在，如果我们尝试在 arrNumber 中添加字符串或在 arrString 数组中添加数字，编译器将显示一个错误。因此，它保留了类型检查的优势。

在 TypeScript 中，我们也可以在不指定类型变量的情况下调用泛型函数。 TypeScript 编译器将根据参数值的数据类型在函数上设置 T 的值。

多类型变量

在 TypeScript 泛型中，我们可以使用不同的名称定义多类型变量。我们可以通过下面的例子来理解它。

示例

function displayDataType<T, U>(id:T, name:U): void { 
  console.log("DataType of Id: "+typeof(id) + "\nDataType of Name: "+ typeof(name));  
}
displayDataType<number, string>(101, "Abhishek");

输出

带有非泛型类型的泛型

我们也可以将泛型类型与其他非泛型类型一起使用。

示例

function displayDataType<T>(id:T, name:string): void { 
  console.log("DataType of Id: "+typeof(id) + "\nDataType of Name: "+ typeof(name));  
}
displayDataType<number>(1, "Abhishek");

输出

泛型类

TypeScript 也支持泛型类。泛型类型参数在类名后面的尖括号 (<>) 中指定。泛型类可以有泛型字段或方法。

示例

class StudentInfo<T,U>
{ 
    private Id: T;
    private Name: U;
    setValue(id: T, name: U): void { 
        this.Id = id;
        this.Name = name;
    }
    display():void { 
        console.log(`Id = ${this.Id}, Name = ${this.Name}`);
    }
}
let st = new StudentInfo<number, string>();
st.setValue(101, "Virat");
st.display();
let std = new StudentInfo<string, string>();
std.setValue("201", "Rohit");
std.display();

输出

泛型接口

泛型类型也可以与接口一起使用。我们可以通过下面的例子来理解泛型接口。

示例

interface People {
    name: string
    age: number
}
interface Celebrity extends People {
    profession: string
}
function printName<T extends Celebrity>(theInput: T): void {
    console.log(`Name: ${theInput.name} \nAge: ${theInput.age} \nProfession: ${theInput.profession}`);
}
let player: Celebrity = {
    name: 'Rohit Sharma', age: 30, profession: 'Cricket Player'
}
printName(player);

输出

泛型接口作为函数类型

我们也可以使用泛型接口作为函数类型。以下示例可以理解它。

示例

interface StudentInfo<T, U>
{
    (id: T, value: U): void;
};
function studentData(id: number, value:string):void { 
    console.log('Id = '+ id + ', \nName = ' + value)
}
let std: StudentInfo<number, string> = studentData;
std(11, "Rohit Sharma");

泛型约束

我们知道，TypeScript 泛型类型允许使用任何和所有数据类型。但是，我们可以使用约束将其限制为某些类型。在下面的示例中，我们将创建一个具有单个 .length 属性的接口。我们将使用这个接口和“extends”关键字来表示我们的约束。

示例

interface Lengthwise {
    length: number;
}
function loggingIdentity<T extends Lengthwise>(arg: T): T {
    console.log("Length: " +arg.length);  // It has a .length property, so no more error found
    return arg;
}
loggingIdentity({length: 10, value: 9});
loggingIdentity(3);  // Compilation Error, number doesn't have a .length property

输出

Length: 10
Length: undefined

带有类的泛型约束

下面给出了一个关于构造函数和类类型的实例端之间泛型约束关系的更高级示例。

示例

class Student {
    Id: number;
    Name: string;

    constructor(id:number,  name:string) { 
        this.Id = id;
        this.Name = name;
    }
}
function display<T extends Student>(per: T): void {
    console.log(`${ st.Id} ${st.Name}` );
}
var st = new Student(101, "\nVirat Kohli");
display(st);

输出

下一个主题TypeScript 装饰器

← 上一个下一个 →

TypeScript 泛型

泛型的优势

为什么需要泛型？

多类型变量

带有非泛型类型的泛型

泛型类

泛型接口

泛型接口作为函数类型

泛型约束

带有类的泛型约束

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

TypeScript 教程

差异

面试题

TypeScript 泛型

泛型的优势

为什么需要泛型？

多类型变量

带有非泛型类型的泛型

泛型类

泛型接口

泛型接口作为函数类型

泛型约束

带有类的泛型约束

相关帖子

TypeScript 版本

TypeScript 特性

TypeScript 函数

TypeScript 箭头函数

TypeScript 访问器

Typescript Date 对象

函数重载

TypeScript 教程

TypeScript 确定循环

Typescript tsconfig.json

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器