泛型

要创建一个可重用的组件,其中的数据类型就必须要兼容很多的类型,那么如何兼容呢,TypeScript提供了一个很好的方法:泛型

Hello World

要兼容多种数据格式,可能会有人想到any,即

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

使用any存在一个问题,有可能传入的值和返回的值不是同一种值,例如,传入数字,但是不确定返回的是什么值

要解决这个问题,我们需要引入类型变量-一种特殊的变量,只用于表示类型不表示值

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

给identify添加了类型变量T,用来捕获传入值的类型,然后将返回值的类型也设置为T,就实现了传入值和返回值为同一类型值的需求

我们把identify这个函数叫做泛型,因为它适用于所有类型,并且不会有any类型存在的问题

使用泛型的方法有两种:

  1、传入所有的参数,包括类型参数

let output = identify<string>('qwe');

  2、利用类型推论--即编译器会根据传入的参数自动地帮助我们确定T的类型

let output = identify('qwe');

泛型变量

在泛型中,我们要合理正确的使用泛型变量T,要牢记T表示任何类型

错误使用:

function identify<T>(arg: T): T {
console.log(arg.length);// Error: T doesn't have .length
return arg;
}

在泛型中我们使用了length这个属性,但是T代表任何类型,所以有可能是number,而number是没有length属性的,所以会报错

如果想要使用length这个属性,我们可以创建数组

function identify<T>(arg: T[]): T[] {
console.log(arg.length);// Error: T doesn't have .length
return arg;
}

泛型类型

泛型函数的类型与非泛型函数的类型没什么不同,只是有一个类型参数在最前面,像函数声明一样:

function identify<T>(arg: T): T {
return arg;
} let myIdentify: <U>(arg: U) => U = identify;

从上面的代码中可以看出也可以使用不同的泛型参数名,只要在数量上和使用方式上能对应上就可以

当然也可以把泛型参数当做一个接口的参数,这样就可以知道这个接口具体用的是那种类型

interface GenericIdnetify<T>{
(arg: T): T;
} function identity<T>(arg: T): T{
return arg;
} let myGenericidentify: GenericIdnetify<string> = identity;

泛型类

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

class GenericNumber<T> {
zeroValue: T;
add: (x: T, y: T) => T;
} let myGenericNumber = new GenericNumber<number>();
myGenericNumber.zeroValue = 0;
myGenericNumber.add = function(x, y) { return x + y; };

泛型约束

在前面的泛型变量中遇到了一个问题,就是在泛型中调用参数的length时,如果参数没有Length属性会报错,而使用泛型约束,就是只有满足一定的条件才可以使用这个泛型

为此,我们定义一个接口来描述约束条件。 创建一个包含 .length属性的接口,使用这个接口和extends关键字还实现约束:

interface lengthwise{
length: number;
} function identity<T extends lengthwise>(arg: T): T{
console.log(arg.length);
return arg;
} identity(123); //error identity('qwe'); //true

当传入123时,没有length属性,就报错,而传入字符串qwe时则完全正确

参考资料:

TypeScript中文网 · TypeScript——JavaScript的超集

