TypeScript學習（三）—— 類

conqorld發表於2019-04-24
TypeScript

前篇：TypeScript學習（二）—— 函式

js中的類可以看之前寫的：new操作符到底幹了什麼。

接下來說說TypeScript中的class。在TS中class的定義方式和es6中的語法糖class很相似。

定義class

class A {
    name:string //宣告name是string型別,省略了public
    constructor(name:string){
        this.name = name
    }
    run():void {        //定義A.prototype上的run方法
        console.log(this.name)
    }
    getName():string{
        return this.name
    }
    setName(name:string):void{
        this.name = name
    }
}
const a = new A() //沒給預設值不傳引數會報錯
const a = new A('汪汪！') //沒給預設值不傳引數會報錯
a.run() //汪汪！
a.setName('咪咪！')
console.log(a.getName()) //'咪咪'
複製程式碼

class的繼承

class Animal {  //定義父類
    name:string
    constructor(name:string){
        this.name = name
    }
    sayName():void{
        console.log(`i am ${this.name}`)
    }
}
class Cat extends Animal{ //定義個繼承父類的子類
    call:string
    constructor(name:string, call:string = 'mimimi！'){  //如果和Animal中建構函式傳入的name型別不同就會報錯
        super(name)         //作用是把this傳到父類,呼叫父類建構函式
        this.call = call
    }
    sayCall():void{
        console.log(`我是${this.name},我的叫聲是:${this.call}`)
    }
}
const cat = new Cat('咪咪', '喵喵')
cat.sayName() //i am 咪咪
cat.sayCall() //我是咪咪,我的叫聲是:喵喵
複製程式碼

類裡面的修飾符

public：公有屬性，在類裡面、子類、類外面都可以訪問

protected：保護型別，在類裡面、子類裡面可以訪問，在類外部沒法訪問

private：私有屬性，在類裡面可以訪問，子類和類外部無法訪問

如果不寫預設為public。（其實只是程式碼檢測會報錯，編譯成es5後都可以訪問得到）

//public
class Animal {
    public name:string
...
    sayName():void{
        console.log(`i am ${this.name}`) //類裡面可以訪問
    }
}
class Cat extends Animal{
...
    sayCall():void{
        console.log(`我是${this.name},我的叫聲是:${this.call}`) //子類中可以訪問
    }
}
const animal = new Animal('dog')
console.log(animal.name) //類外面可以訪問

//protected
class Animal {
    protected name:string
...
    sayName():void{
        console.log(`i am ${this.name}`) //類裡面可以訪問
    }
}
class Cat extends Animal{
...
    sayCall():void{
        console.log(`我是${this.name},我的叫聲是:${this.call}`) //子類中可以訪問
    }
}
const animal = new Animal('dog')
console.log(animal.name) //編譯器報錯，類外面訪問不到

//private
class Animal {
    private name:string
...
    sayName():void{
        console.log(`i am ${this.name}`) //類裡面可以訪問
    }
}
class Cat extends Animal{
...
    sayCall():void{
        console.log(`我是${this.name},我的叫聲是:${this.call}`) //編譯器報錯，子類中訪問不到
    }
}
const animal = new Animal('dog')
console.log(animal.name) //編譯器報錯，類外面訪問不到
複製程式碼

類中的靜態屬性和靜態方法

class Animal {
...
    static SF():void{ //定義靜態方法
        console.log(this.SP)
    }
    static SP:string = '我是靜態屬性'  //定義靜態屬性，不建議定義靜態屬性
}
Animal.SF() // =》我是靜態屬性  靜態方法是在類上呼叫的方法，方法中的this指向Animal本身
console.log(Animal.SP) // =》我是靜態屬性
複製程式碼

相關文章