TypeScriptのInterface②

はじめに

• 前回のTypeScriptのinterfaceの勉強の続き

px-wing.hatenablog.com

readonly修飾子

• implementsしているClass側ではreadonlyは無視することが出来る。

interface Personal {
    readonly name: string;
    age: number;
    greeting(message: string): void;
}

class Engineer implements Personal {
    constructor(public name: string, public age: number, public skill: string) {

    }
    greeting(message: string) {
        console.log('こんにちは！')
    }
}

• implementsしているClass側でもreadonlyを有効にしたい場合、Class側でも指定することでreadonlyが有効になる

interface Personal {
    readonly name: string;
    age: number;
    greeting(message: string): void;
}

class Engineer implements Personal {
    constructor(readonly name: string, public age: number, public skill: string) {

    }
    greeting(message: string) {
        console.log('こんにちは！')
    }
}

extends

• extendsを利用して再利用性をあげる設計をすることが出来る

interface Skill {
    php: boolean,
    ruby: boolean,
}

interface Personal extends Skill {
    readonly name: string;
    age: number;
    greeting(message: string): void;
}

class Engineer implements Personal {
    constructor(public name: string, public age: number, public php: boolean, public ruby: boolean) {

    }
    greeting(message: string) {
        console.log('こんにちは！')
    }
}

• 複数のinterfaceを継承することが可能である

interface Skill {
    php: boolean,
    ruby: boolean,
}

interface StaffLevel {
    level: string
}

interface Personal extends Skill, StaffLevel {
    readonly name: string;
    age: number;
    greeting(message: string): void;
}

関数

• interfaceで関数を定義する場合。interfaceであまり関数を定義しないが、下記のような記述もある

//関数で定義した場合
type incrementNumber = (number1: number, number2: number) => number

//interfaceで定義した場合
interface incrementNumber {
    (number1: number, number2: number): number
}
let incrementNumber: incrementNumber;
incrementNumber = (n1: number, n2: number) => {
    return n1 + n2
}
console.log(incrementNumber(2, 4))

?

• プロパティに?を付与することで継承した先などでそのプロパティを使わなくてもOKにすることが出来る

interface Skill {
    php: boolean,
    ruby: boolean,
    javascript? :boolean
}

interface StaffLevel {
    level: string
}

interface Personal extends Skill, StaffLevel {
    readonly name: string;
    age: number;
    greeting(message: string): void;
}

• メソッドの引数にも?を付与することで引数がなくてもOKにすることができるが、

class Engineer implements Personal {
    constructor(public name: string, public age: number, public php: boolean, public ruby: boolean, public level: string) {

    }
    greeting(message?: string) {
        if (message){
            console.log('こんにちは！')
        }
    }
}