TypeScript 类第一章【类，继承，修饰符】

最新推荐文章于 2024-05-20 15:17:08 发布

鋜斗

最新推荐文章于 2024-05-20 15:17:08 发布

阅读量46

点赞数

分类专栏： typescript 前端文章标签： typescript javascript 前端

本文链接：https://blog.csdn.net/weixin_68537796/article/details/134758128

版权

前端同时被 2 个专栏收录

88 篇文章 2 订阅

订阅专栏

typescript

16 篇文章 0 订阅

订阅专栏

文章目录

前言
类
继承
公共，私有与受保护的修饰符
后言

前言

hello world欢迎来到前端的新世界

😜当前文章系列专栏：Typescript
🐱‍👓博主在前端领域还有很多知识和技术需要掌握，正在不断努力填补技术短板。(如果出现错误，感谢大家指出)🌹
💖感谢大家支持！您的观看就是作者创作的动力

传统的JavaScript的程序使用函数和基于原型的继承来创建可重用的组件，但对于熟悉使用面向对象方式的程序员来讲就有些棘手，因为他们用的是基于类的继承并且对象是由类构建出来从ECMAScript 2015，也就是ECMAScript 6开始，JavaScript程序员将能够使用基于类的面向对象的方式。使用TypeScript，我们允许开发者现在就使用这些特性，并且编译后的JavaScript可以在所有主流浏览器和平台上运行，而不需要等到下个JavaScript的版本。

类

下面看一个使用类的例子：

class Greeter {<font></font>
    greeting: string;
    constructor(message: string) {
        this.greeting = message;<font></font>
    }<font></font>
    greet() {<font></font>
        return "Hello, " + this.greeting;<font></font>
    }<font></font>
}<font></font>
<font></font>
let greeter = new Greeter("world");

如果你使用过C＃或Java，你会对这种语法非常熟悉。我们声明一个 Greeter类。这个类有3个成员：一个叫做greeting的属性，一个构造函数和一个greet方法。

你会注意到，我们在引用任何一个类成员的时候都用了this。它表示我们访问的是类的成员。

最后一行，我们使用new构造了Greeter类的一个实例。它会调用之前定义的构造函数，创建一个 Greeter类型的新对象，并执行构造函数初始化它。

继承

在TypeScript里，我们可以使用常用的面向对象模式。当然，基于类的程序设计中最基本的模式是允许使用继承来扩展现有的类。

看下面的例子：

class Animal {<font></font>
    name:string;
    constructor(theName: string) { this.name = theName; }<font></font>
    move(distanceInMeters: number = 0) {
        console.log(`${this.name} moved ${distanceInMeters}m.`);<font></font>
    }<font></font>
}<font></font>
<font></font>
class Snake extends Animal {
    constructor(name: string) { super(name); }<font></font>
    move(distanceInMeters = 5) {
        console.log("Slithering...");
        super.move(distanceInMeters);<font></font>
    }<font></font>
}<font></font>
<font></font>
class Horse extends Animal {
    constructor(name: string) { super(name); }<font></font>
    move(distanceInMeters = 45) {
        console.log("Galloping...");
        super.move(distanceInMeters);<font></font>
    }<font></font>
}<font></font>
<font></font>
let sam = new Snake("Sammy the Python");
let tom: Animal = new Horse("Tommy the Palomino");<font></font>
<font></font>
sam.move();<font></font>
tom.move(34);

这个例子展示了TypeScript中继承的一些特征，它们与其它语言类似。我们使用 extends关键字来创建子类。你可以看到Horse和Snake类是基类Animal的子类，并且可以访问其属性和方法。

包含构造函数的派生类必须调用super()，它会执行基类的构造方法。

这个例子演示了如何在子类里可以重写父类的方法。 Snake类和Horse类都创建了move方法，它们重写了从Animal继承来的move方法，使得move方法根据不同的类而具有不同的功能。注意，即使 tom被声明为Animal类型，但因为它的值是Horse，tom.move(34)会调用Horse里的重写方法：

Slithering...
Sammy the Python moved 5m.
Galloping...
Tommy the Palomino moved 34m.

公共，私有与受保护的修饰符

默认为public

在上面的例子里，我们可以自由的访问程序里定义的成员。如果你对其它语言中的类比较了解，就会注意到我们在之前的代码里并没有使用 public来做修饰；例如，C#要求必须明确地使用public指定成员是可见的。在TypeScript里，成员都默认为 public。

