TypeScript 是否支持所有面向对象原则?


在编程世界中,面向对象原则为设计和构建软件系统提供了坚实的基础。面向对象编程 (OOP) 语言使开发人员能够将现实世界中的实体建模为对象,封装数据和行为,并在对象之间建立关系。TypeScript 作为 JavaScript 的超集,为该语言引入了静态类型,并提供了许多支持面向对象编程的功能。在本教程中,我们将探讨各种场景,以了解 TypeScript 与面向对象编程的核心原则的契合程度。

封装

封装是指将数据和方法捆绑到一个单元(称为类)中,并隐藏内部实现细节。TypeScript 通过类和访问修饰符完全支持封装。

在下面的示例中,Car 类有两个属性(品牌和年份),并用访问修饰符标记。private 修饰符限制了对类内品牌的访问,而 protected 修饰符允许子类访问年份属性。startEngine 方法定义为 public,使其可以从类外部访问。并且我们创建了一个 Car 类的实例并调用了 startEngine 方法。

class Car {
   private brand: string;
   protected year: number;    
   constructor(brand: string, year: number) {
      this.brand = brand;
      this.year = year;
   }    
   public startEngine() {
      console.log(`Starting the ${this.brand} engine...`);
   }
}
const myCar = new Car("Tesla", 2023);
myCar.startEngine();

编译后,上述代码将生成以下 JavaScript 代码:

var Car = /** @class */ (function () {
   function Car(brand, year) {
      this.brand = brand;
      this.year = year;
   }
   Car.prototype.startEngine = function () {
      console.log("Starting the ".concat(this.brand, " engine..."));
   };
   return Car;
}());
var myCar = new Car("Tesla", 2023);
myCar.startEngine();

输出

Starting the Tesla engine...

在此示例中,我们将品牌和年份信息封装在 Car 类中,并公开 startEngine 方法以供外部使用。封装原则确保类的内部细节对外部世界隐藏,从而促进模块化和可维护的代码。

继承

继承是面向对象编程中的一个基本概念,它允许一个类继承另一个类的属性和方法。TypeScript 为继承提供了强大的支持,使开发人员能够在类之间构建层次结构关系。

在此示例中,Dog 类使用 extends 关键字扩展了 Animal 类。因此,Dog 类继承了 Animal 的 name 属性,并定义了自己的 bark 方法。并且我们创建了一个 Dog 类的实例并调用了 move 和 bark 方法。

class Animal {
   protected name: string;    
   constructor(name: string) {
      this.name = name;
   }    
   public move() {
      console.log(`${this.name} is moving...`);
   }
}
class Dog extends Animal {
   public bark() {
      console.log(`${this.name} is barking...`);
   }
}
const myDog = new Dog("Jimmy");
myDog.move();
myDog.bark();

编译后,上述代码将生成 JavaScript 代码。

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 __());
   };
})();
var Animal = /** @class */ (function () {
   function Animal(name) {
      this.name = name;
   }
   Animal.prototype.move = function () {
      console.log("".concat(this.name, " is moving..."));
   };
   return Animal;
}());
var Dog = /** @class */ (function (_super) {
   __extends(Dog, _super);
   function Dog() {
      return _super !== null && _super.apply(this, arguments) || this;
   }
   Dog.prototype.bark = function () {
      console.log("".concat(this.name, " is barking..."));
   };
   return Dog;
}(Animal));
var myDog = new Dog("Jimmy");
myDog.move();
myDog.bark();

输出

编译后,上述代码将生成 JavaScript 代码。JavaScript 代码将产生以下结果:

Jummy is moving…
Jimmy is barking…

TypeScript 中的继承功能允许我们创建类层次结构,促进代码重用并能够以结构化的方式组织相关类。

多态

多态是指对象能够采用多种形式或根据上下文以不同方式运行的能力。TypeScript 通过方法覆盖和方法重载支持多态。

方法覆盖

方法覆盖允许子类覆盖在其超类中定义的方法。以下是一个演示方法覆盖的示例。在此示例中,我们有一个抽象类 Shape,它定义了一个抽象方法 calculateArea()。Circle 和 Rectangle 类扩展 Shape 并提供其 calculateArea() 方法的实现。并且我们创建了 Circle 和 Rectangle 类的实例并计算了它们各自的面积。

abstract class Shape {
   protected color: string;    
   constructor(color: string) {
      this.color = color;
   }    
   public abstract calculateArea(): number;
}
class Circle extends Shape {
   private radius: number;    
   constructor(color: string, radius: number) {
      super(color);
      this.radius = radius;
   }    
   public calculateArea(): number {
      return Math.PI * this.radius * this.radius;
   }
}
class Rectangle extends Shape {
   private width: number;
   private height: number;    
   constructor(color: string, width: number, height: number) {
      super(color);
      this.width = width;
      this.height = height;
   }    
   public calculateArea(): number {
       return this.width * this.height;
   }
}
const myCircle = new Circle("red", 5);
const myRectangle = new Rectangle("blue", 4, 6);
console.log(myCircle.calculateArea()); 
console.log(myRectangle.calculateArea());

