TypeScript 是面向對象的 JavaScript。
類描述了所建立的對象共同的屬性和方法。
TypeScript 支援面向對象的所有特性,比如 類、接口等。
TypeScript 類的定義與執行個體化
TypeScript 類定義方式如下:
class class_name {
// 類作用域
}
執行個體化方式如下:
var object_name = new class_name([ arguments ])
定義類的關鍵字為 class,後面緊跟類名,類可以包含以下幾個子產品(類的資料成員):
- 字段 − 字段是類裡面聲明的變量。字段表示對象的有關資料。
- 構造函數 − 類執行個體化時調用,可以為類的對象配置設定記憶體。
- 方法 − 方法為對象要執行的操作。
通路控制修飾符
TypeScript 中,可以使用通路控制符來保護對類、變量、方法和構造方法的通路。TypeScript 支援 3 種不同的通路權限。
- public(預設) : 公有,可以在任何地方被通路。
- protected : 受保護,可以被其自身以及其子類和父類通路。
- private : 私有,隻能被其定義所在的類通路。
代碼示例:
class Person {
// 字段
private age: number;
// 構造函數
constructor(age:number) {
this.age = age;
}
// 方法
public setAge(age:number):void {this.age = age;};
public getAge():number {return this.age};
}
let personA = new Person(18);
console.log(personA.getAge()); // 18
personA.setAge(27);
console.log(personA.getAge()); //27
static 關鍵字
static 關鍵字用于定義類的資料成員(屬性和方法)為靜态的,靜态成員可以直接通過類名調用。
代碼示例:
class Person {
static uname: string = 'zzh';
static printName(): void {
console.log(this.uname);
}
}
console.log(Person.uname); // zzh
Person.printName(); //zzh
類的繼承
TypeScript 支援繼承類,即我們可以在建立類的時候繼承一個已存在的類,這個已存在的類稱為父類,繼承它的類稱為子類。
類繼承使用關鍵字 extends,子類除了不能繼承父類的私有成員(方法和屬性)和構造函數,其他的都可以繼承。
TypeScript 一次隻能繼承一個類,不支援繼承多個類,但 TypeScript 支援多重繼承(A 繼承 B,B 繼承 C)。
文法格式如下:
class child_class_name extends parent_class_name
繼承類的方法重寫
class Person {
// 字段
private age: number;
// 構造函數
constructor(age:number) {
this.age = age;
}
// 方法
public setAge(age:number):void {this.age = age;};
public getAge():number {return this.age};
}
let personA = new Person(18);
console.log(personA.getAge()); // 18
personA.setAge(27);
console.log(personA.getAge()); //27
// 類的繼承
class Student extends Person {
// 方法重寫
public setAge(age: number): void {
super.setAge(age + 100); // 調用父類的函數;
console.log('重寫父類方法');
}
}
let studentA = new Student(18);
console.log(studentA.getAge()); // 18
studentA.setAge(18);
console.log(studentA.getAge()); // 118
類和接口
interface Car {
name:string;
color: string;
run(): void;
}
class BMW implements Car {
name:string = '寶馬一号';
color:string = '紅色';
run():void {
console.log('寶馬正在路上跑~~~~')
}
}
var bmw1 = new BMW();
console.log(bmw1.name); // 寶馬一号
console.log(bmw1.color); // 紅色
bmw1.run(); // 寶馬正在路上跑~~~~