TypeScript入门-类

longmon 发布于2019-08-20 15:34 / 1784人阅读

摘要：可以使用关键字来定义类的静态属性，示例代码如下输出输出抽象类有抽象类的概念，他是供其他类继承的基类，不能直接实例化。抽象类必须包含一些抽象方法，同时也可以包含非抽象的成员。

学习Angular 2 ，《揭秘Angular 2》读书笔记。Angular2 选择 TypeScript 作为其官方最主要的构建语音，这意味着掌握 TypeScript 语音将更有利于高效地开发 Angular 应用。

类

传统的 JavaScript 程序是使用函数和基于原型（Prototype）继承来创建可重用的“类”，这对于习惯面向对象编程的开发者来说并不友好。TypeScript 中可以支持使用基于类的面向对象编程。

类的例子

示例代码如下：

class Car {
    engine: string;
    constructor(engine: string) {
        this.engine = engine;
    }
    drive(distanceInMeters: number = 0) {
        console.log(`A car runs ${ distanceInMeters }m powered by` + this.engine);
    }
}

上面声明了一个汽车类，这个类有三个类成员：

类属性 engine，可通过 this.engine 访问

构造函数 constructor

方法 drive

下面实例化一个Car的对象，通过执行构造函数对其初始化。

let car = new Car("petrol");
car.drive(100); // 输出：A car runs 100m powered by petrol

继承与多态

封装、继承、多态是面向对象的三个特性。上面的例子中把汽车的行为写到一个类中，即所谓的封装。在 TypeScript 中，使用 extends 关键字即可方便地实现继承。示例代码如下：

// 继承自前文的 Car 类
class MotoCar extends Car {
    constructor(engine: string) { super(engine); }
}

class Jeep extends Car {
    constructor(engine: string) { super(engine); }
    drive(distanceInMeters: number = 100) {
        console.log("Jeep...")
        retrun super.drive(distanceInMeters);
    }
}

let tesla = new MotoCar("electricity");
let landRover: Car = new Jeep("petrol");

tesla.drive();    // 调用父类的 drive() 方法
landRover.drive(200);    // 调用子类的 drive() 方法

从上面的例子可以看到，MotoCar 和 Jeep 是基类Car的子类，通过 extends 来继承父类，子类可以访问父类的属性和方法，也可以重写父类的方法。Jeep 类重写了父类的 drive() 方法，这样 drive() 方法在不同的类中就具有不同的功能，这就是多态。

修饰符

在类中的修饰器可以分为公共（public）、私有（private）和受保护（protected）三种类型。

public 修饰符
在 TypeScript 里，每个成员默认为 public，可以被自由访问，我们也可以显式地给 Car 类里定义的成员加上 public 修饰符，示例代码如下：

class Car {
    public engine: string;
    public constructor(engine: string) {
        this.engine = engine;
    }
    public drive(distanceInMeters: number = 0) {
        console.log(`A car runs ${ distanceInMeters }m powered by` + this.engine);
    }
}

private 修饰符
当类成员被标记为 private 时，就不能在类的外部访问它，示例代码如下：

class Car {
    private engine: string;
    constructor(engine: string) {
        this.engine = engine;
    }
}

new Car("petrol").engine;    // 报错：engine 属性是私有的，只能在类内部访问

protected 修饰符
protected 修饰符与 private 修饰符的行为很相似，但有一点不同，protected 成员在派生类中仍然可以访问，示例代码如下：

class Car {
    private engine: string;
    constructor(engine: string) {
        this.engine = engine;
    }
    drive(distanceInMeters: number = 0) {
        console.log(`A car runs ${ distanceInMeters }m powered by` + this.engine);
    }
}
class MotoCar extends Car {
    constructor(engine: string) { super(engine); }
    drive(distanceInMeters: number = 100) {
        super.drive(distanceInMeters);
    }
}
let tesla = new MotoCar("electricity");
console.log(tesla.drive());    // 正常
console.log(tesla.engine);    // 报错

静态属性

类的静态成员存在于类本身而不是类的实例上，我们使用类名. 来访问静态属性。可以使用 static 关键字来定义类的静态属性，示例代码如下：

