當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

【TypeScript】类的使用

發布時間：2025/3/21 编程问答 25 豆豆

生活随笔收集整理的這篇文章主要介紹了【TypeScript】类的使用小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

類

下面看一個使用類的例子：

class Greeter {greeting: string;constructor(message: string) {this.greeting = message;}greet() {return "Hello, " + this.greeting;} }let greeter = new Greeter("world");

如果你使用過C#或Java，你會對這種語法非常熟悉。我們聲明一個 Greeter類。這個類有3個成員：一個叫做 greeting的屬性，一個構造函數和一個 greet方法。

你會注意到，我們在引用任何一個類成員的時候都用了 this。它表示我們訪問的是類的成員。

最后一行，我們使用 new構造了 Greeter類的一個實例。它會調用之前定義的構造函數，創建一個 Greeter類型的新對象，并執行構造函數初始化它。

繼承

在TypeScript里，我們可以使用常用的面向對象模式。基于類的程序設計中一種最基本的模式是允許使用繼承來擴展現有的類。

看下面的例子：

class Animal {move(distanceInMeters: number = 0) {console.log(`Animal moved ${distanceInMeters}m.`);} }class Dog extends Animal {bark() {console.log('Woof! Woof!');} }const dog = new Dog(); dog.bark(); dog.move(10); dog.bark();

這個例子展示了最基本的繼承：類從基類中繼承了屬性和方法。這里， Dog是一個派生類，它派生自 Animal 基類，通過 extends關鍵字。派生類通常被稱作子類，基類通常被稱作超類。

因為 Dog繼承了 Animal的功能，因此我們可以創建一個 Dog的實例，它能夠 bark()和 move()。

下面我們來看個更加復雜的例子。

class Animal {name: string;constructor(theName: string) { this.name = theName; }move(distanceInMeters: number = 0) {console.log(`${this.name} moved ${distanceInMeters}m.`);} }class Snake extends Animal {constructor(name: string) { super(name); }move(distanceInMeters = 5) {console.log("Slithering...");super.move(distanceInMeters);} }class Horse extends Animal {constructor(name: string) { super(name); }move(distanceInMeters = 45) {console.log("Galloping...");super.move(distanceInMeters);} }let sam = new Snake("Sammy the Python"); let tom: Animal = new Horse("Tommy the Palomino");sam.move(); tom.move(34);

這個例子展示了一些上面沒有提到的特性。這一次，我們使用 extends關鍵字創建了 Animal的兩個子類： Horse和 Snake。

與前一個例子的不同點是，派生類包含了一個構造函數，它必須調用 super()，它會執行基類的構造函數。而且，在構造函數里訪問 this的屬性之前，我們一定要調用 super()。這個是TypeScript強制執行的一條重要規則。

這個例子演示了如何在子類里可以重寫父類的方法。 Snake 類和 Horse 類都創建了 move方法，它們重寫了從 Animal 繼承來的 move方法，使得 move方法根據不同的類而具有不同的功能。注意，即使 tom 被聲明為 Animal 類型，但因為它的值是 Horse，調用 tom.move(34)時，它會調用 Horse里重寫的方法：

Slithering... Sammy the Python moved 5m. Galloping... Tommy the Palomino moved 34m.

公共，私有與受保護的修飾符

默認為 public

在上面的例子里，我們可以自由的訪問程序里定義的成員。如果你對其它語言中的類比較了解，就會注意到我們在之前的代碼里并沒有使用 public來做修飾；例如，C#要求必須明確地使用 public指定成員是可見的。在TypeScript里，成員都默認為 public。

你也可以明確的將一個成員標記成 public。我們可以用下面的方式來重寫上面的 Animal類：

class Animal {public name: string;public constructor(theName: string) { this.name = theName; }public move(distanceInMeters: number) {console.log(`${this.name} moved ${distanceInMeters}m.`);} }

理解 private

當成員被標記成 private時，它就不能在聲明它的類的外部訪問。比如：

class Animal {private name: string;constructor(theName: string) { this.name = theName; } }new Animal("Cat").name; // 錯誤: 'name' 是私有的.

TypeScript使用的是結構性類型系統。當我們比較兩種不同的類型時，并不在乎它們從何處而來，如果所有成員的類型都是兼容的，我們就認為它們的類型是兼容的。

然而，當我們比較帶有 private或 protected成員的類型的時候，情況就不同了。如果其中一個類型里包含一個 private成員，那么只有當另外一個類型中也存在這樣一個 private成員，并且它們都是來自同一處聲明時，我們才認為這兩個類型是兼容的。對于 protected成員也使用這個規則。

下面來看一個例子，更好地說明了這一點：

