前言：

typeScript 中的類(lèi)與 ES6 中的類(lèi)非常相似，如果不知道 ES6 中的類(lèi)，建議先學(xué)習(xí)下 ES6 中的 class 。本篇文章重點(diǎn)介紹 typeScript 中的類(lèi)定義、繼承以及修飾符。

1、類(lèi)的定義

類(lèi)描述了所創(chuàng)建的對(duì)象共同的屬性和方法。typeScript 支持面向?qū)ο蟮乃刑匦?，比如?lèi)、接口等。

在 typeScript 中定義類(lèi)的時(shí)候，使用 class 關(guān)鍵字，類(lèi)名首字母使用大寫(xiě)，類(lèi)可以包含以下三個(gè)模塊：

• ?字段? - 字段是類(lèi)里面聲明的變量，表示與對(duì)象有關(guān)的屬性。
• ?構(gòu)造函數(shù)? - 類(lèi)實(shí)例化時(shí)自動(dòng)調(diào)用，可以為實(shí)例化的對(duì)象分配內(nèi)存。
• ?方法? - 方法為對(duì)象要執(zhí)行的某種操作。

定義屬性的時(shí)候，需要添加屬性類(lèi)型，構(gòu)造函數(shù)中的參數(shù)也需要加類(lèi)型，引用任何一個(gè)類(lèi)的成員的時(shí)候都用 this ，this 關(guān)鍵字表示當(dāng)前類(lèi)實(shí)例化的對(duì)象。使用 new 關(guān)鍵字來(lái)實(shí)例化對(duì)象，并初始化它。

如示例：

class Web{
?workTime: string
?constructor(n:string) {
? this.workTime = n
?}
?showWork(){
? return "搬磚的前端"
?}
}
let qq = new Web("五年")
console.log(qq.showWork());
console.log(qq.workTime);

編譯以上代碼，得到的 js 代碼如下：

"use strict";
class Web {
?constructor(n) {
? this.workTime = n;
?}
?showWork() {
? return "搬磚的前端";
?}
}
let qq = new Web("五年");
console.log(qq.showWork());
console.log(qq.workTime);

2、類(lèi)的繼承

typeScript 支持繼承類(lèi)，即可以在創(chuàng)建類(lèi)的時(shí)候繼承一個(gè)已存在的類(lèi)，類(lèi)繼承的時(shí)候使用 extends 關(guān)鍵字，基于類(lèi)的程序設(shè)計(jì)中一種最基本的模式是允許使用繼承來(lái)擴(kuò)展現(xiàn)有的類(lèi)。比如：

class Dirnks{
?name: string
?constructor(n: string) {
? this.name = n
?}
?save(m: string) {
? console.log(`${this.name}飲料應(yīng)該${m}`);
?}
}
class Soda extends Dirnks{
?constructor(n: string) {
? super(n)
?}
}
let kele = new Soda("可樂(lè)")
kele.save("冷藏")

上述示例是一個(gè)最基本的類(lèi)繼承，其中 Soda 繼承了 Dirnks 的屬性和方法，其中 Soda 是一個(gè)派生類(lèi)，也叫做子類(lèi)，Dirnks 是一個(gè)基類(lèi)，也叫超類(lèi)或父類(lèi)。

派生類(lèi)包含了一個(gè)構(gòu)造函數(shù)，構(gòu)造函數(shù)必須調(diào)用 super() ，會(huì)執(zhí)行基類(lèi)的構(gòu)造函數(shù)。需要注意的是：在子類(lèi)構(gòu)造函數(shù)里訪問(wèn) this 的屬性之前，一定要先調(diào)用 super ，這是 typeScript 強(qiáng)制執(zhí)行的一條重要規(guī)則。

如果父類(lèi)和子類(lèi)都包含某一方法時(shí)，方法名相同，但是具體執(zhí)行內(nèi)容不同的時(shí)候，該執(zhí)行哪一個(gè)方法呢？

修改上述實(shí)例，給子類(lèi)也添加一個(gè)方法，代碼如下：

class Dirnks{
?name: string
?constructor(n: string) {
? this.name = n
?}
?save(m: string) {
? console.log(`${this.name}飲料應(yīng)該${m}`);
?}
}
class Soda extends Dirnks{
?constructor(n: string) {
? super(n)
?}
?save() {
? return "存儲(chǔ)方法"
?}
}
let kele = new Soda("可樂(lè)")
console.log(kele.save());

