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);
输出:
泛型的优点
泛型有三个主要优点。它们如下:
- 类型安全: 泛型只能容纳一种类型的对象。它不允许存储其他对象。
- 不需要类型转换: 不需要将对象转换为其他类型。
- 编译时检查: 它在编译时检查,因此问题不会在运行时发生。
为什么需要泛型?
我们可以通过以下示例了解泛型的需求。
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]
输出:
在上面的示例中,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);
输出:
在上面的示例中,类型变量T指定角括号getItems
在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");
输出:
泛型与非泛型类型一起使用
我们还可以将泛型类型与其他非泛型类型一起使用。
示例
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还支持泛型类。泛型类型参数在紧随类名后的尖括号(<>)中指定。泛型类可以具有泛型字段或方法。
示例
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}
Age:{theInput.age}
Profession: ${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 + ',
Name = ' + 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); //它具有.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);
输出: