TypeScript面向?qū)ο蟪敿毞治?/h1>

 更新時間：2022年10月20日 09:47:19   作者：橘貓吃不胖～  

面向?qū)ο蟆脒M行執(zhí)行某個事件，就去找事件對應的對象，把事情落實到對象身上，在程序中一切皆是對象，對象包含屬性和方法，面向?qū)ο笕筇卣鳎悍庋b、繼承、多態(tài)

目錄

• 1 面向?qū)ο笤瓌t
• 2 TypeScript類
• 2.1 類的定義
• 2.2 創(chuàng)建實例對象
• 3 類的繼承
• 4 static關鍵字
• 5 抽象類和抽象方法
• 6 類屬性權限修飾符
• 6.1 public（公有的）
• 6.2 protected（受保護的）
• 6.3 private（受保護的）
• 6.4 readonly（只讀）
• 7 存取器

1 面向?qū)ο笤瓌t

• 單一原則：一個類只負責一個職責。
• 里氏替換原則：子類可以在任何地方替換它的父類。
• 依賴倒置原則：代碼要依賴于抽象的類，而不要依賴于具體的類；要針對接口或抽象類編程，而不是針對具體類編程。
• 接口隔離原則：提供盡可能小的單獨接口，而不要提供大的總接口。暴露行為讓后面的實現(xiàn)類知道的越少越好。
• 迪米特法則：盡量降低類與類之間的耦合。
• 開閉原則：面向擴展開放，面向修改關閉。
• 組合/聚合復用原則：盡量使用合成/聚合達到復用，盡量少用繼承。原則： 一個類中有另一個類的對象。

2 TypeScript類

TypeScript 是面向?qū)ο蟮?JavaScript。類描述了所創(chuàng)建的對象共同的屬性和方法。TypeScript 支持面向?qū)ο蟮乃刑匦浴?/p>

2.1 類的定義

TypeScript使用class關鍵字定義類。

class 類名 {
    // 具體代碼
}

類可以包含以下幾個模塊（類的數(shù)據(jù)成員）：

• 字段（屬性）：字段是類里面聲明的變量。字段表示對象的有關數(shù)據(jù)。
• 構造函數(shù)：類實例化時調(diào)用，可以為類的對象分配內(nèi)存。
• 方法：方法為對象要執(zhí)行的操作。

那么一個類的結構大致如下：

class 類名 {
    // 字段
    屬性名: 類型;

    // 構造函數(shù)
    constructor(參數(shù): 類型) {
        this.屬性名 = 參數(shù);
    }

    // 方法
    方法名() {
        // 具體方法
    }
}

示例代碼：創(chuàng)建一個Car類

class Car {
    // 字段
    engine: string;
    // 構造函數(shù)
    constructor(engine: string) {
        this.engine = engine;
    }
    // 方法
    disp(): void {
        console.log("發(fā)動機為：" + this.engine);
    }
}

2.2 創(chuàng)建實例對象

在類中使用new關鍵字來實例化類的對象，語法格式如下：

var 對象名 = new 類名([參數(shù)]);

類中的字段和方法可以使用.來訪問：

// 訪問屬性
對象名.字段名;

// 訪問方法
對象名.方法名();

示例代碼：為Car類創(chuàng)建一個實例對象，并訪問字段和方法

class Car {
    engine: string;
    constructor(engine: string) {
        this.engine = engine;
    }
    disp(): void {
        console.log("發(fā)動機為：" + this.engine);
    }
}
let bc = new Car("引擎1");
console.log(bc.engine); // 引擎1
bc.disp(); // 發(fā)動機為：引擎1

3 類的繼承

TypeScript 支持繼承類，即我們可以在創(chuàng)建類的時候繼承一個已存在的類，這個已存在的類稱為父類，繼承它的類稱為子類。

類繼承使用關鍵字extends，子類除了不能繼承父類的私有成員（方法和屬性）和構造函數(shù)，其他的都可以繼承。TypeScript 一次只能繼承一個類，不支持繼承多個類，但 TypeScript 支持多重繼承（A 繼承 B，B 繼承 C）。

示例代碼：

// 定義一個動物類Animal作為父類
class Animal {
    name: string; // 字段
    constructor(name: string) { // 構造函數(shù)
        this.name = name;
    }
    eat(): void {
        console.log(this.name + "在吃");
    }
}
// 定義一個Cat類作為子類，繼承父類Animal
class Cat extends Animal {
    // 定義自己獨有的方法叫
    say() {
        console.log("喵喵喵");
    }
}
// 創(chuàng)建Cat類的實例對象
let cat1 = new Cat("橘貓");
// 訪問父類的eat()方法
cat1.eat(); // 橘貓在吃
// 訪問自己的say()方法
cat1.say(); // 喵喵喵

繼承類的方法重寫（overwrite）：又稱為方法覆蓋。類繼承后，子類可以對父類的方法重新定義，這個過程稱之為方法的重寫。示例代碼如下：

// 定義一個動物類Animal作為父類
class Animal {
    eat(): void {
        console.log("在吃飯");
    }
}
// 定義一個Cat類作為子類，繼承父類Animal
class Cat extends Animal {
    // 對父類的方法進行重寫
    eat(): void {
        console.log("貓貓在吃魚");
    }
}
// 創(chuàng)建Cat類的實例對象
let cat1 = new Cat();
cat1.eat(); // 貓貓在吃魚

在類中，使用super關鍵字可以引用父類的屬性和方法，super就表示父類。例如，使用super調(diào)用父類的普通方法：

// 定義一個動物類Animal作為父類
class Animal {
    eat(): void {
        console.log("在吃飯");
    }
}
// 定義一個Cat類作為子類，繼承父類Animal
class Cat extends Animal {
    eat(): void {
        super.eat(); // 調(diào)用父類的eat()方法
    }
}
// 創(chuàng)建Cat類的實例對象
let cat1 = new Cat();
cat1.eat(); // 在吃飯

使用super調(diào)用父類的構造方法時，super必須寫在子類構造函數(shù)的第一條語句，如果父類的構造函數(shù)中有參數(shù)，那么在super中也要將該參數(shù)傳遞進去。示例代碼如下：

// 定義一個動物類Animal作為父類
class Animal {
    name: string;
    constructor(name: string) {
        this.name = name;
    }
    eat(): void {
        console.log("在吃飯");
    }
}
// 定義一個Cat類作為子類，繼承父類Animal
class Cat extends Animal {
    age: number;
    constructor(name: string, age: number) {
        super(name); // 必須寫在第一條語句
        this.age = age;
    }
}

4 static關鍵字

static關鍵字用于定義類的數(shù)據(jù)成員（屬性和方法）為靜態(tài)的，靜態(tài)成員可以直接通過類名調(diào)用。

示例代碼：

class StaticMem {
    static num: number;
    static disp(): void {
        console.log("num值為：" + StaticMem.num);
    }
}
StaticMem.num = 100; // 初始化靜態(tài)變量
StaticMem.disp(); // 調(diào)用靜態(tài)方法
// num值為：100

5 抽象類和抽象方法

用abstract關鍵字定義抽象類和抽象方法，抽象類中的抽象方法不包含具體實現(xiàn)并且必須在派生類中實現(xiàn)。abstract抽象方法只能放在抽象類里面。抽象類和抽象方法用來定義標準。

抽象類不能用來創(chuàng)建對象，是專門用來被繼承的類。

示例：定義一個抽象類和抽象方法

abstract class Animal { // 定義一個抽象類
    name: string;
    constructor(name: string) {
        this.name = name;
    }
    abstract eat(): void; // 定義一個抽象方法
}

如果對抽象方法進行了具體的實現(xiàn)，那么就會報錯：Method ‘eat’ Cannot have an implementation because it is marked abstract。

并且抽象類并不能被實例化，否則也會報錯：Cannot create an instance of an abstract class。

