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. Linux下ln链接命令详解

    ln是linux中又一个非常重要命令,它的功能是为某一个文件在另外一个位置建立一个不同的链接,这个命令最常用的参数是-s,具体用法是:ln –s 源文件 目标文件. 当我们需要在不同的目录,用到相同的 ...

  2. spring mvc easyui tree 异步加载树

    使用spring mvc 注解 异步加载一棵树 jsp: <ul id="orgInfoTree"></ul> $(function(){ loadOrgT ...

  3. input file文件上传样式

    <style>    .file-group {        position: relative;        width: 200px;        height: 80px;  ...

  4. 分页插件jquery.simplePagination.js使用

    利用ecshop后台,利用插件更改分页显示样式遇到的问题,由于是利用Ajax获取数据进行页面数据更新?所以出现了以下情况: 初始化页面前 : 分页更新后: 点击后出现了分页插件内容消失, 原因:分页一 ...

  5. JQuery树形目录制作

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DT ...

  6. python读写Excel文件的函数--使用xlrd/xlwt

    python中读取Excel的模块或者说工具有很多,如以下几种: Packages 文档下载 说明 openpyxl Download | Documentation | Bitbucket  The ...

  7. C程序设计语言练习题1-16

    练习1-16 修改打印最长文本行的程序的主程序main,使之可以打印任意长度的输入行的长度,并尽可能多地打印文本. 代码如下: #include <stdio.h> // 包含标准库的信息 ...

  8. iOS触摸事件处理

    iOS触摸事件处理   主要是记录下iOS的界面触摸事件处理机制,然后用一个实例来说明下应用场景. 一.处理机制 界面响应消息机制分两块, (1)首先在视图的层次结构里找到能响应消息的那个视图. (2 ...

  9. VLAN间通信----实验

        方法1.增加物理线路     需求:PC0连接SW的F0/1,PC1连接SW的F0/2; SW创建VLAN10,VLAN20; PC0划到VLAN10; PC1划到VLAN20; 现要求借用路 ...

  10. BZOJ 1501 智慧珠游戏

    Description Input 文件中包含初始的盘件描述,一共有10行,第i行有i个字符.如果第i行的第j个字符是字母”A”至”L”中的一个,则表示第i行第j列的格子上已经放了零件,零件的编号为对 ...