你也可以明确的将一个成员标记成public。我们可以用下面的方式来重写上面的 Animal类：

class Animal {
    public name: string;
    public constructor(theName: string) { this.name = theName; }
    public move(distanceInMeters: number) {
        console.log(`${this.name} moved ${distanceInMeters}m.`);<font></font>
    }<font></font>
}<font></font>

理解private

当成员被标记成private时，它就不能在声明它的类的外部访问。比如：

class Animal {
    private name: string;
    constructor(theName: string) { this.name = theName; }
}

new Animal("Cat").name; // Error: 'name' is private;

TypeScript使用的是结构性类型系统。当我们比较两种不同的类型时，并不在乎它们从何处而来，如果所有成员的类型都是兼容的，我们就认为它们的类型是兼容的。

然而，当我们比较带有private或protected成员的类型的时候，情况就不同了。如果其中一个类型里包含一个 private成员，那么只有当另外一个类型中也存在这样一个private成员，并且它们都是来自同一处声明时，我们才认为这两个类型是兼容的。对于 protected成员也使用这个规则。

下面来看一个例子，更好地说明了这一点：

class Animal {
    private name: string;
    constructor(theName: string) { this.name = theName; }<font></font>
}<font></font>
<font></font>
class Rhino extends Animal {
    constructor() { super("Rhino"); }<font></font>
}<font></font>
<font></font>
class Employee {
    private name: string;
    constructor(theName: string) { this.name = theName; }<font></font>
}<font></font>
<font></font>
let animal = new Animal("Goat");
let rhino = new Rhino();
let employee = new Employee("Bob");<font></font>
<font></font>
animal = rhino;<font></font>
animal = employee; // Error: Animal and Employee are not compatible

这个例子中有Animal和Rhino两个类，Rhino是Animal类的子类。还有一个 Employee类，其类型看上去与Animal是相同的。我们创建了几个这些类的实例，并相互赋值来看看会发生什么。因为 Animal和Rhino共享了来自Animal里的私有成员定义private name: string，因此它们是兼容的。然而 Employee却不是这样。当把Employee赋值给Animal的时候，得到一个错误，说它们的类型不兼容。尽管 Employee里也有一个私有成员name，但它明显不是Animal里面定义的那个。

理解protected

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

class Person {
    protected name: string;
    constructor(name: string) { this.name = name; }<font></font>
}<font></font>
<font></font>
class Employee extends Person {
    private department: string;<font></font>
<font></font>
    constructor(name: string, department: string) {
        super(name)
        this.department = department;<font></font>
    }<font></font>
<font></font>
    public getElevatorPitch() {
        return `Hello, my name is ${this.name} and I work in ${this.department}.`;<font></font>
    }<font></font>
}<font></font>
<font></font>
let howard = new Employee("Howard", "Sales");
console.log(howard.getElevatorPitch());
console.log(howard.name); // error

注意，我们不能在Person类外使用name，但是我们仍然可以通过Employee类的实例方法访问，因为Employee是由Person派生而来的。

构造函数也可以被标记成protected。这意味着这个类不能在包含它的类外被实例化，但是能被继承。比如，

class Person {
    protected name: string;
    protected constructor(theName: string) { this.name = theName; }<font></font>
}<font></font>
<font></font>
// Employee can extend Person
class Employee extends Person {
    private department: string;<font></font>
<font></font>
    constructor(name: string, department: string) {
        super(name);
        this.department = department;<font></font>
    }<font></font>
<font></font>
    public getElevatorPitch() {
        return `Hello, my name is ${this.name} and I work in ${this.department}.`;<font></font>
    }<font></font>
}<font></font>
<font></font>
let howard = new Employee("Howard", "Sales");
let john = new Person("John"); // Error: The 'Person' constructor is protected

readonly修饰符

你可以使用readonly关键字将属性设置为只读的。只读属性必须在声明时或构造函数里被初始化。

class Octopus {<font></font>
    readonly name: string;<font></font>
    readonly numberOfLegs: number = 8;
    constructor (theName: string) {
        this.name = theName;<font></font>
    }<font></font>
}<font></font>
let dad = new Octopus("Man with the 8 strong legs");<font></font>
dad.name = "Man with the 3-piece suit"; // error! name is readonly.