TypeScript泛型

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);

输出：

TypeScript泛型

泛型的优点

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

类型安全： 泛型只能容纳一种类型的对象。它不允许存储其他对象。
不需要类型转换： 不需要将对象转换为其他类型。
编译时检查： 它在编译时检查，因此问题不会在运行时发生。

为什么需要泛型？

我们可以通过以下示例了解泛型的需求。

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

输出：

TypeScript泛型

在上面的示例中，getItems()函数接受一个类型为any的数组。getItems()函数创建一个类型为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); // 正确
arrNumber.push("Hi! Javatpoint"); // 编译错误
arrString.push("Hello TypeScript"); // 正确
arrString.push(50); // 编译错误
console.log(arrNumber);
console.log(arrString);

输出：

TypeScript泛型

在上面的示例中，类型变量T指定角括号getItems 中的函数。此变量还指定参数和返回值的类型。它确保函数调用时指定的数据类型也将是参数和返回值的数据类型。现在，如果我们尝试将字符串添加到arrNumber或将数字添加到arrString数组中，则编译器将显示错误。因此，它保留了类型检查的优势。

在TypeScript中，我们还可以调用未指定类型变量的泛型函数。TypeScript编译器将基于参数值的数据类型设置T的值。

多类型变量

在TypeScript泛型中，我们可以使用不同名称定义多个类型变量。以下示例可以帮助我们理解它。

示例

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

输出：

TypeScript泛型

泛型与非泛型类型一起使用

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

示例

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

输出：

TypeScript泛型

泛型类

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();

输出:

TypeScript泛型

泛型接口

泛型类型也可以与接口一起使用。我们可以通过以下示例了解泛型接口。

示例

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}
Age:{theInput.age}
Profession: ${theInput.profession}`);
}
let player: Celebrity = {
    name: 'Rohit Sharma', age: 30, profession: 'Cricket Player'
}
printName(player);

输出：

TypeScript泛型

泛型接口作为函数类型

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

示例

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

TypeScript泛型

泛型约束

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

示例

interface Lengthwise {
    length: number;
}
function loggingIdentity<T extends Lengthwise>(arg: T): T {
    console.log("Length: " +arg.length);  //它具有.length属性，因此不再发现错误
    return arg;
}
loggingIdentity({length: 10, value: 9});
loggingIdentity(3);  //编译错误，数字没有.length属性

输出：

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, "Virat Kohli");
display(st);