【typescript入门手册】泛型

简介: 泛型

1. 前言

Typescript编程中,一定少不了定义类型,约束规则目的提高代码质量和好维护,可弊端就是太死板了呀!声明个产量、函数、类、接口,都需要定义类型,太麻烦了吧?

泛型就是缓解这个问题,泛型顾名思义 广泛的、不受约束的嘛,使用泛型可以在ts中定义任意类型数据。相当于升级版的 any。

基本使用

泛型使用尖括号 < > 来表示,并在定义函数、类或接口时指定类型参数。下面是一些基本的使用示例:


// 示例1: 创建一个泛型函数
function identity<T>(arg: T): T {
    return arg;
}
// 示例2: 使用泛型函数
let output = identity<string>("Hello");
console.log(output);  // 输出: Hello
// 示例3: 使用类型推断,自动推断泛型类型
let output2 = identity("Hello");
console.log(output2);  // 输出: Hello


在示例1中,函数 identity 使用了泛型类型参数 T,表示参数和返回值的类型可以是任何类型。示例2和示例3展示了如何使用泛型函数并指定参数的类型。


2. 使用泛型变量:


泛型变量允许我们在函数或类中使用一种不确定的类型,而在实际使用时才确定具体的类型。


举个例子,考虑一个简单的函数identity,它接受一个参数并返回相同的值:


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


在这个例子中,我们使用了泛型变量T,它可以代表任意类型。当我们调用函数identity时,编译器会根据传入的参数类型自动推断T的具体类型。


例如:


let result = identity<string>("Hello");
console.log(result); // 输出:Hello
let value = identity<number>(42);
console.log(value); // 输出:42


通过使用泛型变量,函数identity可以适用于不同类型的参数,提供了更高的灵活性和可重用性。


3. 泛型类型:


泛型类型允许我们创建可以适用于不同类型的变量、函数或类。


举个例子,考虑一个简单的数组反转函数reverse


function reverse<T>(array: T[]): T[] {
    return array.reverse();
}


在这个例子中,我们定义了一个泛型函数reverse,接受一个数组参数,并返回反转后的数组。泛型类型T用于指定数组的元素类型。


例如:


let numbers: number[] = [1, 2, 3, 4, 5];
let reversedNumbers = reverse(numbers);
console.log(reversedNumbers); // 输出:[5, 4, 3, 2, 1]
let strings: string[] = ["apple", "banana", "orange"];
let reversedStrings = reverse(strings);
console.log(reversedStrings); // 输出:["orange", "banana", "apple"]


通过使用泛型类型,函数reverse可以适用于不同类型的数组,提供了更高的灵活性和可重用性。


4. 泛型类:


泛型类允许我们创建可以适用于多种类型的类。类中的成员可以使用泛型类型进行声明和使用。


举个例子,考虑一个简单的Box类,用于存储任意类型的值:


class Box<T> {
    private value: T;
    constructor(value: T) {
        this.value = value;
    }
    getValue(): T {
        return this.value;
    }
}


在这个例子中,我们定义了一个泛型类Box,它具有一个私有成员value和一个公共方法getValue用于获取值。


例如:


let box1 = new Box<number>(42);
console.log(box1.getValue()); // 输出:42
let box2 = new Box<string>("Hello");
console.log(box2.getValue()); // 输出:Hello


通过使用泛型类,我们可以创建适用于不同类型的Box对象,并且保持类型安全。


5. 泛型约束:


泛型约束允许我们限制泛型类型的范围,使其满足特定条件。


举个例子,假设我们想编写一个函数getLength,用于获取对象的长度。但是并不是所有的对象都有length属性,所以我们需要对泛型类型进行约束,确保它具有该属性。


例如:


interface HasLength {
    length: number;
}
function getLength<T extends HasLength>(obj: T): number {
    return obj.length;
}


在这个例子中,我们使用泛型约束T extends HasLength来限制泛型类型T必须满足HasLength接口的要求,即具有length属性。


例如:


let str = "Hello";
console.log(getLength(str)); // 输出:5
let arr = [1, 2, 3, 4, 5];
console.log(getLength(arr)); // 输出:5


通过使用泛型约束,函数getLength可以接受具有length属性的对象,并返回其长度。


6 泛型接口:


泛型接口允许我们定义可以适用于不同类型的接口。


举个例子,考虑一个简单的Transformer接口,它定义了一个将输入值转换为输出值的转换器:


interface Transformer<T, U> {
    transform(input: T): U;
}


在这个例子中,我们定义了一个泛型接口Transformer,它有两个类型参数TU,用于定义输入类型和输出类型。


例如,我们可以实现一个字符串到数字的转换器:


class StringToNumberTransformer implements Transformer<string, number> {
    transform(input: string): number {
        return parseFloat(input);
    }
}


通过定义实现了Transformer接口的类,我们可以创建不同类型的转换器。


例如:


let transformer = new StringToNumberTransformer();
let result = transformer.transform("3.14");
console.log(result); // 输出:3.14


通过使用泛型接口,我们可以定义可重用、可灵活的接口,适用于不同类型的转换操作。


总结:


泛型在TypeScript中提供了更灵活、可重用的代码编写方式。它可以用于定义函数、类以及接口,让我们能够编写适用于不同类型的代码。

相关文章
|
3月前
|
JavaScript 编译器
typescript之泛型
typescript之泛型
135 60
|
2月前
|
JavaScript 前端开发
TypeScript【类型别名、泛型】超简洁教程!再也不用看臭又长的TypeScript文档了!
【10月更文挑战第11天】TypeScript【类型别名、泛型】超简洁教程!再也不用看臭又长的TypeScript文档了!
|
3月前
|
JavaScript 安全
typeScript进阶(14)_泛型和注意事项
TypeScript中的泛型允许创建可重用的代码。泛型可以定义函数、接口、类,支持传递类型参数,实现类型安全。泛型可以用于数组,约束类型参数必须符合特定的接口,也可以在接口和类中使用。泛型类可以包含多个类型参数,甚至在泛型约束中使用类型参数。
28 1
typeScript进阶(14)_泛型和注意事项
|
2月前
|
JavaScript 前端开发 编译器
【小白入门】 浏览器如何识别Typescript?
【10月更文挑战第1天】浏览器如何识别Typescript?
|
2月前
|
JavaScript 安全 前端开发
TypeScript :枚举&字符&泛型
本文介绍了 TypeScript 中的泛型、约束、枚举和字符操作的基本用法。通过示例代码展示了如何定义和使用泛型函数、类和接口,以及如何利用 `keyof` 约束类型。此外,还介绍了枚举的定义和使用,包括常量枚举和外部枚举的区别。最后,简要说明了 `?.` 和 `??` 操作符的用途,帮助处理可能为空的属性和提供默认值。
|
3月前
|
JavaScript 前端开发 编译器
TypeScript,从0到入门带你进入类型的世界
该文章提供了TypeScript的入门指南,从安装配置到基础语法,再到高级特性如泛型、接口等的使用,帮助初学者快速掌握TypeScript的基本用法。
|
4月前
|
JavaScript 安全 算法
TypeScript:一个好泛型的价值
TypeScript:一个好泛型的价值
|
5月前
|
JavaScript 前端开发 程序员
Typescript 【实用教程】(2024最新版)含类型声明,类型断言,函数,接口,泛型等
Typescript 【实用教程】(2024最新版)含类型声明,类型断言,函数,接口,泛型等
88 0
|
6月前
|
JavaScript
TypeScript 泛型类型
TypeScript 泛型类型
|
6月前
|
JavaScript Java 编译器
TypeScript 泛型
TypeScript 泛型