Vue3+TypeScript从入门到精通系列之：类多态

一、TypeScript类多态代码

(() => {
//多态：父类型的引用指向了子类型的对象，不同类型的对象针对相同的方法，产生了不同的行为

//定义一个父类
class Animal {
  name: string

  constructor(name: string){
    this.name = name
  }

  //实例方法
  run(fruit: string = "苹果"){
    console.log(this.name,'喜欢吃',fruit)
  }
}


//定义一个子类
class Dog extends Animal{
//构造函数
constructor(name: string){
//调用父类的构造函数，实现子类中属性的初始化操作
super(name)
}

//实例方法，重写父类中的实例方法
run(fruit: string = "香蕉"){
  console.log(this.name,'喜欢吃',fruit)
}
}

//实例化父类对象
const ani:Animal = new Animal("所有动物")
ani.run()

const dog: Dog = new Dog("小狗")
dog.run()

const dog1:Animal = new Dog('小黄')
dog1.run()

})()

二、TypeScript的类多态转化为JS代码

 tsc ./类多态.ts

var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
        return extendStatics(d, b);
    };
    return function (d, b) {
        if (typeof b !== "function" && b !== null)
            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
(function () {
    //定义一个父类
    var Animal = /** @class */ (function () {
        function Animal(name) {
            this.name = name;
        }
        //实例方法
        Animal.prototype.run = function (fruit) {
            if (fruit === void 0) { fruit = "苹果"; }
            console.log(this.name, '喜欢吃', fruit);
        };
        return Animal;
    }());
    //定义一个子类
    var Dog = /** @class */ (function (_super) {
        __extends(Dog, _super);
        //构造函数
        function Dog(name) {
            //调用父类的构造函数，实现子类中属性的初始化操作
            return _super.call(this, name) || this;
        }
        //实例方法，重写父类中的实例方法
        Dog.prototype.run = function (fruit) {
            if (fruit === void 0) { fruit = "香蕉"; }
            console.log(this.name, '喜欢吃', fruit);
        };
        return Dog;
    }(Animal));
    //实例化父类对象
    var ani = new Animal("所有动物");
    ani.run();
    var dog = new Dog("小狗");
    dog.run();
    var dog1 = new Dog('小黄');
    dog1.run();
})();

三、查看js输出

 node ./类多态.js
所有动物 喜欢吃 苹果
小狗 喜欢吃 香蕉
小黄 喜欢吃 香蕉