If Typescript is the first language in which you've encountered generics, the concept can be quite difficult to understand. We skip the lecture in this lesson and dive straight into a real-world use-case that is guaranteed to help you understand the need for generics.

Let's say we have this part of code:

class Emitter{
emit(event){
console.log(event);
}
} const emitter = new Emitter(); emitter.emit({path: '/home', directory: true});

The object we want to pass in is {path: "", directory: ""}. But it may happen that we have some typo error, so we want IDE helps us to detect that.

TO do this, we need interface:

class Emitter<MyEvent>{
emit(event: MyEvent){
console.log(event);
}
} interface MyEvent{
path: string
directory: boolean
} const emitter = new Emitter<MyEvent>(); emitter.emit({path: '/home', directory: true});

So it defines that the emit() function's param should have 'directory' and 'path' attrs. If not, it will report error.

So far so good, but what happen if we have anyother function inside the class, such as:

class Emitter<T>{ // T: allow everything come in
emit(event: MyEvent){
console.log(event);
} yield(value: MyValue){
console.log(value);
}
} interface MyEvent{
path: string
directory: boolean
} interface MyValue{
message: string
} const emitter = new Emitter<MyEvent>();
const yielder = new Emitter<MyValue>(); emitter.emit({path: '/home', directory: true});
yielder.yield({message: "Hello World!"});

yield() take objet with message prop, and the interface defined as MyValue. So allows Emitter class accept multi interfaces, we can use <T>, then for each function, we add the interface for that.

[Typescript] Introduction to Generics in Typescript的更多相关文章

  1. [TypeScript] Custom data structures in TypeScript with iterators

    We usually think of types as something that can define a single layer of an object: with an interfac ...

  2. [TypeScript] The Basics of Generics in TypeScript

    It can be painful to write the same function repeatedly with different types. Typescript generics al ...

  3. [Typescript] Generics using TypeScript

    In this lesson we cover the key reason why programming languages need generics. We then show how use ...

  4. [TypeScript] Understand lookup types in TypeScript

    Lookup types, introduced in TypeScript 2.1, allow us to dynamically create types based on the proper ...

  5. 学习TypeScript,笔记一:TypeScript的简介与数据类型

    该文章用于督促自己学习TypeScript,作为学笔记进行保存,如果有错误的地方欢迎指正 2019-03-27  16:50:03 一.什么是TypeScript? TypeScript是javasc ...

  6. [Typescript] Specify Exact Values with TypeScript’s Literal Types

    A literal type is a type that represents exactly one value, e.g. one specific string or number. You ...

  7. [TypeScript] Overload a Function with TypeScript’s Overload Signatures

    Some functions may have different return types depending on the types of the arguments with which th ...

  8. [TypeScript] Represent Non-Primitive Types with TypeScript’s object Type

    ypeScript 2.2 introduced the object, a type that represents any non-primitive type. It can be used t ...

  9. [TypeScript] Creating a Class in TypeScript

    Typescript classes make traditional object oriented programming easier to read and write. In this le ...

随机推荐

  1. iOS面试题整理(一)

    代码规范 这是一个重点考察项,曾经在微博上发过一个风格纠错题: 也曾在面试时让人当场改过,槽点不少,能够有 10 处以上修改的就基本达到标准了(处女座的人在这方面表现都很优秀 一个区分度很大的面试题 ...

  2. emmt html生成

    html:5  或 ! html:5 或!:用于HTML5文档类型 html:xt:用于XHTML过渡文档类型 html:4s:用于HTML4严格文档类型 常用过渡文档类型  html:xt  直接c ...

  3. 何为 pimpl ?

    前言 你是否总因头文件包含冲突而苦恼? 你是否因头文件包含错乱而苦恼? 你是否因封装暴露了数据而苦恼? 你是否因经常改动实现而导致重新编译而苦恼? 在这里, 这些问题都不是问题, 跟随作者, 揭秘pi ...

  4. hdu 2460 poj 3694 (双联通+LCA)

    在给出的两个点上加一条边,求剩下桥的数量,,不会LCA在线,就用了最普通的,先Tarjan双联通缩点,然后将缩完的图建成一棵树,树的所有边就是桥了,如果在任意两点间加一条边的话,那么从两点到最近公共祖 ...

  5. Oracle 体系结构及安全管理

    1 oracle数据库服务器构成:数据库和实例2 oracle内部结构: 物理存储结构: 数据文件(xxx.dbf):存放数据 控制文件(xxx.ctl):控制数据库的完整性恢复数据或使用的日志文件 ...

  6. Windows下Apache部署Django过程记录

    Win7/Apache/Python2.7/Django1.9部署Web   环境: Windows7 Apache httpd-2.4.16-win64-VC14 Python2.7.11 Djan ...

  7. 使用django-mssql时候报pythoncom模块不存在

    pip install django-mssql是链接sqlserver的数据库db引擎,这里用到了pythoncom模块,所以还需要安装 pip install pypiwin32 settings ...

  8. asp.net 后台使用js弹窗失效问题

    1.这些事件输出来前后都变成JS代码了,看到到这样的代码的了.会变成<script>alert('合同号XXX已存在')</script>首先后台调试一下看看Page.Clie ...

  9. totolink的n200r路由在卓越网和京东网的价钱

    totolink的n200r路由在卓越网和京东网的价钱, 应朋友需要帮忙买totolink的n200r的路由, 一向是在京东买电子产品的,之前都有在卓越网购物,所以今天也去看看卓越网上n200r的价格 ...

  10. 转:Eclipse Kepler已支持Java 8

    文章来自于:http://www.infoq.com/cn/news/2014/04/eclipse-kepler-support-java8 期待已久的Java 8已于2014年3月19日正式发布, ...