TypeScript入门六:TypeScript的泛型
- 泛型函数
- 泛型类
一、泛型函数
在泛型函数之前,先简单的描述一下泛型,将变量定义成泛型可以在使用变量时来决定它的类型。什么意思呢?假如现在有一个函数,可能出现参数和返回值出现多种情况的现象,只有在调用函数受参数时才能确定它们的类型,就可以将函数定义成一个泛型函数,然后在调用这个函数的时候设定参数和返回值的类型。
function identity<T>(arg: T): T {
return arg;
}
console.log(identity<number[]>([1,2,3]));//[1,2,3]
console.log(identity<string>('aaa'));//aaa
泛型相关的内容相对比较简单,官方文档也是非常的详细,这里就不做太多分析,就针对各种基本应用展示一些示例:
//可以这样写(参数和返回值使用泛型类型的数组类型)
function fun<T>(arg: T[]):T[]{
console.log(arg.length);
return arg;
}
//还可以这样这(参数使用泛型类型,返回值使用泛型类型的数组类型)
function fun1<T>(arg: T):T[]{
return [];
}
//但是,不能这样写
// function fun2<T>(arg: T[]):T{
// return arg.length;
// }
也可以将泛型函数作为泛型函数类型使用:
function identity<T>(arg: T): T{
return arg;
}
let myIdentity: <U>(arg: U) => U = identity;
由上面的泛型函数类型应该就很容易想到,可不可以定义一个泛型接口?这当然是没有问题的:
//定义泛型函数接口
interface GenericIdentityFn<T> {
(arg: T): T;
}
interface GenericIdentityFn<T> {
(arg: T): T;
}
//这里个泛型方法可以直接写成泛型函数接口的实现
//这里将它作为泛型函数类型
//用这个泛型函数类型的一个函数变量作为泛型函数接口的实现
function identity<T>(arg: T): T{
return arg;
}
//实现泛型函数接口
let myGenericIdentityfn : GenericIdentityFn<string | number | number[]> = identity;
identity('str');
然后,上面注释中还有一点忘了,实现泛型接口时可以给泛型传递多个类型,然后用或(|)运算符连接。
二、泛型类
泛型类与泛型函数非常类似,没有太多可说的,直接上代码,官方文档中的第一个示例只写了一个抽象像或者接口一样的class内容,所以要想正确的测试,需要补全代码,下面就是我补全的代码:
class GenericNumber<T> {
zeroValue: T;
constructor(zero:T){
this.zeroValue = zero;
}
add(x: T, y: T):T[]{
return [x,y];
}
} let myGenericNumber = new GenericNumber<number>(0);
myGenericNumber.zeroValue = 100;
myGenericNumber.add(10,100);
可用使用泛型类接口的方式来解决在泛型函数中无法描述内部一些数据类型的问题,也是在官方的文档中给出了示例代码:
interface Lengthwise {
length: number;
} function loggingIdentity<T extends Lengthwise>(arg: T): T {
console.log(arg.length); // Now we know it has a .length property, so no more error
return arg;
}
console.log( loggingIdentity({length:10,value:3}) );
泛型类接口也被叫做泛型约束,简单的说就是定一个类类型接口,然后创建泛型方法或者类型的时候继承这个接口,然后再调用函数或者实例化类的时候根据类型类型接口,传入对应的类型值作为泛型的类型:
interface G{
objG:object;
keyG:string;
}
function getProperty<T extends G>(obj:T['objG'], key:T['keyG']){
//return obj[key] -- 由于key是不确定的是没办法推断它的类型,所以没法被实现
return obj
} let x = { a: 1, b: 2, c: 3, d: 4 }; console.log( getProperty(x, "a")); // { a: 1, b: 2, c: 3, d: 4 }
在泛型里使用类型:简单的说就是泛型的类型是由指定class,所以被这个类型指定的参数或者返回值就是该类的实例化对象。
//注意这个官方示例类定义时没有给成员变量初始化赋值,也没有实现构造赋值,所以所有类中的成员都会报错
class BeeKeeper {
hasMask: boolean;
}
class ZooKeeper {
nametag: string;
}
class Animal {
numLegs: number;
}
class Bee extends Animal {
keeper: BeeKeeper;
}
class Lion extends Animal {
keeper: ZooKeeper;
}
function createInstance<A extends Animal>(c: new () => A): A {
return new c();
}
createInstance(Lion).keeper.nametag; // typechecks!
createInstance(Bee).keeper.hasMask; // typechecks!
TypeScript入门六:TypeScript的泛型的更多相关文章
- typeScript入门(四)泛型
泛型:软件工程中,我们不仅要创建一致的定义良好的API,同时也要考虑可重用性. 组件不仅能够支持当前的数据类型,同时也能支持未来的数据类型,这在创建大型系统时为你提供了十分灵活的功能. 在像C#和Ja ...
- Typescript 学习笔记七:泛型
中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...
- TypeScript入门实例
前言 TypeScript是JavaScript的超集,微软公司开发,利用es6语法,实现对js的面向对象编程思想,写代码的时候会像强类型语言一样,指定参数类型.返回值类型,类型不对会报错,但编译后还 ...
- TypeScript入门四:TypeScript的类(class)
TypeScript类的基本使用(修饰符) TypeScript类的抽象类(abstract) TypeScript类的高级技巧 一.TypeScript类的基本使用(修饰符) TypeScript的 ...
- TypeScript 入门自学笔记 — 类型断言(二)
码文不易,转载请带上本文链接,感谢~ https://www.cnblogs.com/echoyya/p/14558034.html 目录 码文不易,转载请带上本文链接,感谢~ https://www ...
- TypeScript入门指南(JavaScript的超集)
TypeScript入门指南(JavaScript的超集) 你是否听过 TypeScript? TypeScript 是 JavaScript 的超集,TypeScript结合了类型检查和静态分析 ...
- TypeScript入门教程
TypeScript是什么 TypeScript是JavaScript的一个超集 TypeScript需要编译为JavaScript才能运行(语法糖) TypeScript提供了类型系统,规范类似Ja ...
- typescript 入门教程一
##### 从今天开始,持续更新typescript入门教程系列.... 目前ts越来越火,主流的前端框架,好比*angular,vue 3*均是采用ts来编写,所有很多公司的项目都是用**ts**来 ...
- TypeScript入门一:配置TS工作环境
配置手动编译TS文件工作环境 配置webpack自动化打包编译工作环境(后面补充) 一.TypeScript入门学习引言 进入主题之前,首先说明这个系列的博客是我刚刚接触TypeScript的学习笔记 ...
随机推荐
- 013-java中的IO操作-InputStream/Reader、OutputStream/Writer
一.概述 IO流用来处理设备之间的数据传输,上传文件和下载文件,Java对数据的操作是通过流的方式,Java用于操作流的对象都在IO包中. 流是一组有顺序的,有起点和终点的字节集合,是对数据传输的总称 ...
- Ubuntu 18.04设置1920*1080
Ubuntu升级后,发现分辨率没有1920*1080,在网上寻找了一个文章解决办法如下. 方案一(临时性,重启会失效): 1.打开终端.输入:cvt 1920 1080 出现有modeline 的提示 ...
- jdk8环境下sprngboot/springmvc中JSR310新日期/时间类LocalDateTime显示效果带T
如图所示: 日期时间类中带了一个T,以上这种格式LocalDateTime格式化的时候默认日期时间格式:ISO.DATE_TIME(按笔者目前的知识理解是ISO8601规范中的日期时间格式化) 想要把 ...
- SpringBoot: 12.异常处理方式2(使用@ExceptionHandle注解)(转)
1.编写controller package com.bjsxt.controller; import org.springframework.stereotype.Controller; impor ...
- Response.setContentType()参数说明
response.setContentType()的参数说明 <meta http-equiv="Content-Type" content="text/html; ...
- logstash输出至elasticsearch
续上一篇 上一篇描述了通过logback配置用logstash收集springmvc项目日志,本文是描述如何进一步通过elasticsearch对所收集数据进行的分析. output { elasti ...
- jdbc访问oracle超慢,但是PLSQL访问正常
oracle数据库连接非常慢,sqlplus很快,用客户端就很慢,十几秒才好.然后服务器内存一下就飙升到了90%,最开始以为是表空间占满了,数据库连接数占满了.折腾了半天,重启,还是很慢.应用连接数据 ...
- get_object_var 返回一个数组
语法:get_object_var($object),返回一个数组.获取$object对象中的属性,组成一个数组 实例: <?php class person{ public $name=&qu ...
- 浪潮服务器NF84260M3安装Windows server 2012 R2 RAID配置
这里是已经做了RAID6,再做系统 浪潮服务器NF84260M3 U盘启动,光盘刻录 Windows server 2012 R2 镜像,地址:迅雷下载,ed2k://|file|cn_windows ...
- rownum伪行号-排行榜-分页
rownum伪行号-排行榜-分页 1.rownum 是oracle数据库特有的一个特性,它针对每一个查询(包括子查询),都会生成一个rownum用于对该次查询进行编号 2.每个rownum只针对当前s ...