編譯以上代碼啊，得到的 js 代碼如下：

"use strict";
class Dirnks {
?constructor(n) {
? this.name = n;
?}
?save(m) {
? console.log(`${this.name}飲料應(yīng)該${m}`);
?}
}
class Soda extends Dirnks {
?constructor(n) {
? super(n);
?}
?save() {
? return "存儲(chǔ)方法";
?}
}
let kele = new Soda("可樂(lè)");
console.log(kele.save());

此時(shí)會(huì)執(zhí)行子類(lèi)中的方法。其原理是，類(lèi)繼承后，子類(lèi)可以對(duì)父類(lèi)的方法進(jìn)行重新定義，這個(gè)過(guò)程稱之為方法的重寫(xiě)。

typeScript 中子類(lèi)只能繼承一個(gè)父類(lèi)，雖然不支持繼承多個(gè)類(lèi)，但是支持多重繼承。如下：

class One{
?name: string
?constructor(n: string) {
? this.name = n
?}
?show() {
? return "展示"
?}
}
class Two extends One{
?constructor(n:string) {
? super(n)
?}
}
class Three extends Two{
?constructor(n: string) {
? super(n)
?}
}
let three = new Three("剁成")
console.log(three.show());

3、修飾符

在 typeScript 中，可以使用訪問(wèn)控制符來(lái)保護(hù)對(duì)類(lèi)、變量、方法和構(gòu)造函數(shù)的訪問(wèn)。typeScript 支持 3 種不同的訪問(wèn)權(quán)限，分別為：

• ?public（默認(rèn)）? - 公有，表示共享的屬性和方法?？梢栽谌魏蔚胤奖辉L問(wèn)。
• ?protected? - 受保護(hù)，表示屬性和方法被保護(hù)，可以被自身以及子類(lèi)訪問(wèn)，不能在類(lèi)外面使用。
• ?private? - 私有，只能被其定義所在的類(lèi)訪問(wèn)。
• ?readonly? - 只讀，只讀屬性必須在聲明時(shí)或構(gòu)造函數(shù)里初始化。

?理解 public?

在上邊類(lèi)中的成員定義的時(shí)候，沒(méi)有明確使用任何修飾符，默認(rèn)的就是 public ，所以可以將上面的類(lèi)改寫(xiě)為：

class HH{
?public name: string
?public constructor(n: string) {
? this.name = n
?}
}
let h = new HH("HH")
console.log(h.name);

使用 public 之后，對(duì)上面的應(yīng)用并沒(méi)有任何影響。

它的特點(diǎn)：被它標(biāo)記的成員在類(lèi)的里面、子類(lèi)里面、類(lèi)外面都可以訪問(wèn)到。

?理解 protected?

類(lèi)中添加 protected 修飾符來(lái)修飾成員時(shí)，將上述實(shí)例的 public 修飾符修改為 protected 如下：

class HH{
?protected name: string
?constructor(n: string) {
? this.name = n
?}
}
let h = new HH("HH")
console.log(h.name); // 此處報(bào)錯(cuò)，提示 屬性"name"受保護(hù)，只能在類(lèi) HH 及子類(lèi)中訪問(wèn)

它的特點(diǎn)：被它標(biāo)記的成員在類(lèi)的里面、子類(lèi)里面能使用，但是在類(lèi)的外面不能使用。

?理解 private?

class HH{
?private name: string
?constructor(n: string) {
? this.name = n
?}
}
class H extends HH{
?constructor(n: string) {
? super(n)
?}
?show() {
? console.log(this.name); // 報(bào)錯(cuò)
?}
}
let h = new H("HH")
console.log(h.name); ?// 報(bào)錯(cuò)
h.show()

上面的示例報(bào)錯(cuò)，提示：屬性“name”為私有屬性，只能在類(lèi)“HH”中訪問(wèn)。

它的特點(diǎn)：被它標(biāo)記的成員不能再聲明它的類(lèi)的外部訪問(wèn)。

到此這篇關(guān)于TypeScript 學(xué)習(xí)筆記之 typeScript類(lèi)定義,類(lèi)的繼承,類(lèi)成員修飾符的文章就介紹到這了,更多相關(guān) typeScript類(lèi)定義,類(lèi)的繼承,類(lèi)成員修飾符內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論