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. tr命令的使用

    tr是translate的简写,亦即翻译,但是遗憾的是,它不能翻译句子,只能翻译单个字符. 1 tr的工作原理是什么? 先记住一点,tr命令不接受指定的文件参数,而只是对标准输入进行翻译.好了,记住这 ...

  2. [HttpClient]传递参数

    package com.jerry.httpclient; import java.io.UnsupportedEncodingException; import java.util.ArrayLis ...

  3. php中文字符串反转

    <?php header("content-type:text/html;charset=utf-8"); /** 此函数的作用是反转中文字符串 mb_strlen() 获取 ...

  4. C#应用程序获取项目路径的方法总结

    一.非Web程序   //基目录,由程序集冲突解决程序用来探测程序集 1.AppDomain.CurrentDomain.BaseDirectory     //当前工作目录的完全限定路径2.Envi ...

  5. 再次深入理解delphi的类

    property WindowState: TWindowState read FWindowState write SetWindowState; {声明一个属性WindowState,它从字段FW ...

  6. 利用Python读取Matlab的Mat文件内容

    手头有别人写的Matlab程序,其中用到了Mat文件.现在不想安装Matlab,却又想读取Mat文件内容,该怎么办呢? 感谢scipy!!! import scipy.io data = scipy. ...

  7. 最简单理解CGI,FastCGI,WSGI

    CGI规定了如何执行本地脚本技术规范(协议),FastCGI规定了如何远程请求执行脚本的技术规范,WSGI规定了如何请求执行Python脚本的规范. 他们的相同点就是envionment variab ...

  8. 转:[译]Autoprefixer:一个以最好的方式处理浏览器前缀的后处理程序

    原文来自于:http://www.cnblogs.com/aNd1coder/archive/2013/08/12/3252690.html Autoprefixer解析CSS文件并且添加浏览器前缀到 ...

  9. [BZOJ 2821] 作诗(Poetize) 【分块】

    题目链接:BZOJ - 2821 题目分析 因为强制在线了,所以无法用莫队..可以使用分块来做. 做法是,将 n 个数分成 n/x 个块,每个块大小为 x .先预处理出 f[i][j] ,表示从第 i ...

  10. HTML/W3C-WHATWG-Differences

    Differences between the W3C HTML 5.1 specification and the WHATWG LS The W3C HTML 5.1 specification: ...