iis服务器助手广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >TypeScript泛型的使用
  • 403
分享到

TypeScript泛型的使用

2024-04-02 19:04:59 403人浏览 泡泡鱼
摘要

目录1.简单的使用 2.在函数中使用泛型 3.在类中使用泛型 4.在泛型约束中使用类型参数 前言: 在javascript中,封装一个api可以具有多种用途,因为其实弱类型语言,但

前言:

javascript中,封装一个api可以具有多种用途,因为其实弱类型语言,但是就因为是弱类型可以最终得到的结果并不是我们想要的。

typescript的出现正好中解决了这个问题,但是考虑到API的复用时,TypeScript又显得不是这么的灵活。这个时候可以使用any类型来解决不灵活的问题,但是又回到JavaScript中的问题,得到最终的结果可能不是预期的那个样子。

为了解决这种情况,TypeScript推出了泛型 的概念,使用泛型可以在定义函数、接口或类的时候,不预先指定具体的类型,而在使用的时候再指定类型,这样做的目的是为了更大程度的来复用我们的代码。

1.简单的使用

现在我们要定义一个join函数,该函数的功能主要是接受两个类型一样的值,返回两个参数拼接后的值。示例代码如下:


// 所谓的泛型,通俗一点的解释就是泛指的类型
// 定义一个join函数,接受两个一样类型的参数,并将两个参数拼接后返回。
function join<T>(first: T, second: T) {
  return `${first}${second}`
}
// 这里明确 T 为 string 类型
join<string>('第一', '第二') // 第一第二
// 这里通过类型推导的方式,编译器会根据传入的参数自动推断出类型
join(1, 2) // 12

定义泛型是通过<>对尖括号来定义,我们在定义join函数的时候,并不知道可以接受那些类型,但是可以明确的是两个类型是必须一样的,如果想要满足这样的需求,不用泛型的话解决起来是没有这么简单的。

在调用函数的时候,这里使用了两种方式,一种是直接指定类型为string类型;另一种是通过类型推导的方式,编辑器会根据传入的参数自动帮助我们确定类型。

2.在函数中使用泛型

在定义一个函数时,我们可以使用多个泛型,而且返回值类型也可以通过泛型指定,只要在数量上和使用方式上能对应就可以。

示例代码如下


function identity<T, Y, P>(first: T, second: Y, third: P): Y {
  return second
}
// 指定类型
identity<boolean, string, number>(true, '字符串', 123) // 字符串
// 类型推断
identity('string', 123, true) // true

3.在类中使用泛型

我们不仅可以在函数中使用泛型,还可以在类中使用泛型。

示例代码如下:


class DataManager<T> {
  // 定义一个类,该类中具有一个T类型的私有数组
  constructor(private data: T[]) {}
  // 根据索引说数组中的值
  getItem(index: number): T {
    return this.data[index]
  }
}
const data = new DataManager(['一碗周'])
data.getItem(0) // 一碗周

而且泛型还可以继承与于某个接口,示例代码如下:


interface Item {
  name: string
}
class DataManager<T extends Item> {
  // 定义一个类,该类中具有一个T类型的私有数组
  constructor(private data: T[]) {}
  // 根据索引说数组中的值
  getItem(index: number): string {
    return this.data[index].name
  }
}
const data = new DataManager([{ name: '一碗周' }])
data.getItem(0) // 一碗周

使用extends可以达到一个泛型约束 的作用,就上面那个代码来说,我们必须约束传入的值必有具有一个name属性,否则就会抛出异常。

4.在泛型约束中使用类型参数

假如有如下需求,我们定义一个类,在类中一个私有对象,该对象中包含一些属性;然后定义一个方法,通过key来获取其对应的值。

实现代码如下:


// 定义一个接口
interface Person {
  name: string
  age: number
  hobby: string
}
// 定义一个类
class Me {
  constructor(private info: Person) {}
  getInfo(key: string) {
    return this.info[key]
  }
}
const me = new Me({
  name: '一碗周',
  age: 18,
  hobby: 'coding',
})
// 调用 me.getInfo() 可能会得到一个 undefined 如下示例
me.getInfo('myName') // undefined

上面的代码,如果我们调用示实例对象中的getInfo()方法时,传入一个没有的属性,会得到一个undefined。调用一个方法返回一个undefined时,这并不是TypeScript中的作风。

解决该问题可以通过keyof操作符,该关键字可以通过该操作符可以用于获取某种类型的所有键,其返回类型是联合类型。

示例代码如下:


type myPerson = keyof Person // 'name' | 'age' | 'hobby'

那现在就可以通过该操作符解决上面出现的那个问题

示例代码如下:


class Me {
  constructor(private info: Person) {}
  // 该写法与如下写法是一样的
  getInfo<T extends keyof Person>(key: T): Person[T] {
    return this.info[key]
  }
  // getInfo<T extends 'name' | 'age' | 'hobby'>(key: T): Person[T] {
  //     return this.info[key]
  // }
}
const me = new Me({
  name: '一碗周',
  age: 18,
  hobby: 'coding',
})
// 调用 me.getInfo() 如果传递一个未知的属性则会编译错误
me.getInfo('myName') // error : 类型“"myName"”的参数不能赋给类型“keyof Person”的参数。

现在我们只要访问对象中不具有的属性编译则会异常。

到此这篇关于TypeScript 泛型的使用的文章就介绍到这了,更多相关TypeScript 泛型内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: TypeScript泛型的使用