如果某個類要繼承抽象類，那么這個類要實現(xiàn)抽象類中定義的所有方法，否則也會報錯。

例如，設計一個Cat繼承Animal抽象類，如下所示，如果Cat類中什么方法都沒有，就會出現(xiàn)提示，Cat類并沒有實現(xiàn)抽象類中的抽象方法eat。

因此在繼承時，在Cat類中必須實現(xiàn)eat方法：

abstract class Animal { // 定義一個抽象類
    name: string;
    constructor(name: string) {
        this.name = name;
    }
    abstract eat(): void;
}
class Cat extends Animal {
    eat(): void {
        console.log(this.name + "吃魚");
    }
}

6 類屬性權限修飾符

6.1 public（公有的）

public表示公有的、公開的，公有成員可以被任何地方訪問，默認可見性

class Animal {
    public move() { // 使用public修飾符表示公開的成員
        console.log("走");
    }
}
var p = new Animal();
p.move(); // 走
class Cat extends Animal {
    bark() {
        console.log("喵喵喵");
    }
}
var c = new Cat();
c.move(); // 走
c.bark(); // 喵喵喵

在類屬性或方法前面添加public關鍵字，來修飾該屬性或方法是公有的。因為public是默認可見性，所以可以直接省略。

6.2 protected（受保護的）

protected表示受保護的，僅對其聲明所在類和子類中（非實例對象）可見。在類屬性或方法前面添加protected關鍵字，可以修飾屬性或方法是受保護的。在子類的方法內(nèi)部可以通過this來訪問父類中受保護的成員，但是對實例不可見。

例如，在下面的代碼中，move方法被protected修飾了，對Animal類創(chuàng)建實例，該實例并不能訪問到move方法。

class Animal {
    protected move() {
        console.log("走");
    }
}
var p = new Animal();
p.move(); // 不能訪問到move方法

如果設計一個Cat類繼承了Animal類，那么在Cat類的內(nèi)部可以通過this訪問到move方法。

class Animal {
    protected move() {
        console.log("走");
    }
}
class Cat extends Animal {
    bark() {
        this.move();
    }
}
var c = new Cat();
c.bark(); // 走

6.3 private（受保護的）

private表示私有的，只在當前類中可見，對實例對象和子類都是不可見的。在類屬性或方法前面添加private關鍵字，來修飾該屬性或方法是私有的。

例如，在Animal類中，move方法被private修飾，因此實例對象a無法對move方法進行調(diào)用

class Animal {
    private move() {
        console.log("走");
    }
}
var a = new Animal();
a.move(); // 報錯

但是它可以在自己類內(nèi)部的方法中進行調(diào)用：

class Animal {
    private move() {
        console.log("走");
    }
    eat() {
        this.move(); // 使用正確不報錯
    }
}

move方法同樣也不能被子類所調(diào)用，對子類不可見：

class Animal {
    private move() {
        console.log("走");
    }
}
class Cat extends Animal {
    bark() {
        this.move(); // 無法調(diào)用，報錯
    }
}

6.4 readonly（只讀）

readonly表示只讀，用來防止在構造函數(shù)之外對屬性進行賦值。使用readonly關鍵字只能修飾屬性不能修飾方法。接口或者{}表示的對象類型，也可以使用readonly。

例如，在下面的代碼中，age被readonly修飾，是只讀屬性，因此在實例化時再對age進行修改就會報錯。

class Person {
    readonly age: number = 18;
}
var p = new Person();
p.age = 19; // 報錯，只讀屬性不能修改

如果不加readonly就可以修改：

class Person {
    age: number = 18;
}
var p = new Person();
p.age = 19;
console.log(p.age); // 19

7 存取器

TypeScript支持通過getters/setters來截取對對象成員的訪問。

在類中設置某個屬性語法為：

set 屬性名(參數(shù)): [類型]{
    this.屬性 = 參數(shù);
}

獲取某個屬性語法為：