编译后,上述代码将生成 JavaScript 代码。

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 __());
   };
})();
var Shape = /** @class */ (function () {
   function Shape(color) {
      this.color = color;
   }
   return Shape;
}());
var Circle = /** @class */ (function (_super) {
   __extends(Circle, _super);
   function Circle(color, radius) {
      var _this = _super.call(this, color) || this;
      _this.radius = radius;
      return _this;
   }
   Circle.prototype.calculateArea = function () {
      return Math.PI * this.radius * this.radius;
   };
   return Circle;
}(Shape));
var Rectangle = /** @class */ (function (_super) {
   __extends(Rectangle, _super);
   function Rectangle(color, width, height) {
      var _this = _super.call(this, color) || this;
      _this.width = width;
      _this.height = height;
      return _this;
   }
   Rectangle.prototype.calculateArea = function () {
      return this.width * this.height;
   };
   return Rectangle;
}(Shape));
var myCircle = new Circle("red", 5);
var myRectangle = new Rectangle("blue", 4, 6);
console.log(myCircle.calculateArea());
console.log(myRectangle.calculateArea());

输出

编译后,上述代码将生成 JavaScript 代码。JavaScript 代码将产生以下结果:

78.53981633974483
24

在此示例中,Circle 和 Rectangle 类都继承了抽象 Shape 类的 calculateArea() 方法。但是,每个子类都以不同的方式实现该方法,以根据其特定形状计算面积。这展示了多态性,其中不同类的对象可以被视为公共超类的实例,并表现出不同的行为。

方法重载

另一方面,方法重载使我们能够定义多个具有相同名称但参数不同的方法。TypeScript 根据传递的参数数量或类型确定要调用的适当方法。

在下面的代码片段中,我们有一个 Calculator 类,它定义了两个 add 方法——一个用于添加数字,另一个用于连接字符串。并且我们创建了一个 Calculator 类的实例并调用了两个 add 方法。

class Calculator {
   public add(a: string, b: string): string;
   public add(a: number, b: number): number;

   public add(a: any, b: any): any {
      return a + b;
   }
}

const myCalculator = new Calculator();
const sum = myCalculator.add(3, 5);
const concatenated = myCalculator.add("Hello, ", "TypeScript!");

console.log(sum);
console.log(concatenated);

编译后,上述代码将生成以下 JavaScript 代码。

var Calculator = /** @class */ (function () {
   function Calculator() {
   }
   Calculator.prototype.add = function (a, b) {
      return a + b;
   };
   return Calculator;
}());
var myCalculator = new Calculator();
var sum = myCalculator.add(3, 5);
var concatenated = myCalculator.add("Hello, ", "TypeScript!");
console.log(sum);
console.log(concatenated);

输出

它将产生以下结果:

8
Hello, TypeScript!

抽象

抽象允许我们定义对象的必要特征,同时隐藏实现细节。TypeScript 通过抽象类和方法支持抽象。抽象类充当其他类的蓝图,不能直接实例化。它可能包含派生类必须实现的抽象方法。

在此示例中,Shape 类被声明为抽象类,并且它定义了一个名为 draw 的抽象方法。Circle 类扩展 Shape 并为 draw 方法提供了一个实现。并且我们创建了一个 Circle 类的实例并调用了 draw 方法。

abstract class Shape {
   protected color: string;
    
   constructor(color: string) {
      this.color = color;
   }
    
   public abstract draw(): void;
}

class Circle extends Shape {
   private radius: number;
    
   constructor(color: string, radius: number) {
      super(color);
      this.radius = radius;
   }
    
   public draw() {
      console.log(`Drawing a ${this.color} circle with radius ${this.radius}`);
   }
}

const myCircle = new Circle("red", 5);
myCircle.draw();

编译后,上述代码将生成以下 JavaScript 代码。

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 __());
   };
})();
var Shape = /** @class */ (function () {
   function Shape(color) {
      this.color = color;
   }
   return Shape;
}());
var Circle = /** @class */ (function (_super) {
   __extends(Circle, _super);
   function Circle(color, radius) {
      var _this = _super.call(this, color) || this;
      _this.radius = radius;
      return _this;
   }
   Circle.prototype.draw = function () {
      console.log("Drawing a ".concat(this.color, " circle with radius ").concat(this.radius));
   };
   return Circle;
}(Shape));
var myCircle = new Circle("red", 5);
myCircle.draw();

输出

编译后,上述代码将生成 JavaScript 代码。JavaScript 代码将产生以下结果:

Drawing a red circle with radius 5

抽象类 Shape 提供了一个公共接口(draw),所有派生类都必须实现。这使我们能够定义通用行为并在不同的子类之间强制执行某些方法,促进抽象并确保应用程序结构的一致性。

结论

TypeScript 为面向对象编程原则提供了强大的支持,包括封装、继承、多态和抽象。通过利用类、访问修饰符、继承、方法覆盖、方法重载和抽象类,开发人员可以以更结构化和可维护的方式设计和实现面向对象系统。TypeScript 的静态类型功能进一步增强了面向对象代码库的可靠性和可扩展性。

更新于:2023年8月21日

353 次浏览

开启您的 职业生涯

通过完成课程获得认证

开始学习
广告