TypeScriptのClass ② - フリーランス　技術調査ブログ

はじめに

TypeScriptでClassを勉強した続きを行う。前回の内容は下記となります。 px-wing.hatenablog.com

readonly修飾子

class内・外両方からも書き込みができない。
ただしconstructorの内部では変更が可能である

    constructor(public readonly name: string, private age: number) {
        this.name = "Yamada Hanako"
    }

extendsを使用する

es6の機能でありTypescript特有のものではない
下記のコードのように継承することができる
Personのageにアクセスするとerror TS2341: Property 'age' is private and only accessible within class 'Person'. というエラーが発生してアクセスすることができなかった。理由はprivateで指定した値は子クラスでは利用できない。子クラスでも利用したい場合、protected修飾子を利用する

class Person {

    constructor(public readonly name: string, private age: number) {
    }

    incrmentAge() {
        this.age += 1
    }

    // Classメソッド
    greeting(this: Person) {
        console.log(`こんんちは、わたしのなまえは ${this.name}. ${this.age}才です `)
    }
}

class Engineer extends Person {
    constructor(name: string, age: number, public skill: string) {
        super(name, age)
    }
    greeting(this: Engineer,) {
        console.log(`${this.name} ${this.skill} `)
    }
}

const user = new Engineer('Yamada Taro', 42, 'PHP')
user.greeting()

prtectedを使用する

protectedを使用することで先ほどのエラーは解消され、親クラスの値を子クラスでも利用できるようになる。
protectedはpriaveteと同様にClassの外から利用することが出来ない。

class Person {

    constructor(public readonly name: string, protected age: number) {
    }

    incrmentAge() {
        this.age += 1
    }

    // Classメソッド
    greeting(this: Person) {
        console.log(`こんんちは、わたしのなまえは ${this.name}. ${this.age}才です `)
    }
}

class Engineer extends Person {
    constructor(name: string, age: number, public skill: string) {
        super(name, age)
    }
    greeting(this: Engineer,) {
        console.log(`${this.name} ${this.age} ${this.skill} `)
    }
}

const user = new Engineer('Yamada Taro', 42, 'PHP')
user.greeting()

getter / setter

typescript特有のメソッドではなくES6にある機能
何かの値を設定するときにsetterメソッドを利用する。setterは経由してClassのプライベート変数に値を変更することが出来る。
何かの値を取得するときにgetterメソッドを利用する。getterは何か値を返す必要がある

class Engineer extends Person {
    get team(): string {
        if (!this._team) {
            throw new Error('There is no team1')
        }
        return 'dev'
    }
    set team(value) {
        if (!value) {
            throw new Error('There is no team2')
        }
        this._team = value
    }
    constructor(name: string, age: number, public skill: string, private _team: string) {
        super(name, age)
    }
    greeting(this: Engineer,) {
        console.log(`${this.name} ${this.age} ${this.skill} ${this._team} `)
    }
}

const user = new Engineer('Yamada Taro', 42, 'PHP', '営業')
user.team = '開発'

static

インスタンスを作らずにClassを作成することが出来る
下記のサンプルのようにnewをしなくてもstaticの処理を実行することができる

class Person {
    static companies = 'TEST'
    static isAdult(age: number) {
        return age > 20 ? true : false
    }
    constructor(public readonly name: string, protected age: number) {
    }

    incrmentAge() {
        this.age += 1
    }

    // Classメソッド
    greeting(this: Person) {
        console.log(`こんんちは、わたしのなまえは ${this.name}. ${this.age}才です `)
    }
}

console.log(Person.companies)
console.log(Person.isAdult(21))

実行結果

# node class.js
TEST
true

abstractクラス

継承のために使用するためのクラス
abstractクラスはインスタンスを生成することができない。（new Person()と指定できない）

abstract class Person {
    static companies = 'TEST'
    static isAdult(age: number) {
        return age > 20 ? true : false
    }
    constructor(public readonly name: string, protected age: number) {
    }

    incrmentAge() {
        this.age += 1
    }

    // Classメソッド
    greeting(this: Person) {
        console.log(`こんんちは、わたしのなまえは ${this.name}. ${this.age}才です `)
        this.detailInfomation()
    }

    abstract detailInfomation(): void
}

console.log(Person.companies)
console.log(Person.isAdult(21))


class Engineer extends Person {
    detailInfomation() {
        console.log('call method detailInfomation!')
    }
    get team(): string {
        if (!this._team) {
            throw new Error('There is no team1')
        }
        return 'dev'
    }
    set team(value) {
        if (!value) {
            throw new Error('There is no team2')
        }
        this._team = value
    }
    constructor(name: string, age: number, public skill: string, private _team: string) {
        super(name, age)
    }

}

const user = new Engineer('Yamada Taro', 42, 'PHP', '営業')
user.greeting()

実行結果

TEST
true
こんんちは、わたしのなまえは Yamada Taro. 42才です 
call method detailInfomation!