TypeScript 学习实战-什么是泛型一

408 阅读2分钟

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

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

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

Typescript 相关文档

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

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

TypeScript 泛型

理解 什么是泛型:

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

泛型的学习理解:

我们先看两个函数:

function returnSimpleType (arg: number): number {
    return arg
}

这里函数返回值为 number类型和参数arg的类型一致, 但是如果这个参数arg 是一个 string字符串类型呢? 如下:

function returnSimpleType (arg: string): string {
    return arg
}

上面这俩函数 传递的参数的类型和函数返回的类型是一样的, 也就是书写逻辑是一样的, 重复性的代码要都这么写就很鸡肋了,

所以在 TypeScript 中有这么一个变量 T, 可以理解为它表示函数传入的参数的类型, 然后函数返回的类型也用它表示.即它只表示类型而不是值

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

如上代码所示: 在 TypeScript 中这个类型变量就叫做 泛型.

Vue3 学习实战系列更文:

  1. Vue3 源码学习-工具函数 utils(二)
  2. Vue3-初体验,
  3. Vue3-生命周期setup()函数,
  4. Vue3-computed & watch,
  5. Vue3-Teleport 改变组件挂载的根节点,
  6. Vue3-Suspense 处理异步请求,
  7. Vue3-defAsyncComponent 异步组件(新增),
  8. Vue3-fragments (新增),
  9. Vue3-v-model (非兼容),
  1. TypeScript 系列: