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的学习笔记 ...
随机推荐
- 《maven实战》笔记(4)----maven的仓库
maven的构件表示方式是文件,maven通过仓库来统一管理这些文件. maven仓库的布局方式: 任何一个构件都有其唯一的坐标,根据这个坐标可以定义其在仓库中的唯一存储路径 仓库分为两类:本地仓库和 ...
- 阶段5 3.微服务项目【学成在线】_day04 页面静态化_11-freemarker静态化测试-基于模板字符串静态化
再定义一个测试方法 把拿到的字符串变成模板 加载器设置好了以后, 加一个断点来测试 生成模板文件 上面这种方式很灵活. 最终代码 @Test public void testGenerateHtmlB ...
- JavaScript new对象的四个过程
new 一个对象 function Person(name, age) { this.name = name; this.age = age; } var person = new Person(&q ...
- CG标准函数
- matlab boundaries和fchcode函数无法执行的解决办法 未定义与 'double' 类型的输入参数相对应的函数 'boundaries'
在测试代码时发现,自己的matlab无法执行Freeman链码函数: boundaries和fchcode函数都无法正常运行: 需要在自己的工作目录中添加如下函数: boundaries fchc ...
- 虚拟机中CentOS 7 x64图形化界面的安装
VMware的初始设置如下: 图1 待虚拟机读取完iso,出现此界面 图2 我们主要是安装图形化界面的系统,所以在软件选择栏下如图选择: 图3 设置root密码,创建用户,等候安装完成: 图4 安装完 ...
- 【ARM-Linux开发】Linux下更改目录下所有文件的所有者及其权限
[ARM-Linux开发]Linux下更改目录下所有文件的所有者及其权限 chown 更换所有者: chmod 改变权限: 想一次修改某个目录下所有文件的权限,包括子目录中的文件权限也要修改,要使用参 ...
- stat中的st_dev和st_rdev
目录 stat中的st_dev和st_rdev title: stat中的st_dev和st_rdev date: 2019/11/27 21:04:25 toc: true --- stat中的st ...
- RestTemplate实践(及遇到的问题)
在微服务都是以HTTP接口的形式暴露自身服务的,因此在调用远程服务时就必须使用HTTP客户端.我们可以使用JDK原生的URLConnection.Apache的Http Client.Netty的异步 ...
- 【转贴】SMP、NUMA、MPP体系结构介绍
SMP.NUMA.MPP体系结构介绍 https://www.cnblogs.com/tcicy/p/10185783.html 从系统架构来看,目前的商用服务器大体可以分为三类,即对称多处理器结构 ...