ゼロからはじめたTypeScript【型エイリアスとインターフェイス】

はじめに

TypeScriptの初級者が実務で学んだ事や、公式ドキュメントや技術書でインプットした内容を記事としてアウトプットさせていただいてます。もし、不適切な箇所があればご指摘よろしくお願いします。

型エイリアスについて

型エイリアスと名前のとおり、型に対する別名をつけること

個人的にですが、型エイリアスはインターフェイスと比較すると、柔軟な印象を持っています。

script.js

/**
*   (1) 型エイリアスは型に別名を付与します
**/

type StringOrNumber = string | number;

// const OtherName : string | number;

そして、注意しなければならないことは、型エイリアスを型エイリアスで参照はできないということです。

＊以下のコードは動作しません

script.js

/**
*   (2) 自身を参照することはできない
**/

type NumVal = 1 | 2 | 3 | NumArr;

type NumArr = NumVal[];

// const OtherName = [ 1, 2, 3, [ 1, 2, 3]]

インターフェースについて

インターフェースは、クラスからクラスへ継承することができたり、インターフェースからインターフェースへ継承することができます。

script.js

/**
*   (1) インターフェースは他のインターフェースに extend できます。
**/

export interface HasHomePhoneNumber extends HasPhoneNumber {
    HasHomePhoneNumber : boolean;
}

他にも、ドキュメントのように説明を追加する意図でも使われるようですね。

(引数名: 引数の型名): 戻り値の型名

script.js

interface SendContactMessenges {
    (contact: HasPhoneNumber | HasHomePhoneNumber, message: string): void;
}

/**
*   型エイリアスでの記法
**/

type SendContactMessenges = (
    contact: HasPhoneNumber | HasHomePhoneNumber, 
    message: string
) => void;

new (引数名: 引数の型名): 戻り値の型名; でも使用することができますね！

script.js

interface SendContact {
    new( ...args: any[]): HasEmail | HasPhoneNumber;
}

インターフェースは結合することができます。

script.js

interface PhoneNumberDict {
  home: {
    num: number;
  };
  phone: {
    num: number;
  };
}