get 屬性名(): [類型]{
    return this.屬性;
}

示例代碼：

class Person {
    // 將tall屬性設置為私有的，這樣無法通過實例來修改
    // 私有變量約定用下劃線開頭
    private _tall: number;
    constructor(tall: number) {
        this._tall = tall;
    }
    // 獲取tall的值
    get height(): number {
        return this._tall;
    }
    // 設置tall的值
    set height(tall: number) {
        this._tall = tall;
    }
}
var p = new Person(160);
p.height = 180;
console.log(p.height); // 180

到此這篇關于TypeScript面向?qū)ο蟪敿毞治龅奈恼戮徒榻B到這了,更多相關TypeScript面向?qū)ο髢?nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

• JS?TypeScript的Map對象及聯(lián)合類型實戰(zhàn)
• 如何在TypeScript中正確的遍歷一個對象
• TypeScript遍歷對象屬性的問題
• TypeScript 中如何限制對象鍵名的取值范圍
• Typescript tipe freshness 更嚴格對象字面量檢查

• TypeScript
• 面向?qū)ο?/a>

相關文章

• 

  js項目中前端如何實現(xiàn)無感刷新token

  本文主要介紹了js項目中前端如何實現(xiàn)無感刷新token，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

  2023-07-07
• 

  關于JavaScript中高階函數(shù)的魅力詳解

  高階函數(shù)：英文叫Higher-order function。JavaScript的函數(shù)其實都指向某個變量。下面這篇文章主要給大家介紹了關于JavaScript中高階函數(shù)的魅力，文中通過示例代碼介紹的非常詳細，需要的朋友可以參考下

  2018-09-09
• 

  webgl實現(xiàn)物體描邊效果的方法介紹

  這篇文章主要給大家介紹了關于webgl實現(xiàn)物體描邊效果的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用webgl具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧

  2019-11-11
• 

  JS中判斷某個字符串是否包含另一個字符串的五種方法

  本文給大家?guī)鞪S中判斷某個字符串是否包含另一個字符串的五種方法，有string對象的方法，match() 方法，RegExp對象的方法，test() 方法，exec() 方法，具體內(nèi)容詳情大家參考下本文

  2018-05-05
• 

  使用Three.js?實現(xiàn)虎年春節(jié)3D創(chuàng)意頁面

  虎年春節(jié)將至，本文使用?React?+?Three.js技術棧，實現(xiàn)趣味?3D創(chuàng)意頁面，主要包括：ShadowMaterial、?MeshPhongMaterial等基本材質(zhì)的使用、使用?LoadingManager展示模型加載進度、OrbitControls`的緩動動畫、TWEEN簡單補間動畫效果等，感興趣的朋友一起看看吧

  2022-01-01
• 

  JS獲取及驗證開始結束日期的方法

  這篇文章主要介紹了JS獲取及驗證開始結束日期的方法.涉及javascript針對日期的獲取、比較及判斷等技巧,需要的朋友可以參考下

  2016-08-08
• 

  contenteditable可編輯區(qū)域設置換行實現(xiàn)技巧實例

  這篇文章主要為大家介紹了contenteditable可編輯區(qū)域設置換行實現(xiàn)技巧實例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

  2024-01-01
• 

  JS設計模式之策略模式概念與用法分析

  這篇文章主要介紹了JS設計模式之策略模式概念與用法,簡單分析了策略模式的基本概念、原理并結合實例形式分析了javascript實現(xiàn)與使用策略模式的相關操作技巧,需要的朋友可以參考下

  2018-02-02
• 

  javascript排序函數(shù)實現(xiàn)數(shù)字排序

  這篇文章主要介紹了javascript排序函數(shù)實現(xiàn)數(shù)字排序的相關資料,附上示例，需要的朋友可以參考下

  2015-06-06
• 

  js多維數(shù)組降維的5種方法

  本文主要介紹了js多維數(shù)組降維的5種方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

  2023-04-04

最新評論