TypeScript——泛型

定义:不预先确定的数据类型,具体的类型在使用的时候才能确定

好处:1.函数和类可以支持多种类型,增加的程序的可扩展性
           2.不必写多条函数重载,联合类型声明,增强代码的可读性
           3.灵活控制类型之间的约束

这里可以 把泛型理解为代表类型的参数

  • 泛型函数

// 泛型函数
function log<T>(value: T): T {
    return value
}
log<string[]>([‘a‘,‘b‘]) // 根据约束的类型带入函数
log([‘a‘,2]) // 可通过TS自身的类型推断

// 用类型别名来实现泛型函数
type Log = <T>(value: T) => T
let mylog: Log = log // 具体实现可指定到log函数
  • 泛型接口

interface Log1 {
    <T>(value: T): T // 与类型别名方式等价
}
interface Log2<T> { // 当泛型变量约束整个接口的话,实现时必须指定一个类型
    (value: T): T
}
let mylog1: Log2<number> = log
mylog1(1)
  • 泛型类

看上去与泛型接口差不多。 泛型类使用( <>)括起泛型类型,跟在类名后面。

class Log3<T> {
    run(value: T) {
        console.log(value)
        return value
    }
}
let log1 = new Log3<number>()
log1.run(1)
let log2 = new Log3() // 当不指定参数类型,则可以传入任意类型
log2.run(‘a‘) 
  • 泛型约束

interface Length {
    length: number
}
function log<T extends Length>(value: T): T {
    console.log(value, value.length)
    return value
}
log([]) // 有length属性即可调用
log(‘11‘)
log({length: 1})

总结
  泛型不仅可以保持类型的一致性,又不失程序的灵活性,同时也可以通过泛型约束,控制类型之间的约束。从代码的上来看,可读性,简洁性,远优于函数重载,联合类型声明以及 any 类型的声明。

原文地址:https://www.cnblogs.com/JessieXie/p/12384938.html

时间: 2024-10-31 14:41:27

TypeScript——泛型的相关文章

【第7篇】TypeScript泛型的案例代码详解

8.1最简单泛型例子 Ts代码 /** * 没有泛型,我们要么必须给身份功能的特定类型 */ function identity1(arg: number): number { return arg; } /** * 或者:我们可以描述使用"任意"类型的标识功能: */ function identity2(arg: any): any { return arg; } Js文件 /** * 没有泛型,我们要么必须给身份功能的特定类型 */ function identity1(arg)

TypeScript 泛型

TS里面有泛型让我很意外,这个比AS3确实要强大: let myIdentity_change : <T>(arg:T)=>T=function(a){ return a }; console.log(`generic : ${myIdentity_change<string>("Hello World!!!")}`); 结果: 看看泛型接口 ①:注意接口(GenericFun)后面没有<T> interface GenericFun{    

TypeScript泛型

泛型的概念 指不预先确定的数据类型,具体的类型要在使用的时候才能确定.咋一听,是不是觉得JavaScript本身就是这样?这是由于理解有误.前面说“在使用的时候确定”,而非在程序执行的时候确定. 泛型函数 现在有个需求:一个被定义的函数原本输入字符串输出字符串,现在想让它同时支持输入输出字符串数组,如何实现? 1.通过函数重载 // 函数调用时依照声明的顺序进行匹配 function log(value: string): string; function log(value: string[]

TypeScript 第六讲 ———— TypeScript 泛型

前言: 泛型:软件工程中,我们不仅要创建一致的定义良好的API,同时也要考虑可重用性.组件不仅能够支持当前的数据类型,同时也能支持未来的数据类型,这在创建大型系统时为你提供了十分灵话的功能. 在像c和Java这样的语言中,可以使用泛型来创建可重用的组件,一个组件可以支持多种类型的数据.这样 用户就可以以自己的数据类型来使用组件. 通俗理解,泛型就是解决类接口方法的复用性.以及对不特定数据类型的支持 下面这种就只能返回string类型的数据: function getData(value:stri

TypeScript最大的目的是让程序员更具创造性

TypeScript 是 JavaScript 的一个超集,支持 ECMAScript 6 标准. TypeScript 由微软开发的自由和开源的编程语言. TypeScript 设计目标是开发大型应用,它可以编译成纯 JavaScript,编译出来的 JavaScript 可以运行在任何浏览器上. 以上为网上对 Typescript 的一些解释,那我们为什么要学 Typescript? 提到前端我们首先会想到 HTML,CSS,JavaScript 三大家族,我们掌握这三个就可以在前端界获得一

[web建站] 极客WEB大前端专家级开发工程师培训视频教程

极客WEB大前端专家级开发工程师培训视频教程  教程下载地址: http://www.fu83.cn/thread-355-1-1.html 课程目录:1.走进前端工程师的世界HTML51.HTML5与HTML4的区别2.HTML5新增的主体结构元素3.HTML5新增的的非主体结构元素 4.HTML5表单新增元素与属性5.HTML5表单新增元素与属性(续)6.HTML5改良的input元素的种类 7.HTML5增强的页面元素8.HTML5编辑API之Range对象(一)9.HTML5编辑API之

极客学院Web前端开发技术实战视频教程 初级入门+高级实战++专家课程+面试指导

===============课程目录=============== ├<初级中级>│  ├<1. HTML5开发前准备>│  │  ├1.HTML5开发前准备.mp4│  │  └2.开发前的准备-快捷键.mp4│  ├<10. React.js>│  │  ├React.js简介.txt│  │  ├<1.React 概述>│  │  │  ├React 开发环境搭建.mp4│  │  │  ├编写第一个 React 程序.mp4│  │  │  └什么

2020年前端面试复习必读文章【超百篇文章/赠复习导图】

前言 之前写过一篇 一年半经验如何准备阿里巴巴前端面试,给大家分享了一个面试复习导图,有很多朋友说希望能够针对每个 case 提供一个参考答案. 写答案就算了,一是「精力有限」,二是我觉得大家还是需要自己「理解总结会比较好」. 给大家整理了一下每个 case 一些还算不错的文章吧(还包括一些躺在我收藏夹里的好文章),大家可以自己看文章总结一下答案,这样也会理解更深刻. 「并不是所有文章都需要看」,希望是一个抛砖引玉的作用,大家也可以锻炼一下自己寻找有效资料的能力 ~ ( 文章排序不分前后,随机排

TypeScript入门-泛型

泛型 要创建一个可重用的组件,其中的数据类型就必须要兼容很多的类型,那么如何兼容呢,TypeScript提供了一个很好的方法:泛型 Hello World 要兼容多种数据格式,可能会有人想到any,即 function identify(arg: any): any{    return arg; } 使用any存在一个问题,有可能传入的值和返回的值不是同一种值,例如,传入数字,但是不确定返回的是什么值 要解决这个问题,我们需要引入类型变量-一种特殊的变量,只用于表示类型不表示值 functio