TypeScript中的類

更新時(shí)間：2021年12月09日 17:27:14 作者：一碗周

這篇文章主要介紹了TypeScript中的類，類這個(gè)概念基本是所有面向?qū)ο缶幊陶Z言都具有一個(gè)概念，JavaScript中ES6?之前是沒有類這個(gè)概念，下面文章圍繞TypeScript類的相關(guān)資料展開內(nèi)容,需要的朋友可以參考一下

1.概述

類這個(gè)概念基本是所有面向?qū)ο缶幊陶Z言都具有一個(gè)概念，例如Java、Python等；在JavaScript中ES6 之前是沒有類這個(gè)概念的，對(duì)于熟悉面向?qū)ο髞沓绦蛟硜碚f有些棘手，因?yàn)樗麄冇玫亩际腔陬惖睦^承，對(duì)象也是通過類創(chuàng)建出來的。在ES6中添加了類這個(gè)概念，雖然只是一個(gè)語法糖，但是這就可以讓程序員基于類去進(jìn)行操作了。在TS中也是支持類這個(gè)概念的。

2.定義一個(gè)簡(jiǎn)單的類

在TS中也是使用class關(guān)鍵字來定義一個(gè)類，示例代碼如下：

;(function () {
  // 定義類
  class Person {
    // 公共屬性，默認(rèn)可以不寫
    public name: string
    // 構(gòu)造函數(shù)
    constructor(name: string) {
      // 初始化name屬性
      this.name = name
    }
  }
  // 實(shí)例化類
  const person = new Person('一碗周')
  console.log(person.name) // 一碗周
})()

上面定義的那個(gè)類中具有一個(gè)構(gòu)造函數(shù)和一個(gè)公共屬性name，在類實(shí)例化時(shí)調(diào)用了constructor構(gòu)造函數(shù)，調(diào)用對(duì)功能屬性進(jìn)行初始化。

上面的寫法還有一種簡(jiǎn)寫形式，如下所示：

;(function () {
  class Person {
    constructor(public name: string) {}
  }
  // 實(shí)例化類
  const person = new Person('一碗周')
  console.log(person.name) // 一碗周
})()

這個(gè)寫法等同于上面那個(gè)寫法。

3.繼承

在面向?qū)ο蟮木幊陶Z言中，有一個(gè)重要得特征就是繼承。繼承就是基于某個(gè)類來擴(kuò)展現(xiàn)有的類。

例如，爸爸在北京有一個(gè)四合院，兒子可以繼承爸爸的四合院，而且還可以自己去買一棟別墅；最終兒子的房產(chǎn)擁有北京的四合院和一棟別墅。

在TS中繼承使用extends關(guān)鍵字，示例代碼如下：

;(function () {
  // 定義一個(gè)基類，又稱超類
  class Person {
    // 在基類中定義一個(gè)name屬性
    constructor(public name: string) {}
  }
  // 定義一個(gè)派生類，又稱子類，繼承于基類
  class Programmer extends Person {
    constructor(name: string, public hobby: string) {
      // 通過 super 調(diào)用基類的構(gòu)造函數(shù)
      super(name)
    }
  }
  // 實(shí)例化子類
  const programmer = new Programmer('一碗周', 'coding')
  console.log(programmer.name, programmer.hobby) // 一碗周 coding
})()

如上示例代碼中，Person稱作基類，或者稱超類，Programmer是一個(gè)派生類，或者稱子類。

在上面那個(gè)例子中，Programmer類通過extends關(guān)鍵字繼承于Person類。子類擁有父類全部的屬性和方法。

在子類的構(gòu)造函數(shù)中，我們必須調(diào)用super()方法來執(zhí)行基類的構(gòu)造函數(shù)，這個(gè)是必須的。

類的繼承不僅可以繼承類，而且還可以在子類重寫父類的屬性或者方法。實(shí)例代碼如下：

// 定義一個(gè) Person類
class Person {
    constructor(public name: string) {}
    // 定義一個(gè)方法
    sayMy() {
        console.log(`我的名字: ${this.name}`)
    }
}
// 定義一個(gè) Adult 類繼承于 Person 類
class Adult extends Person {
    constructor(public age: number) {
        super('彼岸繁華')
    } // 重寫父類方法
    sayMy() {
        console.log(`我的名字: ${this.name} 年齡: ${this.age}`)
    }
}
// 定義一個(gè) Programmer 類繼承于 Adult 類
class Programmer extends Adult {
    constructor(public hobby: string) {
        super(18)
    } // 重寫父類方法
    sayMy() {
        console.log(
            `我的名字: ${this.name} 年齡: ${this.age} 愛好: ${this.hobby}`
        )
    }
}
// 類的實(shí)例化
const programmer = new Programmer('coding')
programmer.sayMy() // 我的名字: 彼岸繁華 年齡: 18 愛好: coding

