一步一步学习TypeScript(14.Classes & inheritance_类与继承)

最新推荐文章于 2025-05-21 12:59:19 发布

原创最新推荐文章于 2025-05-21 12:59:19 发布 · 2.2k 阅读

0 ·

CC 4.0 BY-SA版权

TypeScript 专栏收录该内容

21 篇文章

订阅专栏

本文介绍了如何在 TypeScript 中利用类、继承和接口进行面向对象编程，通过实例展示了如何定义类、继承现有类并实现多态，以及如何进行强制类型转换。同时探讨了在不同类间赋值时的注意事项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

有过面向对象开发的同学应该对类,继承,接口的概念不会陌生,现在我们同样可以在TypeScript中使用这些概念,来清晰我们的代码结构.

classes

使用class关键字定义一个类, constructor定义这个类的构造函数. 使用this为成员变量赋值.例如我们定义一个汽车类:

class Auto{
    engine: string;

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

    start(){}
}

inheritance

现在我们有了一个汽车类,但汽车分好多种,轿车,SUV,跑车等.现在我们继承Auto类,编写一个SUV类.

class SUV extends Auto{
    engine: string;

    constructor(engine:string){
        super(engine);
    }

    start(){
        console.log(this.engine+" started!")
    }
}

首先,必需使用super关键字调用父类的构造函数,之后我们为SUV类重写start方法.可以使引擎工作.

var suv = new SUV('V8'); //这台suv有一个8缸发动机
suv.start();

几点注意:

1.多态

var su1:Auto = new SUV('V6');  //su1指向原对象
su1.start();  //这里调用的是Auto的start方法,还是SUV的?

2.强制类型转换

class SuperCar extends Auto{

    //public engine:string 的意思为 this.engine = engine;
    constructor(public engine:string){
        super(engine);
    }

    start(){
        console.log(this.engine+' started!')
    }

    speed(s:number = 300){
        console.log('speed '+s+'km feels like flying!')
    }
}

var superCar = new SuperCar('v12');

var auto = new Auto('v4');
suv = auto; //正确, SUV类与Auto类具有相同的属性及方法,可以互相赋值,不需要强制类型转换
auto = suv; //同上

superCar = auto; //错误, 因为Auto类中没有实现SuperCar中的speed方法
superCar = auto as SuperCar; //正确, 可以使用强制类型转换.
superCar = <SuperCar> auto;  //也可以使用这种强制类型转换.

3.想一下为什么是’undefined’

class Aa
{
    constructor()
    {
        this.MyvirtualMethod();
    }

    protected MyvirtualMethod(): void
    {
           console.log("A")
    }
}

class Bb extends Aa
{
    private testString: string = "B";

    public MyvirtualMethod(): void
    {
        console.log(this.testString); 
    }
}

var b = new Bb(); //为什么打印出的是 undefined
b.MyvirtualMethod(); //这里为什么又有值了