TypeScript泛型的使用详细介绍

目录
  • 情景再现
  • 使用泛型
  • 泛型类型
  • 泛型接口
  • 泛型类
  • 泛型约束
  • 在泛型里使用类类型[]
    • 高级案例

情景再现

这里针对一种情况，也是非常常见的一种情况：那就是

function identity(arg: number): number {
    return arg;
}

就是我接收一个number类型的参数，同时也返回一个number，那如果现在我想要接收一个string类型，同时也返回一个string，那么我就要再写一个函数像这样：

function identity2(arg: string): string{
    return arg;
}

那如果我现在想要void类型…

可能大家会想，那全部都变成any不就行了？像下面这样

function identity(arg: any): any {
    return arg;
}

使用any类型会导致这个函数可以接收任何类型的arg参数，这样就丢失了一些信息：传入的类型与返回的类型应该是相同的。 如果我们传入一个数字，我们只知道任何类型的值都有可能被返回。

那这样不就与我们一开始的设想不一致了吗？我传入Number，返回string，也不会报错呀！

赞 (0)

相关推荐

  • 在 TypeScript 中使用泛型的方法

    在 TypeScript 中使用泛型的方法

    目录 1. 泛型语法 2. 在函数中使用泛型 (1)分配泛型参数 (2)直接传递类型参数 (3)默认类型参数 (4)类型参数约束 3. 在接口.类和类型中使用泛型 (1)接口和类中的泛型 (2)自定义类型中的泛型 4. 使用泛型创建映射类型 5. 使用泛型创建条件类型 (1)基础条件类型 (2)高级条件类型 6. 小结 前言: 泛型是静态类型语言的基本特征,允许将类型作为参数传递给另一个类型.函数.或者其他结构.TypeScript 支持泛型作为将类型安全引入组件的一种方式.这些组件接受参数和返

  • TypeScript 泛型的使用

    目录 1.简单的使用 2.在函数中使用泛型 3.在类中使用泛型 4.在泛型约束中使用类型参数 前言: 在JavaScript中,封装一个API可以具有多种用途,因为其实弱类型语言,但是就因为是弱类型可以最终得到的结果并不是我们想要的. TypeScript的出现正好中解决了这个问题,但是考虑到API的复用时,TypeScript又显得不是这么的灵活.这个时候可以使用any类型来解决不灵活的问题,但是又回到JavaScript中的问题,得到最终的结果可能不是预期的那个样子. 为了解决这种情况,Ty

  • typeScript 泛型使用和泛型接口结合

    typeScript 泛型使用和泛型接口结合

    目录 1.泛型是啥? 2.泛型类型 3.泛型接口 4.泛型类 5.泛型约束 6.泛型参数默认类型 7.泛型条件类型 typeScript 中新增的泛型概念.泛型使用.泛型与接口结合: 在实际应用中可能会遇到求最小值的问题,比如求数组中的最小值. 在 ts 中的就需要写两种方式,一种针对 number,另外一种针对字符串. 这样写不利于代码重用,项目较大时,性能较差,同时工作效率也低,所以在 ts 中引入了泛型概念. function getMin1(arr:number[]):number {

  • TypeScript 泛型重载函数的使用方式

    TypeScript 泛型重载函数的使用方式

    目录 前言 TypeScript 的运行环境 1. ts-node 2. tsc TypeScript 中的函数重载 简单的排序算法 1. 快速排序 2. 中文排序 3. 字符串自排序 4. 通过泛型整合几种排序 5. 使用函数重载完善排序功能 总结 前言 使用 TypeScript 进行开发也已经有段日子了,虽然最开始接触后以为这不就和 Java 一样一样的么,然而越深入了解越发现还真不一样~不过有些概念来说是相通的,比如泛型. Java 里也有函数重载,但是和 TS 差别还是挺大的,那就通过

  • TypeScript泛型约束条件示例详解

    目录 什么是泛型 泛型的应用场景 泛型约束(限制条件) 泛型函数调用指定类型 总结 什么是泛型 两个值之间存在的对应关系,就可以用泛型来解决 泛型的应用场景 当一个函数的返回值的类型需要与此函数的参数类型想关联的时候,就需要使用泛型 例如 //约定此函数调用时必须传入一个数组,并返回数组第一项 function arrFn <T> (arr: T[]) :T|undefined { return arr[0] } const n = arrFn([1,2]) //number类型 const

  • TypeScript 泛型推断实现示例详解

    TypeScript 泛型推断实现示例详解

    目录 前言 基础类型准备 最终使用的方式 基于Interface的实现 (失败了) 所有内容都基于type 实现 完整Demo 结束语 前言 最近做东西都在用ts,有时候写比较复杂的功能,如果不熟悉,类型写起来还是挺麻烦的.有这样一个功能,在这里,我们就不以我们现有的业务来举例了,我们还是已Animal举例,来说明场景.通过一个工厂来创建不同的动物实例.在这里我们借助泛型来实现类型的约束和动态推到指定类型. 基础类型准备 用一个枚举来定义Animal的类型 enum EAnimalType {

  • 关于对TypeScript泛型参数的默认值理解

    关于对TypeScript泛型参数的默认值理解

    目录 泛型简介 举个 举个 泛型参数的默认值——函数重载 泛型参数的默认值——正文 参考 泛型简介 软件工程中,我们不仅要创建一致的定义良好的 API,同时也要考虑可重用性. 组件不仅能够支持当前的数据类型,同时也能支持未来的数据类型,这在创建大型系统时为你提供了十分灵活的功能. 在像C# 和 Java 这样的语言中,可以使用 泛型 来创建可重用的组件,一个组件可以支持多种类型的数据. 这样用户就可以以自己的数据类型来使用组件. 举个 举个最简单的例子来理解泛型 function getVal(

  • TypeScript中的接口和泛型你了解吗

    TypeScript中的接口和泛型你了解吗

    目录 接口 对象类型 索引类型 函数类型 继承 交叉类型 接口实现 interface和type的区别 字面量赋值 枚举类型 泛型 泛型函数 泛型接口 泛型类 类型约束 总结 接口 使用 interface 关键字来定义数据类型 对象类型 当存在于较长的数据类型约束时,我们可以通过 type 关键字 为类型注解起别名,也可以通过接口来定义 type UserType = { name: string; age?: number }; const user: UserType = { name:

  • 如何通俗的解释TypeScript 泛型

    概述 在 TypeScript 中我们会使用泛型来对函数的相关类型进行约束.这里的函数,同时包含 class 的构造函数,因此,一个类的声明部分,也可以使用泛型.那么,究竟什么是泛型?如果通俗的理解泛型呢? 什么是泛型 泛型(Generics)是指在定义函数.接口或类的时候,不预先指定具体的类型,而在使用的时候再指定类型的一种特性. 通俗的解释,泛型是类型系统中的"参数",主要作用是为了类型的重用.从上面定义可以看出,它只会用在函数.接口和类中.它和js程序中的函数参数是两个层面的事物

  • TypeScript泛型的使用详细介绍

    目录 情景再现 使用泛型 泛型类型 泛型接口 泛型类 泛型约束 在泛型里使用类类型[] 高级案例 情景再现 这里针对一种情况,也是非常常见的一种情况:那就是 function identity(arg: number): number { return arg; } 就是我接收一个number类型的参数,同时也返回一个number,那如果现在我想要接收一个string类型,同时也返回一个string,那么我就要再写一个函数像这样: function identity2(arg: string):

  • 详细介绍C# 泛型

    在C#开发中,必不可少的要用到泛型.泛型是.NET2.0版本就有的,它广泛应用于C#框架中容器的使用中.下面我们来详细介绍一下. 一.泛型的主要优势 1.性能更高. 2.类型更安全. 3.代码更多的重用和扩展性. 二.泛型的基本使用 泛型的一个主要优点是性能,我们来看下面的例子: static void Main(string[] args) { //不是泛型的集合类 ArrayList list = new ArrayList(); //添加一个值类型 装箱操作 list.Add(12); /

  • fastjson 使用方法详细介绍

    Fastjson介绍 Fastjson是一个Java语言编写的JSON处理器. 1.遵循http://json.org标准,为其官方网站收录的参考实现之一. 2.功能qiang打,支持JDK的各种类型,包括基本的JavaBean.Collection.Map.Date.Enum.泛型. 3.无依赖,不需要例外额外的jar,能够直接跑在JDK上. 4.开源,使用Apache License 2.0协议开源.http://code.alibabatech.com/wiki/display/FastJ

  • 前端深入理解Typescript泛型概念

    首先介绍一下泛性的概念 泛型程序设计(generic programming)是程序设计语言的一种风格或范式.泛型允许程序员在强类型程序设计语言中编写代码时使用一些以后才指定的类型,在实例化时作为参数指明这些类型. 泛型是指在定义函数,接口或者类的时候,不预先定义好具体的类型,而在使用的时候在指定类型的一种特性. 先举一个简单的例子 假设我们定义一个函数,它可以接收一个number类型做为参数,并且返回一个number类型. function genericDemo(data: number):

  • typescript配置alias的详细步骤

    1 安装依赖 npm install --save-dev babel-plugin-module-resolver # yarn add babel-plugin-module-resolver --dev 根目录新增.babelrc文件 参考以下内容按您项目中的需要去修改 { "presets": ["next/babel"], "plugins": [ [ "module-resolver", { "alias

  • TypeScript泛型参数默认类型和新的strict编译选项

    TypeScript泛型参数默认类型和新的strict编译选项

    概述 TypeScript 2.3 增加了对声明泛型参数默认类型的支持,允许为泛型类型中的类型参数指定默认类型. 接下来看看如何通过泛型参数默认将以下react组件从js(和jsX)迁移到 TypeScript (和TSX): class Greeting extends react.Component { render() { return <span>Hello, {this.props.name}!</span>; } } 为组件类创建类型定义 咱们先从为Component类

  • 详细介绍Java函数式接口

    目录 Java-函数式接口 1.自定义函数式接口 1.1概述 1.2格式 1.3@FunctionalInterface注解 1.4自定义函数式接口 2.函数式编程 2.1Lambda的延迟执行 2.2使用Lambda作为参数和返回值 3.常用函数式接口 3.1Supplier接口 3.2Consumer接口 3.3Predicate接口 3.4Function接口 Java-函数式接口 1.自定义函数式接口 1.1概述 函数式接口在Java中是指:**有且仅有一个抽象方法的接口.**当然接口中

  • JS 基本概念详细介绍

    目录 1.JS的特点 1.1 多范式 1.2 解释 1.3单线程 1.4 非阻塞 1.5 高级 1.6 动态类型 2.学习策略 3.基础知识 许多人在深入研究 Javascript 之前忽略了 Javascript 的理论方面.这些概念帮助我们了解构建 Javascript 应用程序时所采用的不同路径和模式.这些模式存在于 JS Land 的每个框架中,因此在学习语言本身之前了解这些概念很有意义. 1.JS的特点 1.1 多范式 Javascript 支持过程式.面向对象和事件驱动的函数式编程!

随机推荐