備忘録として TypeScriptのインプットをまとめていく.

Objectの構造を定義するもの

type alias, interface, class ってやつがある。

とりあえず Interface を勉強した

Interface

Property

interface Item {
    name: string;
    price: number;
}

Customer の Interface は name と age のプロパティが定義されている。
Interfaceでプロパティを定義すると、そのInterfaceを実装するオブジェクトは定義されたプロパティを持たなければならない、という制約を掛ける事ができる。

const pencil: Item = {
    name: "鉛筆",
    price: 110
}
// price か name のどちらかが制限されてなければエラーになる

Interface は型なので、別のInterfaceから参照する事もできる

interface SaleRow {
    item: Item
    total: number
}

method

また、メソッドの構造も定義できる。ただし、メソッドの実装を定義するものではない。

interface Item {
    name: string;
    price: number;
    getDiscountPrice(discountRate: number): number;
}

ここで以下のように認識しておくと良い

パラメータの型さえ同じなら、実は discountRate の部分を discountPercentage とかに変えても動く
でも、メソッド名を変更したり、パラメータの型や戻り値の型を変えるとコンパイルは通らない
上記の事もあって、Interfaceにてメソッドを定義する場合は、パラメータ名を定義しない事も慣習としてある。

interface Item {
    name: string;
    price: number;
    getDiscountPrice(number): number;
}

Option

interface Item {
    name: string;
    price: number;
    image?: string;
    getDiscountPrice(discountRate: number): number;
}

上記のように ? をつけて宣言する事で、Optionalの型を定義できる

Readonly

プロパティの前に readonly キーワードを使用する事で、最初に設定された後にプロパティが更新できないようにする.

Extend

既にあるInterfaceについてそれを拡張して新しいInterfaceを再定義する事もできる。

interface Item {
    name: string;
    price: number;
}

interface Item {
    tags: string[];
}

// Item は name, price, tags をプロパティに持つInterfaceとなる

interface Item {
    name: string;
    price: number;
}

interface SpecialItem extends Item {
    specialPrice: number;
}

// SpecialItem は name, price, specialPrice をプロパティに持つInterfaceとなる

Typescript 奮闘記 No.01 『Interface編』