TypeScript interfaceの使い方

インターフェイスの使い方

TypeScriptのような静的な型チェッカーは
コードを実行する前に、
バグを見つけるためのツールとして使います。

インターフェイス宣言の目的は、
オブジェクトタイプに名前を付けることです。
オブジェクトタイプは、
プロパティを持つ、データタイプのことです。

他にオブジェクトタイプに名前を付ける方法は、
タイプエイリアスもあります。

データタイプとしてはユニオンタイプがあります。


interface:インタフェース
type:タイプエイリアス
union:ユニオンタイプ


インターフェイスとタイプエイリアスは似ていますが、
違いはインタフェースが拡張可能なことです。
インターフェイスはオブジェクトタイプにのみ使用します。
型を持つオブジェクトの型チェッカーに、
インターフェイスが使われます。

下記の例では、
Courseインターフェイスを使うとき、
プロパティの
id、description、iconUrl　は、
必ず使わなければエラーになります。


interface Course {
    id:number;
    description:string;
    iconUrl: string;
    }


プロパティを必須にしない為には、
？を使います。
iconUrl？: stringのように
書くと必ず使う必要はなくなります。


interface Course {
    id:number;
    description:string;
    iconUrl？: string;
    }


プロパティを読み込み専用にするには、
プロパティの前にreadonlyを付けます。
readonly id:number;の様に書きます。


interface Course {
    readonly id:number;
    description:string;
    iconUrl？: string;
    }



インターフェイスは、
関数、クラスでも大丈夫です。

下記は関数の例です。


interface Hello{
    (source: string): boolean;
}


下記はクラスの例です。


interface SleepTime {
    current: Date;
}


インターフェイスは、
extendsを使い、
拡張することも可能です。


interface Course {
    id:number;
    description:string;
    iconUrl: string;
    }
interface Co extends Course{
    longDescription: string;
    category:string;
    }        


インターフェイスを、
クラスに実装することも出来ます。
実装するには、
implementsを使います。


interface Course {
    id:number;
    description?:string;
    iconUrl?: string;
    }
    
class CourseCard implements Course {
   ...
}   


以上です。