首先我們定義了一個(gè)Person類，在類中定義了一個(gè)屬性和一個(gè)方法；然后又定義了一個(gè)Adult類，這個(gè)類繼承于Person類，并重寫了Person類中的方法；最后又定義了一個(gè)Programmer類，這個(gè)類繼承于Adult類，并重寫了Adult類中的方法，也就是說Programmer類擁有Person類與Adult類中的全部屬性與方法，但是sayMe()方法被重寫了兩次，也就是說Programmer類擁有3個(gè)屬性和1個(gè)方法。

4.public、private、protected修飾符

public、private、protected修飾符的區(qū)別：

public：公開的，我們可以在類中自由的訪問類中定義的成員。TS默認(rèn)為public
private：私有的，僅僅可以在類中訪問定義的成員，在類外訪問不到
protected：受保護(hù)的，可以在本類或者子類中訪問定義的成員。

示例代碼如下所示：

// 定義一個(gè) Person 類，其中包含 public 成員 private 成員和 protected 成員。
class Person {
  public name: string
  // 約定 私有成員一般采用 _ 開頭
  private _age: number
  protected hobby: string
  // 屬性初始化
  constructor(name: string, age: number, hobby: string) {
    this.name = name
    this._age = age
    this.hobby = hobby
  }
  sayMy() {
    console.log(this.name, this._age, this.hobby)
  }
}

// 實(shí)例化 Person 類
const person = new Person('一碗周', 18, 'coding')

console.log(person.name) // 一碗周
// 類外訪問私有成員 拋出異常
// console.log(person._age) // 報(bào)錯(cuò)
// 類外訪問保護(hù)成員 拋出異常
// console.log(person.hobby) // 報(bào)錯(cuò)

// private 成員和 protected 成員可以在類內(nèi)訪問
person.sayMy() // 一碗周 18 coding

// 定義一個(gè)類繼承與 Person 類
class Programmer extends Person {
  constructor(name: string, age: number, hobby: string) {
    super(name, age, hobby)
  }
  sayMy() {
    console.log(this.name) // 一碗周
    // 在子類不可以訪問父類的私有成員
    // console.log(this._age) // 報(bào)錯(cuò)
    // 在子類可以訪問受保護(hù)的成員
    console.log(this.hobby) // coding
  }
}

// 實(shí)例化 Programmer 類
const programmer = new Programmer('一碗周', 18, 'coding')
programmer.sayMy()

// 確保跟其他代碼中的成員沖突
export {}

如上代碼中，我們可以在基類中訪問，公共成員、私有成員和保護(hù)成員，但是我們?cè)陬愅庵荒茉L問公共成員。當(dāng)我們定義一個(gè)子類繼承于Person類時(shí)，我們可以在子類訪保護(hù)成員，但是不能訪問私有成員。

4.1getters與setters

類中的私有成員和保護(hù)成員我們并不是真的不能讀寫，在TS中提供了getters與setters幫助我們有效的控制對(duì)對(duì)象成員的訪問。

示例代碼如下所示：

// 定義一個(gè) Person 類
class Person {
  // 約定 私有成員一般采用 _ 開頭
  private _name: string
  // 屬性初始化
  constructor(name: string) {
    this._name = name
  }
  // 獲取 私有的 _name 屬性值
  get getName(): string {
    return this._name
  }
  // 設(shè)置 私有的 _name 屬性值
  set setName(name: string) {
    this._name = name
  }
}
// 實(shí)例化類
const person = new Person('一碗粥')
// 通過 getName 的方式獲取
console.log(person.getName) // 一碗粥
// 通過 setName 的方式設(shè)置 _name 的值
person.setName = '一碗周'
// 重新獲取
console.log(person.getName) // 一碗周

5.readonly修飾符

我們可以通過 readonly修飾符將一個(gè)屬性設(shè)置為只讀的。只讀屬性必須在聲明時(shí)或者在構(gòu)造函數(shù)中進(jìn)行初始化。

示例代碼如下所示：

