TypeScript中的類
1.概述
類這個概念基本是所有面向?qū)ο缶幊陶Z言都具有一個概念,例如Java、Python等;在JavaScript中ES6 之前是沒有類這個概念的,對于熟悉面向?qū)ο髞沓绦蛟硜碚f有些棘手,因為他們用的都是基于類的繼承,對象也是通過類創(chuàng)建出來的。在ES6中添加了類這個概念,雖然只是一個語法糖,但是這就可以讓程序員基于類去進(jìn)行操作了。在TS中也是支持類這個概念的。
2.定義一個簡單的類
在TS中也是使用class關(guān)鍵字來定義一個類,示例代碼如下:
;(function () {
// 定義類
class Person {
// 公共屬性,默認(rèn)可以不寫
public name: string
// 構(gòu)造函數(shù)
constructor(name: string) {
// 初始化name屬性
this.name = name
}
}
// 實例化類
const person = new Person('一碗周')
console.log(person.name) // 一碗周
})()
上面定義的那個類中具有一個構(gòu)造函數(shù)和一個公共屬性name,在類實例化時調(diào)用了constructor構(gòu)造函數(shù),調(diào)用對功能屬性進(jìn)行初始化。
上面的寫法還有一種簡寫形式,如下所示:
;(function () {
class Person {
constructor(public name: string) {}
}
// 實例化類
const person = new Person('一碗周')
console.log(person.name) // 一碗周
})()
這個寫法等同于上面那個寫法。
3.繼承
在面向?qū)ο蟮木幊陶Z言中,有一個重要得特征就是繼承。繼承就是基于某個類來擴(kuò)展現(xiàn)有的類。
例如,爸爸在北京有一個四合院,兒子可以繼承爸爸的四合院,而且還可以自己去買一棟別墅;最終兒子的房產(chǎn)擁有北京的四合院和一棟別墅。
在TS中繼承使用extends關(guān)鍵字,示例代碼如下:
;(function () {
// 定義一個基類,又稱超類
class Person {
// 在基類中定義一個name屬性
constructor(public name: string) {}
}
// 定義一個派生類,又稱子類,繼承于基類
class Programmer extends Person {
constructor(name: string, public hobby: string) {
// 通過 super 調(diào)用基類的構(gòu)造函數(shù)
super(name)
}
}
// 實例化子類
const programmer = new Programmer('一碗周', 'coding')
console.log(programmer.name, programmer.hobby) // 一碗周 coding
})()
如上示例代碼中,Person稱作基類 ,或者稱超類 ,Programmer是一個派生類 ,或者稱子類 。
在上面那個例子中,Programmer類通過extends關(guān)鍵字繼承于Person類。子類擁有父類全部的屬性和方法。
在子類的構(gòu)造函數(shù)中,我們必須調(diào)用super()方法來執(zhí)行基類的構(gòu)造函數(shù),這個是必須的。
類的繼承不僅可以繼承類,而且還可以在子類重寫父類的屬性或者方法。實例代碼如下:
// 定義一個 Person類
class Person {
constructor(public name: string) {}
// 定義一個方法
sayMy() {
console.log(`我的名字: ${this.name}`)
}
}
// 定義一個 Adult 類繼承于 Person 類
class Adult extends Person {
constructor(public age: number) {
super('彼岸繁華')
} // 重寫父類方法
sayMy() {
console.log(`我的名字: ${this.name} 年齡: ${this.age}`)
}
}
// 定義一個 Programmer 類繼承于 Adult 類
class Programmer extends Adult {
constructor(public hobby: string) {
super(18)
} // 重寫父類方法
sayMy() {
console.log(
`我的名字: ${this.name} 年齡: ${this.age} 愛好: ${this.hobby}`
)
}
}
// 類的實例化
const programmer = new Programmer('coding')
programmer.sayMy() // 我的名字: 彼岸繁華 年齡: 18 愛好: coding
首先我們定義了一個Person類,在類中定義了一個屬性和一個方法;然后又定義了一個Adult類,這個類繼承于Person類,并重寫了Person類中的方法;最后又定義了一個Programmer類,這個類繼承于Adult類,并重寫了Adult類中的方法,也就是說Programmer類擁有Person類與Adult類中的全部屬性與方法,但是sayMe()方法被重寫了兩次,也就是說Programmer類擁有3個屬性和1個方法。
4.public、private、protected修飾符
public、private、protected修飾符的區(qū)別:
public:公開的,我們可以在類中自由的訪問類中定義的成員。TS默認(rèn)為publicprivate:私有的,僅僅可以在類中訪問定義的成員,在類外訪問不到protected:受保護(hù)的,可以在本類或者子類中訪問定義的成員。
示例代碼如下所示:
// 定義一個 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)
}
}
// 實例化 Person 類
const person = new Person('一碗周', 18, 'coding')
console.log(person.name) // 一碗周
// 類外訪問私有成員 拋出異常
// console.log(person._age) // 報錯
// 類外訪問保護(hù)成員 拋出異常
// console.log(person.hobby) // 報錯
// private 成員和 protected 成員可以在類內(nèi)訪問
person.sayMy() // 一碗周 18 coding
// 定義一個類繼承與 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) // 報錯
// 在子類可以訪問受保護(hù)的成員
console.log(this.hobby) // coding
}
}
// 實例化 Programmer 類
const programmer = new Programmer('一碗周', 18, 'coding')
programmer.sayMy()
// 確保跟其他代碼中的成員沖突
export {}
如上代碼中,我們可以在基類中訪問,公共成員、私有成員和保護(hù)成員,但是我們在類外只能訪問公共成員。當(dāng)我們定義一個子類繼承于Person類時,我們可以在子類訪保護(hù)成員,但是不能訪問私有成員。
4.1getters與setters
類中的私有成員和保護(hù)成員我們并不是真的不能讀寫,在TS中提供了getters與setters幫助我們有效的控制對對象成員的訪問。
示例代碼如下所示:
// 定義一個 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
}
}
// 實例化類
const person = new Person('一碗粥')
// 通過 getName 的方式獲取
console.log(person.getName) // 一碗粥
// 通過 setName 的方式設(shè)置 _name 的值
person.setName = '一碗周'
// 重新獲取
console.log(person.getName) // 一碗周
5.readonly修飾符
我們可以通過 readonly修飾符將一個屬性設(shè)置為只讀的。只讀屬性必須在聲明時或者在構(gòu)造函數(shù)中進(jìn)行初始化。
示例代碼如下所示:
// 定義一個類,且具有一個只讀屬性
class Person {
// readonly name: string
// 等同于
// public readonly name: string
// constructor(name: string) {
// this.name = name
// }
// 或者
constructor(public readonly name: string) {}
}
// 實例化
const person = new Person('一碗周')
console.log(person.name) // 一碗周
// 修改name的值
// person.name = '一碗周' // 錯誤! name 是只讀的.
6.靜態(tài)成員
在 TS 中我們也可以創(chuàng)建靜態(tài)成員,這些屬性或者方法是存在于類本身而不是存在于類的實例上。在 TS中定義靜態(tài)成員與ES6中一樣,都是使用static關(guān)鍵字來說明。
示例代碼如下所示:
class Hero {
// 計數(shù)器
static count = 0
constructor(public name: string) {
// 每創(chuàng)建一個屬性 count ++
++Hero.count
}
}
// 實例一個 Hero 類
const hero1 = new Hero('孫悟空')
console.log(Hero.count) // 1
const hero2 = new Hero('哪吒')
console.log(Hero.count) // 2
這里我們用靜態(tài)屬性實現(xiàn)了一個記錄實例化幾個類的一個計數(shù)器。
7.抽象類
想要理解什么是抽象類,就需要先理解什么是抽象,所謂的抽象就是從眾多的事物中抽取出共同的、本質(zhì)性的特征,而舍棄其非本質(zhì)的特征 。例如蘋果、香蕉、生梨、葡萄、桃子等,它們共同的特性就是水果。得出水果概念的過程,就是一個抽象的過程。
抽象類就是將眾多類中具有共同部分的功能抽離出來,單獨(dú)創(chuàng)建一個類作為其他派生類的基類使用。他們不允許被實例化,定義抽象類使用abstract關(guān)鍵字。
抽象方法就是只有方法的定義,沒有方法體,方法體需要在子類中進(jìn)行實現(xiàn)。
示例代碼如下:
// 通過 abstract 關(guān)鍵字 定義一個抽象類,該類不必進(jìn)行初始化,僅作為基類使用
abstract class Department {
// 初始化name成員,參數(shù)屬性
constructor(public name: string) {}
printName(): void {
console.log('部門名稱: ' + this.name)
}
// 抽象方法必須包含 abstract 關(guān)鍵字
abstract printMeeting(): void // 必須在派生類中實現(xiàn)
}
class AccountingDepartment extends Department {
constructor() {
super('會計部') // 在派生類的構(gòu)造函數(shù)中必須調(diào)用super()
}
printMeeting(): void {
console.log('會計部是負(fù)責(zé)管錢的部門')
}
}
// const department = new Department() // 拋出異常:不能創(chuàng)建一個抽象類的實例
// 實例化抽象子類
const department = new AccountingDepartment()
// 調(diào)用抽象類中的方法
department.printName() // 部門名稱: 會計部
// 調(diào)用在派生類實現(xiàn)的抽象方法
department.printMeeting() // 會計部是負(fù)責(zé)管錢的部門
8.類與接口
類定義會創(chuàng)建兩個東西:類的實例類型和一個構(gòu)造函數(shù),因為類可以創(chuàng)建出類型,這一點(diǎn)與我們之前學(xué)習(xí)的接口類似,所以說我們可以在使用接口的地方使用類。
示例代碼如下所示:
// 定義一個類
class Point {
x: number
y: number
}
// 定義一個接口繼承與類
interface Point3d extends Point {
z: number
}
let point3d: Point3d = { x: 1, y: 2, z: 3 }
類可以通過implement去實現(xiàn)一個接口,示例代碼如下:
// 定義接口
interface Eat {
eat(food: string): void
}
interface Run {
run(distance: number): void
}
// 定義類實現(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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JS/jquery實現(xiàn)一個網(wǎng)頁內(nèi)同時調(diào)用多個倒計時的方法
這篇文章主要介紹了JS/jquery實現(xiàn)一個網(wǎng)頁內(nèi)同時調(diào)用多個倒計時的方法,涉及js與jQuery基于定時器的時間相關(guān)操作技巧,需要的朋友可以參考下2017-04-04
微信小程序scroll-view實現(xiàn)左右聯(lián)動效果
這篇文章主要為大家詳細(xì)介紹了微信小程序scroll-view實現(xiàn)左右聯(lián)動效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-09-09
postcss-pxtorem實現(xiàn)頁面自適應(yīng)的原理解析
postcss-pxtorem是一個PostCSS插件,用于將CSS中的像素值轉(zhuǎn)換為rem單位,以實現(xiàn)響應(yīng)式布局和適配不同屏幕尺寸的需求,本文給大家介紹postcss-pxtorem實現(xiàn)頁面自適應(yīng)的原理解析,感興趣的朋友一起看看吧2023-12-12

