TypeScript 学习实战-泛型的使用这是我参与11月更文挑战的第22天, 活动详情查看：2021最后一次更文挑战

这是我参与11月更文挑战的第22天，活动详情查看：2021最后一次更文挑战

回顾前面学习记录: 学习了 TS 的枚举类型/interface接口/Class类, 简单本文来学习 TS 重要概念--泛型

现在 TypeScript + Vue3 应用特别广, 如果不学习, 总感觉跟不上大厂的步伐了. 学习 TypeScript(虽然觉得也是可选的,但还是要学,真卷...) 这里记录学习 TypeScript 的过程, 收录在 TypeScript 实战专栏

Typescript 相关文档

Typescript 官网地址: typescriptlang.org/zh/

Typescript 中文文档--泛型：generics-泛型

TypeScript 泛型

通过上文的学习, 对 TypeScript 的泛型有所了解了, 如下代码帮助我们理解: 在 TypeScript 中这个类型变量就叫做泛型.

function returnSimpleType<T>(arg: T): T {
    return arg
}

泛型的基本使用

泛型可以理解为宽泛的类型, 通常是用于类和函数

上面的代码我们只定义了一个变量 T, 当然还可以有多个: T 和 U

/// 对于元组 tuple 交换其元素:
function swap<T, U>(tuple: [T, U]): [U, T] {
    return [tuple[1], tuple[0]];
}

swap([213, 'xn']) /// ['xn', 213]

1、泛型函数

泛型可以用于普通函数, 上面的例子已经列出来了. 泛型函数的类型与非泛型函数的类型相似, 只是有一个类型参数在最前面, 像函数声明一样：

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

let myIdentity: <T>(arg: T) => T = identity;

2、泛型类泛型可以用于类和构造器:

<T> 表示传递一个T类型, 在new的时候才把具体类型传入。其中T是变量可改, 但通常比较常见就是写T 之前说TypeScript类型的时有说到数组, 数组本质就是一个泛型类

let numberArr = new Array<number>();

class Person<T>{
    private _value: T;
    constructor(val: T) {
        this._value = val;
    }
}
let p = new Person<number>(12)

其实不管是用于类还是用于函数, 其实都可以理解为：把类型当一种特殊的参数传入进去

需要注意的是泛型也可以“继承”, 但表示的是限制范围. 例如:

class Person<T extends Date>{
    private _value: T;
    constructor(val: T) {
        this._value = val;
    }
}
let p1 = new Person(new Date())

class MyDate extends Date{}
let p2 = new Person(new MyDate())

3. 泛型接口:

同样, 泛型也可用于接口声明:

interface IReturnItemFn<T> {
    (para: T): T
}

当要传入一个number作为参数的时候，就可以这样声明函数:

const returnItem: IReturnItemFn<number> = para => para

当然还有其他用法...

Vue3 学习实战系列更文:

Vue3 源码仓库 vue-next : github.com/vuejs/vue-n…
Vue3.x 官方中文文档: v3.cn.vuejs.org

TypeScript 系列:

TypeScript 学习实战-泛型的使用