• 泛型函数
  • 泛型类

一、泛型函数

在泛型函数之前,先简单的描述一下泛型,将变量定义成泛型可以在使用变量时来决定它的类型。什么意思呢?假如现在有一个函数,可能出现参数和返回值出现多种情况的现象,只有在调用函数受参数时才能确定它们的类型,就可以将函数定义成一个泛型函数,然后在调用这个函数的时候设定参数和返回值的类型。

 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的泛型的更多相关文章

  1. typeScript入门(四)泛型

    泛型:软件工程中,我们不仅要创建一致的定义良好的API,同时也要考虑可重用性. 组件不仅能够支持当前的数据类型,同时也能支持未来的数据类型,这在创建大型系统时为你提供了十分灵活的功能. 在像C#和Ja ...

  2. Typescript 学习笔记七:泛型

    中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...

  3. TypeScript入门实例

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

  4. TypeScript入门四:TypeScript的类(class)

    TypeScript类的基本使用(修饰符) TypeScript类的抽象类(abstract) TypeScript类的高级技巧 一.TypeScript类的基本使用(修饰符) TypeScript的 ...

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

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

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

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

  7. TypeScript入门教程

    TypeScript是什么 TypeScript是JavaScript的一个超集 TypeScript需要编译为JavaScript才能运行(语法糖) TypeScript提供了类型系统,规范类似Ja ...

  8. typescript 入门教程一

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

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

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

随机推荐

  1. Robot Framework 学习资源汇总

    学习网站 http://robotframework.org/ http://www.testtao.cn/?cat=43 https://www.jianshu.com/c/483e8ffcbc79 ...

  2. JAVA 基础编程练习题31 【程序 31 数组逆序】

    31 [程序 31 数组逆序] 题目:将一个数组逆序输出. 程序分析:用第一个与最后一个交换. package cskaoyan; public class cskaoyan31 { @org.jun ...

  3. 第五章 局域网的ARP 欺骗

    @ARP欺骗 arp欺骗仅限于局域网. arp欺骗虽然仅限于局域网,但却能让我们掌握网络的布局,以及如何通信:所以,我觉得这个章节非常有用. 监控本机流量 kali linux默认是不转发ip,如果我 ...

  4. linux系统,CentOs7加新硬盘

    1,打开Vmware软件,添加一块新的硬盘,然后一直下一步. 2.通过CRT等终端软件,连接到机器 [root@Mysql ~]# lsblk    //检查一下硬盘分区信息 [root@Mysql ...

  5. 启动Nginx 出现 nginx: [emerg] unknown directive "锘?user" 错误

    出现这种情况 一般是修改配置文件 nginx.conf 造成的 如果你修改文件后出现 那基本上就是这个原因 启动不了 重新打开 改为UTF-8 无BOM编码

  6. Java学习笔记-对象与垃圾回收

    Java存在垃圾回收机制,JVM会去回收垃圾,释放资源,而不是像C++一样有程序员去完成 垃圾回收机制的特点 垃圾回收机制只负责回收堆内存中的对象,不会回收任何物理资源(例如数据库连接.网络IO等资源 ...

  7. [CF798D]Mike and distribution_贪心

    Mike and distribution 题目链接:http://codeforces.com/problemset/problem/798/D 数据范围:略. 题解: 太难了吧这个题..... 这 ...

  8. [转帖]curl网站开发指南

    curl网站开发指南 http://www.ruanyifeng.com/blog/2011/09/curl.html linux 里面有非常多很好的工具 比如这个 curl 之前 以为 wget 就 ...

  9. Java:泛型的理解

    本文源自参考<Think in Java>,多篇博文以及阅读源码的总结 前言 Java中的泛型每各人都在使用,但是它底层的实现方法是什么呢,为何要这样实现,这样实现的优缺点有哪些,怎么解决 ...

  10. Redis 原子操作——事务

    MULTI 标记一个事务块的开始. 事务块内的多条命令会按照先后顺序被放进一个队列当中,最后由 EXEC 命令原子性(atomic)地执行. 可用版本: >= 1.2.0 时间复杂度: O(1) ...