泛型

要创建一个可重用的组件,其中的数据类型就必须要兼容很多的类型,那么如何兼容呢,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. SignalR的一点点东西

    JS部分 $.connection.hub.start().done(function () { alert(ok); }).fail(function (error) { alert(error); ...

  2. Spring之IOC详解

    学过Spring的小伙伴对于IOC一定不陌生,IOC:控制反转(Inversion of Control,英文缩写为IoC)是一个重要的面向对象编程的法则来削减计算机程序的耦合问题,也是轻量级的Spr ...

  3. jquery实现名单滚动

    转:http://www.qdfuns.com/notes/25341/917d9cb031f835a086dd445b77b6e04e.html 介绍:记录滚动特效.就是那一排文字不停地滚啊滚啊滚得 ...

  4. Java基础一:面向对象的特征

    经过16年校招,自己在Java基础方面也算有了一个质的飞跃,从原来知其然,到现在知其所以然,现将学习心得总结于此. 首先需要知道类和对象是什么? 维基百科定义类为: an extensible pro ...

  5. iOS开发之MapKit

    1.概述 MapKit框架使用前提: 导入框架: 导入主头文件: #import <MapKit/MapKit.h> MapKit框架使用须知: MapKit框架中所有数据类型的前缀都是M ...

  6. XAMPP安装报错及解决

    FROM:http://www.zeeronsolutions.com/installing-xampp-on-windows-7-user-account-control-uac-warning-m ...

  7. require include php5中最新区别,百度上好多错的。

    二者报错机制不同,include是warning 继续执行程序,require会报致命错误,中断程序运行. 前者有返回值,后者则没有. 注意了,php5里有一个区别没了,之前说的是require是无条 ...

  8. Ubuntu14.04配置Apache支持多个站点

    怎样在一个Ubuntu的机器上(虚拟机)配置Apache支持多个网站呢? 比如你有一台独立的Ubuntu虚拟机,配有一个外网的IP(45.46.47.48),并且注册了两个域名AAA.com和BBB. ...

  9. Dubbo的配置及使用

    1. Dubbo是什么? Dubbo是一个分布式服务框架,致力于提供高性能和透明化的RPC远程服务调用方案,以及SOA服务治理方案.简单的说,dubbo就是个服务框架,如果没有分布式的需求,其实是不需 ...

  10. google官方的下拉刷新+自定义上拉加载更多

    转载请标注转载:http://blog.csdn.net/oqihaogongyuan/article/details/50949118 google官方的下拉刷新+自定义上拉加载更多 现在很多app ...