TypeScript 支援的面向物件術語


面向物件程式設計 (OOP) 是一種流行的程式設計正規化,已廣泛應用於軟體開發行業。OOP 基於物件的理念,物件是類的例項,封裝了資料和行為。TypeScript 是 JavaScript 的靜態型別超集,旨在支援大型應用程式的開發,它也是一種面向物件程式語言。在本文中,我們將探討 TypeScript 支援的面向物件術語。

下面我們將討論 TypeScript 支援的各種面向物件術語。

在 TypeScript 中,類是建立物件的藍圖,它定義了一組對該類所有例項都通用的屬性和方法。類使用class關鍵字宣告,後跟類名和包含類定義的一組花括號。

語法

在 TypeScript 中宣告類的語法如下:

class ClassName {
   // properties and methods
}

示例 1

這裡我們聲明瞭一個Car類,它包含make、modelyear屬性以及它們對應的 getter 和 setter 方法。

class Car {
   private make: string;
   private model: string;
   private year: number;  
   constructor(make: string, model: string, year: number) {
      this.make = make;
      this.model = model;
      this.year = year;
   }  
   public getMake(): string {
      return this.make;
   }  
   public setMake(make: string): void {
      this.make = make;
   }  
   public getModel(): string {
      return this.model;
   }  
   public setModel(model: string): void {
      this.model = model;
   }  
   public getYear(): number {
      return this.year;
   }  
   public setYear(year: number): void {
      this.year = year;
   }
}

物件

在 TypeScript 中,物件是類的例項,擁有自己的一組屬性和方法。物件使用new關鍵字建立,後跟類名和類建構函式所需的任何引數。

語法

建立類例項(物件)的語法:

let objectName = new ClassName(arguments);

示例 2

這將建立一個名為myCar的物件,其中 make: Toyota,model: Camry,year: 2022。

let myCar = new Car('Toyota', 'Camry', 2022);
console.log(myCar.getMake(), myCar.getModel(), myCar.getYear());

建構函式

在 TypeScript 中,建構函式是一種特殊的方法,在從類建立物件時呼叫。建構函式用於使用預設值初始化物件。建構函式方法使用constructor關鍵字宣告,後跟任何必要的引數。

語法

在 TypeScript 中編寫建構函式的語法:

class ClassName {
   constructor(arguments) {
      // initialization code
   }
}

示例 3

這定義了一個具有空主體和三個引數的建構函式,即:make、modelyear

class Car {
   constructor(private make: string, private model: string, private year: number) {}
}

繼承

在 TypeScript 中,繼承是一種機制,允許一個類繼承另一個類的屬性和方法。繼承自另一個類的類稱為子類或派生類,被繼承的類稱為超類或基類。在 TypeScript 中,繼承使用extends關鍵字宣告。

語法

從父類(超類)建立子類(子類)的語法:

class SubclassName extends SuperclassName {
   // additional properties and methods
}

示例 4

這裡子類:ElectricCar繼承了父類:Car的屬性和方法。此外,它還有自己的屬性range及其 getter 和 setter 方法,這些方法在父類中不存在。

class ElectricCar extends Car {
   private range: number;  
   constructor(make: string, model: string, year: number, range: number) {
      super(make, model, year);
      this.range = range;
   }
   public getRange(): number {
      return this.range;
   } 
   public setRange(range: number): void {
      this.range = range;
   }
}
const tesla = new ElectricCar("Tesla", "Model S", 2019, 300);
console.log(
   tesla.getMake(),
   tesla.getModel(),
   tesla.getYear(),
   tesla.getRange()
);

多型性

在 TypeScript 中,多型性是指物件能夠採用多種形式或型別的功能,允許不同類的物件被視為公共類的物件。多型性是透過繼承和介面實現的。這是一個演示多型性的示例

示例 5

這裡,我們首先建立了一個介面Shape,它類似於 TypeScript 中的類。它有一個宣告的方法area。此介面被實現了兩次,一次用於Circle類,另一次用於Rectangle類。在這兩個類中,我們都定義了area函式的主體,其定義方式不同,但函式名稱完全相同。這演示了 OOP 中的多型性(相同名稱但不同形式)。

interface Shape {
   area(): number;
}

class Circle implements Shape {
   constructor(private radius: number) {}
  
   public area(): number {
      return Math.PI * this.radius ** 2;
   }
}

class Rectangle implements Shape {
   constructor(private width: number, private height: number) {}
  
   public area(): number {
      return this.width * this.height;
   }
}
let shapes: Shape[] = [new Circle(5), new Rectangle(10, 20)];
shapes.forEach(shape => console.log(shape.area()));

編譯後,將生成以下 JavaScript 程式碼:

var Circle = /** @class */ (function () {
   function Circle(radius) {
      this.radius = radius;
   }
   Circle.prototype.area = function () {
      return Math.PI * Math.pow(this.radius, 2);
   };
   return Circle;
}());
var Rectangle = /** @class */ (function () {
   function Rectangle(width, height) {
      this.width = width;
      this.height = height;
   }
   Rectangle.prototype.area = function () {
      return this.width * this.height;
   };
   return Rectangle;
}());
var shapes = [new Circle(5), new Rectangle(10, 20)];
shapes.forEach(function (shape) { return console.log(shape.area()); });

輸出

以上程式碼將產生以下輸出:

78.53981633974483
200

介面

在 TypeScript 中,介面是建立物件的藍圖,它定義了一組必須由實現該介面的任何物件實現的屬性和方法。介面使用interface關鍵字宣告,後跟介面名和包含介面定義的一組花括號。

語法

interface InterfaceName {
   // properties and methods
}

示例 6

interface Person {
   firstName: string;
   lastName: string;
   age: number;
}

class Employee implements Person {
   constructor(public firstName: string, public lastName: string, public age: number, public jobTitle: string) {}
}
	
let Employee: Person = new Employee('John', 'Doe', 30, 'Software Engineer');
console.log(employee.firstName, employee.lastName, employee.age);

編譯後,將生成以下 JavaScript 程式碼:

var Employee = /** @class */ (function () {
   function Employee(firstName, lastName, age, jobTitle) {
      this.firstName = firstName;
      this.lastName = lastName;
      this.age = age;
      this.jobTitle = jobTitle;
   }
   return Employee;
}());
var employee = new Employee('John', 'Doe', 30, 'Software Engineer');
console.log(employee.firstName, employee.lastName, employee.age);

輸出

以上程式碼將產生以下輸出:

John Doe 30

這裡我們定義了一個名為Person的介面,並且此介面使用名為Employee的類實現。此外,我們透過在建構函式中傳遞引數來建立此類的例項。

結論

總而言之,TypeScript 對面向物件程式設計的支援允許開發人員建立結構良好且易於維護的程式碼。該語言的功能,包括類、物件、繼承、多型性、介面等,使編寫和維護複雜的應用程式變得更容易。因此,TypeScript 已經成為構建 Web 應用程式的熱門選擇,特別是那些需要高度組織和結構的應用程式。

更新於:2023年8月21日

866 次瀏覽

開啟您的職業生涯

透過完成課程獲得認證

開始學習
廣告