- TypeScript 基礎
- TypeScript - 首頁
- TypeScript - 路線圖
- TypeScript - 概述
- TypeScript - 環境搭建
- TypeScript - 基本語法
- TypeScript vs. JavaScript
- TypeScript - 特性
- TypeScript - 變數
- TypeScript - let & const
- TypeScript - 運算子
- TypeScript 基本型別
- TypeScript - 型別
- TypeScript - 型別註解
- TypeScript - 型別推斷
- TypeScript - 數字
- TypeScript - 字串
- TypeScript - 布林值
- TypeScript - 陣列
- TypeScript - 元組
- TypeScript - 列舉
- TypeScript - any
- TypeScript - never
- TypeScript - 聯合型別
- TypeScript - 字面量型別
- TypeScript - Symbols
- TypeScript - null vs. undefined
- TypeScript - 類型別名
- TypeScript 控制流
- TypeScript - 決策
- TypeScript - if 語句
- TypeScript - if else 語句
- TypeScript - 巢狀 if 語句
- TypeScript - switch 語句
- TypeScript - 迴圈
- TypeScript - for 迴圈
- TypeScript - while 迴圈
- TypeScript - do while 迴圈
- TypeScript 函式
- TypeScript - 函式
- TypeScript - 函式型別
- TypeScript - 可選引數
- TypeScript - 預設引數
- TypeScript - 匿名函式
- TypeScript - 函式構造器
- TypeScript - rest 引數
- TypeScript - 引數解構
- TypeScript - 箭頭函式
- TypeScript 介面
- TypeScript - 介面
- TypeScript - 介面擴充套件
- TypeScript 類和物件
- TypeScript - 類
- TypeScript - 物件
- TypeScript - 訪問修飾符
- TypeScript - 只讀屬性
- TypeScript - 繼承
- TypeScript - 靜態方法和屬性
- TypeScript - 抽象類
- TypeScript - 存取器
- TypeScript - 鴨子型別
- TypeScript 高階型別
- TypeScript - 交叉型別
- TypeScript - 型別守衛
- TypeScript - 型別斷言
- TypeScript 型別操作
- TypeScript - 從型別建立型別
- TypeScript - keyof 型別運算子
- TypeScript - typeof 型別運算子
- TypeScript - 索引訪問型別
- TypeScript - 條件型別
- TypeScript - 對映型別
- TypeScript - 模板字面量型別
- TypeScript 泛型
- TypeScript - 泛型
- TypeScript - 泛型約束
- TypeScript - 泛型介面
- TypeScript - 泛型類
- TypeScript 其他
- TypeScript - 三斜槓指令
- TypeScript - 名稱空間
- TypeScript - 模組
- TypeScript - 環境宣告
- TypeScript - 裝飾器
- TypeScript - 型別相容性
- TypeScript - Date 物件
- TypeScript - 迭代器和生成器
- TypeScript - Mixins
- TypeScript - 實用程式型別
- TypeScript - 裝箱和拆箱
- TypeScript - tsconfig.json
- 從 JavaScript 到 TypeScript
- TypeScript 有用資源
- TypeScript - 快速指南
- TypeScript - 有用資源
- TypeScript - 討論
TypeScript - 抽象類
抽象類
抽象類用於在 TypeScript 中實現抽象。抽象類只包含方法宣告,而不包含實現。我們需要在繼承類中實現抽象類所有抽象方法。
抽象是一種向用戶和一些開發者隱藏底層程式碼實現的方式。此外,它用於僅顯示方法的必要資訊,而不是顯示方法的整個複雜實現。
建立抽象類
我們可以使用abstract關鍵字定義抽象類或方法。抽象類可以包含普通方法和抽象方法。在抽象類中,我們需要實現函式或普通方法,並且只需要宣告抽象方法。
我們可以使用任何其他類繼承抽象類,但是我們需要在繼承類中實現抽象類中的所有抽象方法。如果我們不想在繼承類中實現抽象方法,我們需要使用 abstract 關鍵字將繼承類也設定為抽象類。
此外,我們不能建立抽象類的物件,但是可以建立繼承類的物件並使用抽象類方法。抽象類的限制是,我們不能使用多個抽象類實現多重繼承。
語法
您可以遵循以下語法來建立和繼承抽象類到其他類。
abstract class sample {
// define variables inside the abstract class,
// declare the abstract methods or non-abstract method inside the abstract class
abstract demo(string): void;
}
// extend sample class and implement all abstract methods of sample to demo class
class test extends sample {
demo(name: string): void {
// code for the demo method
}
}
示例 1
在下面的示例中,我們定義了一個包含抽象方法的抽象類。在繼承的測試類中,我們實現了示例類的抽象方法。接下來,我們建立了一個帶有 3 個引數的測試類物件,並呼叫了 demo() 和 save() 方法。
abstract class sample {
// define variables inside the abstract class,
property1: string;
constructor(property1: string, property2: number) {
this.property1 = property1;
}
// declare the abstract methods
abstract demo(): void;
// defining the non-abstract methods
save(): void {
console.log("The save method of the abstract class is executed.");
}
}
// extend sample class and implement all abstract methods of sample to demo class
class test extends sample {
property2: number;
constructor(property1: string, property2: number) {
super(property1);
this.property2 = property2;
}
demo(): void {
// code for the demo method
console.log("The value of the property 3 is " + this.propert2);
}
}
let test_obj = new test("TutorialsPont", 9999);
test_obj.demo();
test_obj.save();
在上面的示例中,我們從繼承類測試中隱藏了 save() 方法的實現。我們允許開發者根據需要實現 demo() 方法,但隱藏了其他類資訊,例如 property1、property2 和 save() 方法的實現。
現在,使用者可以正確理解使用抽象類的目的,以及如何使用它來隱藏資訊並僅顯示所需資訊。
編譯後,以上程式碼將生成以下 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 (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d;
}
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var sample = /** @class */ (function () {
function sample(property1, property2) {
this.property1 = property1;
}
// defining the non-abstract methods
sample.prototype.save = function () {
console.log("The save method of the abstract class is executed.");
};
return sample;
}());
// extend sample class and implement all abstract methods of sample to demo class
var test = /** @class */ (function (_super) {
__extends(test, _super);
function test(property1, property2) {
var _this = _super.call(this, property1) || this;
_this.property2 = property2;
return _this;
}
test.prototype.demo = function () {
// code for the demo method
console.log("The value of the property 3 is " + this.propert2);
};
return test;
}(sample));
var test_obj = new test("TutorialsPont", 9999);
test_obj.demo();
test_obj.save();
輸出
它將產生以下輸出:
The value of the property 3 is undefined The save method of the abstract class is executed.
示例 2
在下面的示例中,class1 是抽象類,它包含抽象方法 method1 的宣告。class2 只包含 method2() 的定義。它擴充套件了 class1 但沒有實現名為 method1() 的抽象方法。
之後,我們定義了 class3 並透過 class2 繼承它。我們還在 class3 中定義了 class 的 method1。最後,我們建立了 class3 的物件並呼叫了 method1() 和 method2()。
// define the abstract class1 containing the abstract method1
abstract class class1 {
abstract method1(): void;
}
// Need to create class2 to abstract as we inherited class1 but doesn't defined abstract method1()
abstract class class2 extends class1 {
method2(): void {
console.log("Inside the method 2 of class2.");
}
}
// defining the class3 inherited by the class2
class class3 extends class2 {
// Implementation of the method1 of the abstract class1
method1(): void {
console.log(
"Implemented the abstract method name method1 of class1 inside the class3"
);
}
}
// Crating the object of the class3
var object = new class3();
// Invoking the method1 of class1 which is declared in the abstract class1
object.method1();
// Invoking the method2 of class2
object.method2();
上面的例子向我們展示了,如果我們透過任何類繼承抽象類,並且不想在繼承類中實現抽象方法,我們需要將繼承類設為抽象類。
編譯後,以上程式碼將生成以下 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 (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
// define the abstract class1 containing the abstract method1
var class1 = /** @class */ (function () {
function class1() {
}
return class1;
}());
// Need to create class2 to abstract as we inherited class1 but doesn't defined abstract method1()
var class2 = /** @class */ (function (_super) {
__extends(class2, _super);
function class2() {
return _super !== null && _super.apply(this, arguments) || this;
}
class2.prototype.method2 = function () {
console.log("Inside the method 2 of class2.");
};
return class2;
}(class1));
// defining the class3 inherited by the class2
var class3 = /** @class */ (function (_super) {
__extends(class3, _super);
function class3() {
return _super !== null && _super.apply(this, arguments) || this;
}
// Implementation of the method1 of the abstract class1
class3.prototype.method1 = function () {
console.log("Implemented the abstract method name method1 of class1 inside the class3");
};
return class3;
}(class2));
// Crating the object of the class3
var object = new class3();
// Invoking the method1 of class1 which is declared in the abstract class1
object.method1();
// Invoking the method2 of class2
object.method2();
輸出
它將產生以下輸出:
Implemented the abstract method name method1 of class1 inside the class3 Inside the method 2 of class2.