TypeScript類
介紹
傳統的JavaScript程序使用函數和基於原型的繼承來創建可重用的組件,但對於熟悉使用面向對象方式的程序員來講就有些棘手,因爲他們用的是基於類的繼承並且對象是由類構建出來的。 從ECMAScript 2015,也就是ECMAScript 6開始,JavaScript程序員將能夠使用基於類的面向對象的方式。 使用TypeScript,我們允許開發者現在就使用這些特性,並且編譯後的JavaScript可以在所有主流瀏覽器和平臺上運行,而不需要等到下個JavaScript版本。
類的創建:
class Greeter {
greeting: string;
constructor(message: string) {
this.greeting = message;
}
greet() {
return "Hello, " + this.greeting;
}
run():void{
alert(this.greeting);
}
}
let greeter = new Greeter("world");
我們聲明一個 Greeter
類。這個類有3個成員:一個叫做greeting
的屬性,一個構造函數一個run方法和一個 greet
方法。你會注意到,我們在引用任何一個類成員的時候都用了 this
。 它表示我們訪問的是類的成員。
最後一行,我們使用 new
構造了 Greeter
類的一個實例。 它會調用之前定義的構造函數,創建一個 Greeter
類型的新對象,並執行構造函數初始化它。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~此時一位java靚仔路過~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
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();
TypeScript中類的繼承:
類從基類中繼承了屬性和方法。 這裏, Dog
是一個 派生類,它派生自 Animal
基類,通過 extends
關鍵字。 派生類通常被稱作 子類,基類通常被稱作 超類.
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);
與前一個例子的不同點是,派生類包含了一個構造函數,它 必須調用 super()
,它會執行基類的構造函數。 而且,在構造函數裏訪問 this
的屬性之前,我們 一定要調用 super()
。 這個是TypeScript強制執行的一條重要規則。
修飾符
TS中的修飾符分爲四種:
public:
在TS中所有的變量默認爲public,表示公有,本類、子類和類外部都可以訪問。
protected:
保護類型在類的裏面,子類裏可以訪問,在類的外部無法訪問。
class Animal {
protected 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("我的名字是:"+this.name);
super.move(distanceInMeters);
}
}
let sam = new Snake("Sammy");
sam.move();//我的名字是:Sammy
//Sammy moved 5m.
console.log(sam.name); //編譯不通過
private:
只有本類可以訪問,子類,類的外部都不能訪問。
class Animal {
private 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("我的名字是:"+this.name); //編譯不通過
super.move(distanceInMeters);
}
}
let sam = new Snake("Sammy");
sam.move();
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 是隻讀的.
存取器
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
方法,讓上面的例子仍然可以工作。
let passcode = "secret passcode";
class Employee {
private _fullName: string;
get fullName(): string {
return this._fullName;
}
set fullName(newName: string) {
if (passcode && passcode == "secret passcode") {
this._fullName = newName;
}
else {
console.log("Error: Unauthorized update of employee!");
}
}
}
let employee = new Employee();
employee.fullName = "Bob Smith";
if (employee.fullName) {
alert(employee.fullName);
}
我們可以修改一下密碼,來驗證一下存取器是否是工作的。當密碼不對時,會提示我們沒有權限去修改員工。
對於存取器有下面幾點需要注意的:
首先,存取器要求你將編譯器設置爲輸出ECMAScript 5或更高。 不支持降級到ECMAScript 3。 其次,只帶有 get
不帶有 set
的存取器自動被推斷爲 readonly
。 這在從代碼生成 .d.ts
文件時是有幫助的,因爲利用這個屬性的用戶會看到不允許夠改變它的值。
class Animal {
public name: string;
static age :number;//靜態屬性
constructor(cName:string){
this.name = cName;
}
static run = function(){ //靜態方法
console.log("run:"+this.name+"---"+Animal.age);
}
show(){
console.log("show:"+this.name+"---"+Animal.age);
}
}
Animal.age = 100;
let dog = new Animal("dog");
dog.show();
Animal.run();
Animal.age = 55;
Animal.run();
let cat = new Animal("cat");
cat.show();
TS靜態屬性和方法
class Animal {
public name: string ='原始王某';
static age :number;//靜態屬性
protected sex:string;
constructor(cName:string,cSex:string){this.sex = cSex;
this.name = cName;
}
static run = function(){ //靜態方法
console.log("super run:----"+this.name+"---"+Animal.age+"---"+this.sex);
}
show(){
console.log("super show:----"+this.name+"---"+Animal.age+"---"+this.sex);
}
}
class wang extends Animal{
readonly name :string ='wjj';
static age:number =23;
constructor(name:string,sex:string){
super(name,sex);
}
static run =function(){
console.log(this);
console.log(this.name+"--瘋了開始亂跑了"+this.sex+"---"+Animal.age);
}
show(){
console.log(this.name+"--自言自語:"+"---"+Animal.age+"---"+this.sex);
}
}
Animal.age = 1000;
let jj = new Animal("神經小夥","boy");
jj.show();
wang.run();
console.log(wang.age);