本文链接: https://www.lsjlt.com/news/159563.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • TypeScript泛型的使用
    目录1.简单的使用 2.在函数中使用泛型 3.在类中使用泛型 4.在泛型约束中使用类型参数 前言: 在JavaScript中,封装一个API可以具有多种用途,因为其实弱类型语言,但...
    99+
    2024-04-02
  • typeScript 泛型使用和泛型接口结合
    目录1、泛型是啥?2、泛型类型3、泛型接口4、泛型类5、泛型约束6、泛型参数默认类型7、泛型条件类型typeScript 中新增的泛型概念、泛型使用、泛型与接口结合: 在实际应用中...
    99+
    2024-04-02
  • typeScript泛型使用和泛型接口结合的方法
    这篇“typeScript泛型使用和泛型接口结合的方法”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“typeScript泛型...
    99+
    2023-06-29
  • TypeScript泛型的使用详细介绍
    目录情景再现使用泛型泛型类型泛型接口泛型类泛型约束在泛型里使用类类型[]高级案例情景再现 这里针对一种情况,也是非常常见的一种情况:那就是 function identity(arg...
    99+
    2024-04-02
  • 在 TypeScript 中使用泛型的方法
    目录1. 泛型语法2. 在函数中使用泛型(1)分配泛型参数(2)直接传递类型参数(3)默认类型参数(4)类型参数约束3. 在接口、类和类型中使用泛型(1)接口和类中的泛型(2)自定义...
    99+
    2024-04-02
  • TypeScript泛型使用详细介绍
    目录1 什么是泛型2 泛型方法3 泛型类4 泛型接口1 什么是泛型 泛型的本质是参数化类型,也就是说所操作的数据类型被指定为一个参数。这种参数类型可以用在类、接口和方法的创建中,分别...
    99+
    2022-11-13
    TypeScript泛型 TypeScript泛型使用方法
  • TypeScript 泛型怎么用
    这篇文章主要为大家展示了“TypeScript 泛型怎么用”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“TypeScript 泛型怎么用”这篇文章吧。1.简单的使用现在我们要...
    99+
    2023-06-22
  • TypeScript中泛型的使用详细讲解
    目录一、泛型程序设计是一种编程风格或编程范式二、案例:传入的参数类型与返回的类型一样三、形式类型参数四、泛型约束五、泛型函数六、泛型函数类型推断补充:应用场景总结一、泛型程序设计是一...
    99+
    2022-11-13
    typescript泛型使用 ts 泛型
  • TypeScript 泛型重载函数的使用方式
    目录前言TypeScript 的运行环境1. ts-node2. tscTypeScript 中的函数重载简单的排序算法1. 快速排序2. 中文排序3. 字符串自排序4. 通过泛型整...
    99+
    2022-11-13
    TypeScript 泛型重载函数使用方式 TypeScript 泛型重载函数
  • TypeScript中泛型怎么用
    这篇文章将为大家详细讲解有关TypeScript中泛型怎么用,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。泛型避免代码重复中,创建可重用的类型,是我们编写简洁代码重要的一...
    99+
    2024-04-02
  • 如何通俗的解释TypeScript 泛型
    目录概述什么是泛型编译系统通俗的理解泛型泛型类其他泛型使用的通俗解释结语概述 在 TypeScript 中我们会使用泛型来对函数的相关类型进行约束。这里的函数,同时包含 class ...
    99+
    2024-04-02
  • TypeScript中的接口和泛型是什么
    这篇文章给大家分享的是有关TypeScript中的接口和泛型是什么的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。接口使用 interface 关键字来定义数据类型对象类型当存在于较长的数据类型约束时,我们可以通过...
    99+
    2023-06-29
  • TypeScript接口与泛型全面精讲
    目录一、接口1. Interface 接口类型(1) 接口类型的基本使用(2) 可缺省属性(3) 只读属性(4) 定义函数类型(5) 索引签名2. Type 类型别名3. one q...
    99+
    2022-11-13
    TypeScript接口与泛型 TypeScript接口 TypeScript泛型
  • TypeScript中的接口和泛型你了解吗
    目录接口对象类型索引类型函数类型继承交叉类型接口实现interface 和 type 的区别字面量赋值枚举类型泛型泛型函数泛型接口泛型类类型约束总结接口 使用 interface 关...
    99+
    2024-04-02
  • TypeScript泛型的相关知识点有哪些
    本篇内容主要讲解“TypeScript泛型的相关知识点有哪些”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“TypeScript泛型的相关知识点有哪些”吧!1、t...
    99+
    2024-04-02
  • TypeScript泛型参数的默认值是什么
    这篇文章主要介绍“TypeScript泛型参数的默认值是什么”,在日常操作中,相信很多人在TypeScript泛型参数的默认值是什么问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”TypeScript泛型参数的...
    99+
    2023-07-02
  • 前端TypeScript学习day04-交叉类型与泛型
    (创作不易,感谢有你,你的支持,就是我前行的最大动力,如果看完对你有帮助,请留下您的足迹)            目录 交叉类型 泛型 创建泛型函数 调用泛型函数: 简化调用泛型函数: 泛型约束  指定更加具体的类型 添加约束  泛型接口 ...
    99+
    2023-10-21
    学习 前端 javascript vscode typescript
  • TypeScript泛型约束条件示例详解
    目录什么是泛型泛型的应用场景泛型约束(限制条件)泛型函数调用指定类型总结什么是泛型 两个值之间存在的对应关系,就可以用泛型来解决 泛型的应用场景 当一个函数的返回值的类型需要与此函数...
    99+
    2024-04-02
  • C#泛型的使用案例
    有这样一个有关汽车的类。 public class Car { public int ID { get; set; } public ...
    99+
    2022-11-13
    C# 泛型 案例
  • Go泛型应用工厂方法及泛型使用
    目录前言接口实现泛化编程工厂+泛型来实现更通用的泛化编程泛型使用的最佳时机关于功能设计的简单建议最后前言 由于网上关于泛型使用的文章太多了,这里就不聊怎么使用泛型了,今天我们结合工厂...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作