class Animal {private name: string;constructor(theName: string) { this.name = theName; } }class Rhino extends Animal {constructor() { super("Rhino"); } }class Employee {private name: string;constructor(theName: string) { this.name = theName; } }let animal = new Animal("Goat"); let rhino = new Rhino(); let employee = new Employee("Bob");animal = rhino; animal = employee; // 錯誤: Animal 與 Employee 不兼容.

這個例子中有 Animal和 Rhino兩個類， Rhino是 Animal類的子類。還有一個 Employee類，其類型看上去與 Animal是相同的。我們創建了幾個這些類的實例，并相互賦值來看看會發生什么。因為 Animal和 Rhino共享了來自 Animal里的私有成員定義 private name: string，因此它們是兼容的。然而 Employee卻不是這樣。當把 Employee賦值給 Animal的時候，得到一個錯誤，說它們的類型不兼容。盡管 Employee里也有一個私有成員 name，但它明顯不是 Animal里面定義的那個。

理解 protected

protected修飾符與 private修飾符的行為很相似，但有一點不同， protected成員在派生類中仍然可以訪問。例如：

class Person {protected name: string;constructor(name: string) { this.name = name; } }class Employee extends Person {private department: string;constructor(name: string, department: string) {super(name)this.department = department;}public getElevatorPitch() {return `Hello, my name is ${this.name} and I work in ${this.department}.`;} }let howard = new Employee("Howard", "Sales"); console.log(howard.getElevatorPitch()); console.log(howard.name); // 錯誤

注意，我們不能在 Person類外使用 name，但是我們仍然可以通過 Employee類的實例方法訪問，因為 Employee是由 Person派生而來的。

構造函數也可以被標記成 protected。這意味著這個類不能在包含它的類外被實例化，但是能被繼承。比如，

class Person {protected name: string;protected constructor(theName: string) { this.name = theName; } }// Employee 能夠繼承 Person class Employee extends Person {private department: string;constructor(name: string, department: string) {super(name);this.department = department;}public getElevatorPitch() {return `Hello, my name is ${this.name} and I work in ${this.department}.`;} }let howard = new Employee("Howard", "Sales"); let john = new Person("John"); // 錯誤: 'Person' 的構造函數是被保護的.

readonly修飾符

你可以使用 readonly關鍵字將屬性設置為只讀的。只讀屬性必須在聲明時或構造函數里被初始化。

class Octopus {readonly name: string;readonly numberOfLegs: number = 8;constructor (theName: string) {this.name = theName;} } let dad = new Octopus("Man with the 8 strong legs"); dad.name = "Man with the 3-piece suit"; // 錯誤! name 是只讀的.

參數屬性

在上面的例子中，我們必須在Octopus類里定義一個只讀成員 name和一個參數為 theName的構造函數，并且立刻將 theName的值賦給 name，這種情況經常會遇到。參數屬性可以方便地讓我們在一個地方定義并初始化一個成員。下面的例子是對之前 Octopus類的修改版，使用了參數屬性：

class Octopus {readonly numberOfLegs: number = 8;constructor(readonly name: string) {} }

注意看我們是如何舍棄了 theName，僅在構造函數里使用 readonly name: string參數來創建和初始化 name成員。我們把聲明和賦值合并至一處。

參數屬性通過給構造函數參數前面添加一個訪問限定符來聲明。使用 private限定一個參數屬性會聲明并初始化一個私有成員；對于 public和 protected來說也是一樣。

存取器

TypeScript支持通過getters/setters來截取對對象成員的訪問。它能幫助你有效的控制對對象成員的訪問。

下面來看如何把一個簡單的類改寫成使用 get和 set。首先，我們從一個沒有使用存取器的例子開始。

class Employee {fullName: string; }let employee = new Employee(); employee.fullName = "Bob Smith"; if (employee.fullName) {console.log(employee.fullName); }

我們可以隨意的設置 fullName，這是非常方便的，但是這也可能會帶來麻煩。

下面這個版本里，我們先檢查用戶密碼是否正確，然后再允許其修改員工信息。我們把對 fullName的直接訪問改成了可以檢查密碼的 set方法。我們也加了一個 get方法，讓上面的例子仍然可以工作。

我們可以修改一下密碼，來驗證一下存取器是否是工作的。當密碼不對時，會提示我們沒有權限去修改員工。

對于存取器有下面幾點需要注意的：

首先，存取器要求你將編譯器設置為輸出ECMAScript 5或更高。不支持降級到ECMAScript 3。其次，只帶有 get不帶有 set的存取器自動被推斷為 readonly。這在從代碼生成 .d.ts文件時是有幫助的，因為利用這個屬性的用戶會看到不允許夠改變它的值。

靜態屬性

到目前為止，我們只討論了類的實例成員，那些僅當類被實例化的時候才會被初始化的屬性。我們也可以創建類的靜態成員，這些屬性存在于類本身上面而不是類的實例上。在這個例子里，我們使用 static定義 origin，因為它是所有網格都會用到的屬性。每個實例想要訪問這個屬性的時候，都要在 origin前面加上類名。如同在實例屬性上使用 this.前綴來訪問屬性一樣，這里我們使用 Grid.來訪問靜態屬性。

