Inheritance is a way to
indicate that a class receives behavior from a parent class. Then we can override, modify or augment
those behaviors on the new class.

  class Report {
data: Array<string>; constructor(data: Array<string>) {
this.data = data;
} run() {
this.data.forEach(function(line) { console.log(line); });
}
}

Call the class:

var r: Report = new Report(['First line', 'Second line']);
r.run();

Result:

 First line
Second line

Now let’s say we want to have a second report that takes some headers and some data but we still
want to reuse how the Report class presents the data to the user.
To reuse that behavior from the Report class we can use inheritance with the extends keyword:

 class TabbedReport extends Report {
headers: Array<string>; constructor(headers: string[], values: string[]) {
this.headers = headers;
super(values) // In Report class : data
} run() {
console.log(headers);
super.run();
}
}

Run:

var headers: string[] = ['Name'];
var data: string[] = ['Alice Green', 'Paul Pfifer', 'Louis Blakenship'];
var r: TabbedReport = new TabbedReport(headers, data)
r.run();

[TypeScript] Inheritance的更多相关文章

  1. [Vue @Component] Extend Vue Components in TypeScript

    This lesson shows how you can extend and reuse logic in Vue components using TypeScript inheritance. ...

  2. [TypeScript] Sharing Class Behavior with Inheritance in TypeScript

    Typescript classes make inheritance much easier to write and understand. In this lesson we look into ...

  3. Typescript 查缺补漏

    Types Casting: let input = xxx as HTMLInputElement; let input = <HTMLElement>xxxx; Object Shap ...

  4. JavaScript是如何工作的:深入类和继承内部原理 + Babel和TypeScript 之间转换

    这是专门探索 JavaScript 及其所构建的组件的系列文章的第 15 篇. 如果你错过了前面的章节,可以在这里找到它们: JavaScript 是如何工作的:引擎,运行时和调用堆栈的概述! Jav ...

  5. Angular基础(三) TypeScript

    一.模仿Reddit a) 运行ng new –ng4angular-reddit创建应用,从随书代码中复制样式文件,新建组件app-root,代码为: 界面可以看到了: b) 对于界面输入的数据,获 ...

  6. typescript枚举,类型推论,类型兼容性,高级类型,Symbols(学习笔记非干货)

    枚举部分 Enumeration part 使用枚举我们可以定义一些有名字的数字常量. 枚举通过 enum关键字来定义. Using enumerations, we can define some ...

  7. typescript类(学习笔记非干货)

    我们声明一个 Greeter类.这个类有3个成员:一个叫做greeting的属性,一个构造函数和一个greet方法. We declare a Greeter class. This class ha ...

  8. typescript接口(学习笔记非干货)

    typescript的核心原则之一就是对所具有的shape类型检查结构性子类型化 One of the core principles of typescript is to check struct ...

  9. [TypeScript] Create a fluent API using TypeScript classes

    You can create an easy to chain API using TypeScript classes. Learn about the thisreturn type annota ...

随机推荐

  1. 简单高效读写修改整个文本Slurp

    语法: use File::Slurp; #标量环境下一次读取所有文本内容到标量中. my $text = read_file( 'filename' ) ; #  读取文本的所有行到数组中. my ...

  2. ios开发之代理&&协议

    Object-C是不支持多继承的,所以很多时候都是用Protocol(协议)来代替.Protocol(协议)只能定义公用的一套接口,但不能提供具体的实现方法.也就是说,它只告诉你要做什么,但具体怎么做 ...

  3. Dev gridview 调整字体大小

    //调整表头字体大小 this.gridView1.Appearance.HeaderPanel.Font = new Font("Tahoma", 20, FontStyle.R ...

  4. PhotoSwipe.js 相册展示插件学习

    PhotoSwipe.js官网:http://photoswipe.com/,在这个网站上可以下载到PhotoSwipe的文件以及相关的例子. 这个组件主要是用来展示图片.相册用的,还是很实用的. 一 ...

  5. Python元组、列表、字典

    ```python>>> help(tuple) Help on class tuple in module __builtin__: class tuple(object) │ t ...

  6. HTML DOM(一):认识DOM

     分类: HTML/JavaScript/CSS(10)  版权声明:本文为博主原创文章,转载请注明出处http://blog.csdn.net/ghsau. 什么是DOM?       通过 Jav ...

  7. 转:PHP性能优化大全

    原文来自于:http://www.open-open.com/lib/view/open1370769825070.html PHP优化对于PHP的优化主要是对php.ini中的相关主要参数进行合理调 ...

  8. 转:如何找出发生SEGV内存错误的程序

    原文来自于:http://www.searchtb.com/2014/03/%E5%A6%82%E4%BD%95%E6%89%BE%E5%87%BA%E5%8F%91%E7%94%9Fsegv%E5% ...

  9. 转:Ubuntu12.04 LTS 使用心得-开机挂载其他分区

    1.在/media目录下创建好用来关联你要挂载的分区的文件夹(相当于一个虚拟目录/挂载点,链接/映射到你要挂载的盘符去) 我要挂载4个分区,所以创建了四个挂载点,名字随便取,只要你自己认的出来哪个对应 ...

  10. check sql server edition (version 版本)

    SELECT @@VERSION refer : https://www.mssqltips.com/sqlservertip/1140/how-to-tell-what-sql-server-ver ...