class Grid {
    static origin = {x: 0, y: 0};
    constructor(public scale: number) {}
    calculateDistanceFromOrigin(point: {x: number; y: number;}) {
        let xDist = (point.x - Grid.origin.x);
        let yDist = (point.y - Grid.origin.y);
        return Math.sqrt(xDist * xDist + yDist * yDist) / this.scale;
    }
}
let grid1  = new Grid(1.0);

let grid2  = new Grid(5.0);

// 输出：14.142...
console.log(grid1.calculateDistanceFromOrigin({x: 10, y: 10}));
// 输出：2.828...
console.log(grid2.calculateDistanceFromOrigin({x: 10, y: 10}));

抽象类

TypeScript 有抽象类的概念，他是供其他类继承的基类，不能直接实例化。抽象类必须包含一些抽象方法，同时也可以包含非抽象的成员。abstract 关键字用于定义抽象类和抽象方法。抽象类中的抽象方法不包含具体实现，但是必须在派生类中实现，示例代码如下:

abstract class Person {
    abstract speak(): void;    // 必须在派生类中实现
    walking(): void {
        console.log("Walking on the road");
    }
}

class Male extends Person {
    speak(): void {
        console.log("How are you?");
    }
}

let person: Person;    // 创建一个抽象类的引用
person = new Person();    // 报错，不能创建抽象类实例
person = new Male();    // 创建一个 Male 实例
person.speak();
person.walking();

GPU云服务器云服务器 TypeScript typescript javascript typescript-ionic2 分页类异常类

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82342.html

TypeScript入门教程

摘要：现在，出现了更多本身支持或者通过插件支持语法智能提示纠错甚至是内置编译器的文本编辑器和。 TypeScript是什么 TypeScript是JavaScript的一个超集 TypeScript需要编译为JavaScript才能运行（语法糖） TypeScript提供了类型系统，规范类似Java TypeScript提供了ES6的支持，也可以支持部分ES7草案的特性，不用担心TypeS...

Dr_Noooo 2019-08-26 11:52 评论0 收藏0
TypeScript入门-接口

摘要：接口类型检查不会去检查属性顺序，但是属性的必须存在且类型匹配。函数的返回值函数的返回值类型必须与接口定义的返回值保持一致。示例代码如下张三李四张三输出张三输出张三索引签名支持字符串和数字两种数据类型。学习Angular 2 ，《揭秘Angular 2》读书笔记。Angular2 选择 TypeScript 作为其官方最主要的构建语音，这意味着掌握 TypeScript 语音将更有利...

sewerganger 2019-08-21 15:32 评论0 收藏0
TypeScript入门学习之路

摘要：学习之路学习之路安装环境起步开发工具自动编译文件中的数据类型中的函数中类的定义继承中的继承中的继承类的静态属性和静态方法类的多态的抽象类中的接口中的泛型学习之路安装环境查看版本起步新建通过命令编译此时路径下 ...

jemygraw 2021-11-22 09:34 评论0 收藏0
TypeScript快速入门

摘要：添加了可选的静态类型注意并不是强类型和基于类的面向对象编程。类类型接口示例接口更注重功能的设计，抽象类更注重结构内容的体现模块中引入了模块的概念，在中也支持模块的使用。一：Typescript简介维基百科： TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个严格超集，并添加了可选的静态类型和基于类的面向对象编程。C#的首席架构师以及Delp...

moven_j 2019-08-22 11:11 评论0 收藏0
TypeScript极速完全入门-3ts结合react进行项目开发

摘要：前面我们已经说了大部分的核心内容，接下来我们就说说如何用开发实际项目。因为和结合很紧密，资料也很多，而且我会找机会专门说下这方面的知识，所以我们将重点放到如何用结合上来。所以前面打牢基础，现在我们开始实际组建工作流。前面我们已经说了大部分typescript的核心内容，接下来我们就说说如何用typescript开发实际项目。因为angular和typescript结合很紧密，资料也...

arashicage 2019-08-22 16:45 评论0 收藏0