class Grid {static origin = {x: 0, y: 0};calculateDistanceFromOrigin(point: {x: number; y: number;}) {let xDist = (point.x - Grid.origin.x);let yDist = (point.y - Grid.origin.y);return Math.sqrt(xDist * xDist + yDist * yDist) / this.scale;}constructor (public scale: number) { } }let grid1 = new Grid(1.0); // 1x scale let grid2 = new Grid(5.0); // 5x scaleconsole.log(grid1.calculateDistanceFromOrigin({x: 10, y: 10})); console.log(grid2.calculateDistanceFromOrigin({x: 10, y: 10}));

抽象類

抽象類做為其它派生類的基類使用。它們一般不會直接被實例化。不同于接口，抽象類可以包含成員的實現細節。 abstract關鍵字是用于定義抽象類和在抽象類內部定義抽象方法。

abstract class Animal {abstract makeSound(): void;move(): void {console.log('roaming the earch...');} }

抽象類中的抽象方法不包含具體實現并且必須在派生類中實現。抽象方法的語法與接口方法相似。兩者都是定義方法簽名但不包含方法體。然而，抽象方法必須包含 abstract關鍵字并且可以包含訪問修飾符。

abstract class Department {constructor(public name: string) {}printName(): void {console.log('Department name: ' + this.name);}abstract printMeeting(): void; // 必須在派生類中實現 }class AccountingDepartment extends Department {constructor() {super('Accounting and Auditing'); // 在派生類的構造函數中必須調用 super()}printMeeting(): void {console.log('The Accounting Department meets each Monday at 10am.');}generateReports(): void {console.log('Generating accounting reports...');} }let department: Department; // 允許創建一個對抽象類型的引用 department = new Department(); // 錯誤: 不能創建一個抽象類的實例 department = new AccountingDepartment(); // 允許對一個抽象子類進行實例化和賦值 department.printName(); department.printMeeting(); department.generateReports(); // 錯誤: 方法在聲明的抽象類中不存在

高級技巧

構造函數

當你在TypeScript里聲明了一個類的時候，實際上同時聲明了很多東西。首先就是類的實例的類型。

class Greeter {greeting: string;constructor(message: string) {this.greeting = message;}greet() {return "Hello, " + this.greeting;} }let greeter: Greeter; greeter = new Greeter("world"); console.log(greeter.greet());

這里，我們寫了 let greeter: Greeter，意思是 Greeter類的實例的類型是 Greeter。這對于用過其它面向對象語言的程序員來講已經是老習慣了。

我們也創建了一個叫做構造函數的值。這個函數會在我們使用 new創建類實例的時候被調用。下面我們來看看，上面的代碼被編譯成JavaScript后是什么樣子的：

上面的代碼里， let Greeter將被賦值為構造函數。當我們調用 new并執行了這個函數后，便會得到一個類的實例。這個構造函數也包含了類的所有靜態屬性。換個角度說，我們可以認為類具有實例部分與靜態部分這兩個部分。

讓我們稍微改寫一下這個例子，看看它們之間的區別：

class Greeter {static standardGreeting = "Hello, there";greeting: string;greet() {if (this.greeting) {return "Hello, " + this.greeting;}else {return Greeter.standardGreeting;}} }let greeter1: Greeter; greeter1 = new Greeter(); console.log(greeter1.greet());let greeterMaker: typeof Greeter = Greeter; greeterMaker.standardGreeting = "Hey there!";let greeter2: Greeter = new greeterMaker(); console.log(greeter2.greet());

這個例子里， greeter1與之前看到的一樣。我們實例化 Greeter類，并使用這個對象。與我們之前看到的一樣。

再之后，我們直接使用類。我們創建了一個叫做 greeterMaker的變量。這個變量保存了這個類或者說保存了類構造函數。然后我們使用 typeof Greeter，意思是取Greeter類的類型，而不是實例的類型。或者更確切的說，“告訴我 Greeter標識符的類型”，也就是構造函數的類型。這個類型包含了類的所有靜態成員和構造函數。之后，就和前面一樣，我們在 greeterMaker上使用 new，創建 Greeter的實例。

把類當做接口使用

如上一節里所講的，類定義會創建兩個東西：類的實例類型和一個構造函數。因為類可以創建出類型，所以你能夠在允許使用接口的地方使用類。

class Point {x: number;y: number; }interface Point3d extends Point {z: number; }let point3d: Point3d = {x: 1, y: 2, z: 3};

總結

以上是生活随笔為你收集整理的【TypeScript】类的使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

typescript

上一篇：【Py面试题】找到数组或整数列表中连续子
下一篇：【测试面试题】显示输入数字中的最大值