从编译后的 JavaScript 代码看 TypeScript 中的面向对象

2023-12-01 11:51:15

TypeScript 作为一种强大的 JavaScript 超集，凭借其强大的类型系统和面向对象特性，在前端开发领域备受推崇。TypeScript 可以将代码编译为标准的 JavaScript 代码，从而实现跨平台运行。本文将从编译后的 JavaScript 代码的角度，深入剖析 TypeScript 中的面向对象特性，帮助读者更好地理解 TypeScript 中的类、对象、继承、多态等概念，并掌握 TypeScript 中面向对象编程的精髓，从而提高 TypeScript 开发效率和代码质量。

1. TypeScript 中的类和对象

在 TypeScript 中，类是创建对象的蓝图，它定义了对象的属性和方法。类中的属性用于存储数据，而方法用于操作数据。对象是类的实例，它具有类的所有属性和方法。

// 定义一个类
class Person {
    // 属性
    name: string;
    age: number;

    // 方法
    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    greet() {
        console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
    }
}

// 创建一个对象
const person = new Person('John Doe', 30);

// 调用对象的方法
person.greet(); // 输出：Hello, my name is John Doe and I am 30 years old.

编译后的 JavaScript 代码如下：

// 类
var Person = /** @class */ (function () {
    function Person(name, age) {
        this.name = name;
        this.age = age;
    }
    Person.prototype.greet = function () {
        console.log("Hello, my name is " + this.name + " and I am " + this.age + " years old.");
    };
    return Person;
}());

// 对象
var person = new Person('John Doe', 30);

// 调用对象的方法
person.greet(); // 输出：Hello, my name is John Doe and I am 30 years old.

从编译后的 JavaScript 代码可以看出，TypeScript 中的类和对象在 JavaScript 中分别被编译成了函数和对象的实例。类中的属性和方法分别被编译成了对象的属性和方法。

2. TypeScript 中的继承

在 TypeScript 中，继承允许一个类继承另一个类的属性和方法。子类可以重写父类的方法，从而实现代码的复用和扩展。

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

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

    move() {
        console.log(`${this.name} is moving.`);
    }
}

// 定义一个子类
class Dog extends Animal {
    bark() {
        console.log(`${this.name} is barking.`);
    }
}

// 创建一个子类对象
const dog = new Dog('Buddy');

// 调用子类的方法
dog.move(); // 输出：Buddy is moving.
dog.bark(); // 输出：Buddy is barking.

编译后的 JavaScript 代码如下：

// 父类
var Animal = /** @class */ (function () {
    function Animal(name) {
        this.name = name;
    }
    Animal.prototype.move = function () {
        console.log(this.name + " is moving.");
    };
    return Animal;
}());

// 子类
var Dog = /** @class */ (function (_super) {
    __extends(Dog, _super);
    function Dog(name) {
        var _this = _super.call(this, name) || this;
        return _this;
    }
    Dog.prototype.bark = function () {
        console.log(this.name + " is barking.");
    };
    return Dog;
}(Animal));

// 子类对象
var dog = new Dog('Buddy');

// 调用子类的方法
dog.move(); // 输出：Buddy is moving.
dog.bark(); // 输出：Buddy is barking.

从编译后的 JavaScript 代码可以看出，TypeScript 中的继承在 JavaScript 中被编译成了原型链继承。子类继承了父类的属性和方法，并且子类可以重写父类的方法。

3. TypeScript 中的多态

在 TypeScript 中，多态性是指对象能够以不同的形式存在并具有不同的行为。多态性是面向对象编程的重要特性之一，它可以提高代码的灵活性。

// 定义一个接口
interface Shape {
    area(): number;
}

// 定义一个圆形类
class Circle implements Shape {
    radius: number;

    constructor(radius: number) {
        this.radius = radius;
    }

    area() {
        return Math.PI * this.radius ** 2;
    }
}

// 定义一个正方形类
class Square implements Shape {
    sideLength: number;

    constructor(sideLength: number) {
        this.sideLength = sideLength;
    }

    area() {
        return this.sideLength ** 2;
    }
}

// 定义一个函数来计算形状的面积
function calculateArea(shape: Shape) {
    return shape.area();
}

// 创建一个圆形对象
const circle = new Circle(5);

// 创建一个正方形对象
const square = new Square(10);

// 计算圆形和正方形的面积
const circleArea = calculateArea(circle); // 78.53981633974483
const squareArea = calculateArea(square); // 100

console.log(`The area of the circle is ${circleArea}.`);
console.log(`The area of the square is ${squareArea}.`);

编译后的 JavaScript 代码如下：

// 接口
var Shape = /** @class */ (function () {
    function Shape() {
    }
    return Shape;
}());

// 圆形类
var Circle = /** @class */ (function (_super) {
    __extends(Circle, _super);
    function Circle(radius) {
        var _this = _super.call(this) || this;
        _this.radius = radius;
        return _this;
    }
    Circle.prototype.area = function () {
        return Math.PI * Math.pow(this.radius, 2);
    };
    return Circle;
}(Shape));

// 正方形类
var Square = /** @class */ (function (_super) {
    __extends(Square, _super);
    function Square(sideLength) {
        var _this = _super.call(this) || this;
        _this.sideLength = sideLength;
        return _this;
    }
    Square.prototype.area = function () {
        return Math.pow(this.sideLength, 2);
    };
    return Square;
}(Shape));

// 计算形状面积的函数
function calculateArea(shape) {
    return shape.area();
}

// 创建一个圆形对象
var circle = new Circle(5);

// 创建一个正方形对象
var square = new Square(10);

// 计算圆形和正方形的面积
var circleArea = calculateArea(circle); // 78.53981633974483
var squareArea = calculateArea(square); // 100

console.log("The area of the circle is " + circleArea + ".");
console.log("The area of the square is " + squareArea + ".");