TypeScript入门-泛型的更多相关文章

  1. TypeScript入门实例

    前言 TypeScript是JavaScript的超集,微软公司开发,利用es6语法,实现对js的面向对象编程思想,写代码的时候会像强类型语言一样,指定参数类型.返回值类型,类型不对会报错,但编译后还 ...

  2. TypeScript 入门自学笔记 — 类型断言(二)

    码文不易,转载请带上本文链接,感谢~ https://www.cnblogs.com/echoyya/p/14558034.html 目录 码文不易,转载请带上本文链接,感谢~ https://www ...

  3. TypeScript 素描 - 泛型、枚举

    /* 泛型,好处多多的功能.不过这里最基本的就不打算说了,仅准备说一些 和C#不同的地方 */ /* 泛型接口 GenericIdentityFn 定义了方法的描述等 identity方法则是它的实现 ...

  4. TypeScript入门指南(JavaScript的超集)

    TypeScript入门指南(JavaScript的超集)   你是否听过 TypeScript? TypeScript 是 JavaScript 的超集,TypeScript结合了类型检查和静态分析 ...

  5. typescript 入门教程一

    ##### 从今天开始,持续更新typescript入门教程系列.... 目前ts越来越火,主流的前端框架,好比*angular,vue 3*均是采用ts来编写,所有很多公司的项目都是用**ts**来 ...

  6. TypeScript入门一:配置TS工作环境

    配置手动编译TS文件工作环境 配置webpack自动化打包编译工作环境(后面补充) 一.TypeScript入门学习引言 进入主题之前,首先说明这个系列的博客是我刚刚接触TypeScript的学习笔记 ...

  7. TypeScript入门五:TypeScript的接口

    TypeScript接口的基本使用 TypeScript函数类型接口 TypeScript可索引类型接口 TypeScript类类型接口 TypeScript接口与继承 一.TypeScript接口的 ...

  8. TypeScript 入门教程学习笔记

    TypeScript 入门教程学习笔记 1. 数据类型定义 类型 实例 说明 Number let num: number = 1; 基本类型 String let myName: string = ...

  9. TypeScript入门文档

    typescript入门文档链接d地址:https://ts.xcatliu.com/basics/type-of-function.html 博主个人站点:www.devloper.top

随机推荐

  1. 用递归的方式处理数组 && 把递归方法方法定义到数组的原型上 (这是一次脑洞大开的神奇尝试)

    在 javascript 里,如果我们想用一个函数处理数组 (Array) 中的每个元素,那我们有很多种选择,最简单的当然就是用自带的 forEach 函数(低版本也可以使用 lodash 中的 fo ...

  2. shell中的条件表达式

    条件表达式返回的结果都为布尔型 真为1,假为0 条件测试的表达式 [expression] [[expression]] test expression 这三种条件表达式的效果是一样的 比较符 整数比 ...

  3. PyQt QListWidget修改列表项item的行高

    百度,谷歌之后都说用setHintSize(self,QCore.QSize(width,height)),然并卵,后来用qss修改就可以了,具体用法如下 # emaillist是我给QListWid ...

  4. ECMAScript6-解构

    ▓▓▓▓▓▓ 大致介绍 解构:就是将声明的一组变量和与相同结构的数组或者对象的元素数值一一对应,并将变量相对应元素进行赋值 ▓▓▓▓▓▓ 数组解构 例子: let [a,b,c] = [1,2,3]; ...

  5. rxjava2学习笔记(1)

    1.什么是RxJava? 简单,清晰的多线程编程框架.可方便的写出维护性高,逻辑清晰的Java程序. 2.什么是观察者模式? 入门教程讲这种高大上抽象概念都是耍流氓! 3.开始 3.1github地址 ...

  6. qt5的.ui文件在VS2010中无法编译问题

    自己手动添加的.ui文件在VS中是无法右键编译的,也即是说,在用QT designer编辑过的.ui文件无法实时更新相应的ui_XX.h文件,造成调试结果无法显示编辑过的新界面. 解决办法: 右键.u ...

  7. JavaScript ES5面向对象实现一个todolist

    todo-list 前言 遵守 开始 布局 设计对象 对象的属性 事件绑定 业务逻辑单元的操作 实例化对象 参考 todo-list 前言 最近阅读了JavaScript设计模式的面向对象篇,但是又苦 ...

  8. 数据泵 TTS(传输表空间技术)

    1.源库准备环境 --创建被传输的表空间create tablespace tts logging datafile '/home/oracle/app/oradata/orcl/tts01.dbf' ...

  9. mac下安装git,并将本地的项目上传到github

    mac下安装git 安装过程: 1.下载Git installer http://git-scm.com/downloads 2.下载之后打开,双击.pkg安装 3.打开终端,使用git --vers ...

  10. Linux SvN操作

    Linux svn管理工具的12个命令实践 2010-08-25 10:50 佚名 icycling.cublog.cn 字号:T | T 目前,绝大多数开源软件都使用svn作为代码版本管理软件.本文 ...