// 定義一個(gè)類，且具有一個(gè)只讀屬性
class Person {
  // readonly name: string
  // 等同于
  // public readonly name: string
  // constructor(name: string) {
  //     this.name = name
  // }
  // 或者
  constructor(public readonly name: string) {}
}
// 實(shí)例化
const person = new Person('一碗周')
console.log(person.name) // 一碗周
// 修改name的值
// person.name = '一碗周' // 錯(cuò)誤! name 是只讀的.

6.靜態(tài)成員

在 TS 中我們也可以創(chuàng)建靜態(tài)成員，這些屬性或者方法是存在于類本身而不是存在于類的實(shí)例上。在 TS中定義靜態(tài)成員與ES6中一樣，都是使用static關(guān)鍵字來說明。

示例代碼如下所示：

class Hero {
  // 計(jì)數(shù)器
  static count = 0
  constructor(public name: string) {
    // 每創(chuàng)建一個(gè)屬性 count ++
    ++Hero.count
  }
}
// 實(shí)例一個(gè) Hero 類
const hero1 = new Hero('孫悟空')
console.log(Hero.count) // 1
const hero2 = new Hero('哪吒')
console.log(Hero.count) // 2

這里我們用靜態(tài)屬性實(shí)現(xiàn)了一個(gè)記錄實(shí)例化幾個(gè)類的一個(gè)計(jì)數(shù)器。

7.抽象類

想要理解什么是抽象類，就需要先理解什么是抽象，所謂的抽象就是從眾多的事物中抽取出共同的、本質(zhì)性的特征，而舍棄其非本質(zhì)的特征。例如蘋果、香蕉、生梨、葡萄、桃子等，它們共同的特性就是水果。得出水果概念的過程，就是一個(gè)抽象的過程。

抽象類就是將眾多類中具有共同部分的功能抽離出來，單獨(dú)創(chuàng)建一個(gè)類作為其他派生類的基類使用。他們不允許被實(shí)例化，定義抽象類使用abstract關(guān)鍵字。

抽象方法就是只有方法的定義，沒有方法體，方法體需要在子類中進(jìn)行實(shí)現(xiàn)。

示例代碼如下：

// 通過 abstract 關(guān)鍵字 定義一個(gè)抽象類，該類不必進(jìn)行初始化，僅作為基類使用
abstract class Department {
  // 初始化name成員，參數(shù)屬性
  constructor(public name: string) {}

  printName(): void {
    console.log('部門名稱: ' + this.name)
  }
  // 抽象方法必須包含 abstract 關(guān)鍵字
  abstract printMeeting(): void // 必須在派生類中實(shí)現(xiàn)
}

class AccountingDepartment extends Department {
  constructor() {
    super('會(huì)計(jì)部') // 在派生類的構(gòu)造函數(shù)中必須調(diào)用super()
  }

  printMeeting(): void {
    console.log('會(huì)計(jì)部是負(fù)責(zé)管錢的部門')
  }
}

// const department = new Department() // 拋出異常：不能創(chuàng)建一個(gè)抽象類的實(shí)例
// 實(shí)例化抽象子類
const department = new AccountingDepartment()
// 調(diào)用抽象類中的方法
department.printName() // 部門名稱: 會(huì)計(jì)部
// 調(diào)用在派生類實(shí)現(xiàn)的抽象方法
department.printMeeting() // 會(huì)計(jì)部是負(fù)責(zé)管錢的部門

8.類與接口

類定義會(huì)創(chuàng)建兩個(gè)東西：類的實(shí)例類型和一個(gè)構(gòu)造函數(shù)，因?yàn)轭惪梢詣?chuàng)建出類型，這一點(diǎn)與我們之前學(xué)習(xí)的接口類似，所以說我們可以在使用接口的地方使用類。

示例代碼如下所示：

// 定義一個(gè)類
class Point {
    x: number
    y: number
}
// 定義一個(gè)接口繼承與類
interface Point3d extends Point {
    z: number
}

let point3d: Point3d = { x: 1, y: 2, z: 3 }

類可以通過implement去實(shí)現(xiàn)一個(gè)接口，示例代碼如下：

// 定義接口
interface Eat {
  eat(food: string): void
}
interface Run {
  run(distance: number): void
}

// 定義類實(shí)現(xiàn)接口
class Person implements Eat, Run {
  eat(food: string): void {
    console.log(food)
  }
  run(distance: number) {
    console.log(distance)
  }
}
export {}

到此這篇關(guān)于TypeScript中的類的文章就介紹到這了,更多相關(guān)TypeScript類內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: