TypeScript入门-泛型
泛型
要创建一个可重用的组件,其中的数据类型就必须要兼容很多的类型,那么如何兼容呢,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入门-泛型的更多相关文章
- TypeScript入门实例
前言 TypeScript是JavaScript的超集,微软公司开发,利用es6语法,实现对js的面向对象编程思想,写代码的时候会像强类型语言一样,指定参数类型.返回值类型,类型不对会报错,但编译后还 ...
- TypeScript 入门自学笔记 — 类型断言(二)
码文不易,转载请带上本文链接,感谢~ https://www.cnblogs.com/echoyya/p/14558034.html 目录 码文不易,转载请带上本文链接,感谢~ https://www ...
- TypeScript 素描 - 泛型、枚举
/* 泛型,好处多多的功能.不过这里最基本的就不打算说了,仅准备说一些 和C#不同的地方 */ /* 泛型接口 GenericIdentityFn 定义了方法的描述等 identity方法则是它的实现 ...
- TypeScript入门指南(JavaScript的超集)
TypeScript入门指南(JavaScript的超集) 你是否听过 TypeScript? TypeScript 是 JavaScript 的超集,TypeScript结合了类型检查和静态分析 ...
- typescript 入门教程一
##### 从今天开始,持续更新typescript入门教程系列.... 目前ts越来越火,主流的前端框架,好比*angular,vue 3*均是采用ts来编写,所有很多公司的项目都是用**ts**来 ...
- TypeScript入门一:配置TS工作环境
配置手动编译TS文件工作环境 配置webpack自动化打包编译工作环境(后面补充) 一.TypeScript入门学习引言 进入主题之前,首先说明这个系列的博客是我刚刚接触TypeScript的学习笔记 ...
- TypeScript入门五:TypeScript的接口
TypeScript接口的基本使用 TypeScript函数类型接口 TypeScript可索引类型接口 TypeScript类类型接口 TypeScript接口与继承 一.TypeScript接口的 ...
- TypeScript 入门教程学习笔记
TypeScript 入门教程学习笔记 1. 数据类型定义 类型 实例 说明 Number let num: number = 1; 基本类型 String let myName: string = ...
- TypeScript入门文档
typescript入门文档链接d地址:https://ts.xcatliu.com/basics/type-of-function.html 博主个人站点:www.devloper.top
随机推荐
- SignalR的一点点东西
JS部分 $.connection.hub.start().done(function () { alert(ok); }).fail(function (error) { alert(error); ...
- Spring之IOC详解
学过Spring的小伙伴对于IOC一定不陌生,IOC:控制反转(Inversion of Control,英文缩写为IoC)是一个重要的面向对象编程的法则来削减计算机程序的耦合问题,也是轻量级的Spr ...
- jquery实现名单滚动
转:http://www.qdfuns.com/notes/25341/917d9cb031f835a086dd445b77b6e04e.html 介绍:记录滚动特效.就是那一排文字不停地滚啊滚啊滚得 ...
- Java基础一:面向对象的特征
经过16年校招,自己在Java基础方面也算有了一个质的飞跃,从原来知其然,到现在知其所以然,现将学习心得总结于此. 首先需要知道类和对象是什么? 维基百科定义类为: an extensible pro ...
- iOS开发之MapKit
1.概述 MapKit框架使用前提: 导入框架: 导入主头文件: #import <MapKit/MapKit.h> MapKit框架使用须知: MapKit框架中所有数据类型的前缀都是M ...
- XAMPP安装报错及解决
FROM:http://www.zeeronsolutions.com/installing-xampp-on-windows-7-user-account-control-uac-warning-m ...
- require include php5中最新区别,百度上好多错的。
二者报错机制不同,include是warning 继续执行程序,require会报致命错误,中断程序运行. 前者有返回值,后者则没有. 注意了,php5里有一个区别没了,之前说的是require是无条 ...
- Ubuntu14.04配置Apache支持多个站点
怎样在一个Ubuntu的机器上(虚拟机)配置Apache支持多个网站呢? 比如你有一台独立的Ubuntu虚拟机,配有一个外网的IP(45.46.47.48),并且注册了两个域名AAA.com和BBB. ...
- Dubbo的配置及使用
1. Dubbo是什么? Dubbo是一个分布式服务框架,致力于提供高性能和透明化的RPC远程服务调用方案,以及SOA服务治理方案.简单的说,dubbo就是个服务框架,如果没有分布式的需求,其实是不需 ...
- google官方的下拉刷新+自定义上拉加载更多
转载请标注转载:http://blog.csdn.net/oqihaogongyuan/article/details/50949118 google官方的下拉刷新+自定义上拉加载更多 现在很多app ...