基礎からのTypeScript［インターフェース⑵］

外資系企業でソフトウェアエンジニアをしております、タロイモと言います。今日もよろしくお願いします。

TypeScriptの文法について解説しています。
今回は第五回としてTypeScriptのインターフェースを説明していきます。
インターフェースの基礎はここから。

型チェック

型チェックの応用方法を見ていきましょう。

weak type
全てのプロパティが省略可能である型を指定します。
プロパティは一部一致していれば問題ありません。
プロパティを書かなくても良いことに注意です。

interface AreaConfig {
 width?: number;
 height?: number;
}

let A1: AreaConfig = {width: 1};
let A2: AreaConfig = {};
let A3: AreaConfig = {width: 1, radius: 3};
let A4: AreaConfig = {radius: 3}; //エラー

lookup type
指定した型からプロパティの型を取得することができます。

タイプエイリアス（Type Alias）
C言語やSwift言語などにある機能で、データ型に別名をつけることができます。例えばstring型にNameという別名をつけることができます。
type Name = string;
参考

interface User {
 name: string;
 age: number;
}

type UserNametype = User["name"]; //string
type UserAgetype = User["age"]; //number
type UserGendertype = User["gender"]; //エラー

keyof
インターフェースで指定された型のプロパティ名の集合（"A" | "B"）を返します。

interface User {
 name: string;
 age: number;
}

type UserKeys = keyof User;
//上と下は意味が同じ
type Userkeys = "name" | "age";

//第一引数で指定したオブジェクトの第二引数で指定したプロパティを返す。
function getPropety(obj: User, propety: keyof User) {
    return obj[propety];
}

let user = {name: "タロイモ", age: 16};
console.log(getPropety(user, "name")); //タロイモ
console.log(getPropety(user, "age")); //16
console.log(getPropety(user, "gender")); //エラー

mapped type 
インタフェースで定義した型に追い被せて新しい型を作るのに役立ちます。

interface User {
 name: string;
 age: number;
}

type UserKeys = "name" | "newAge";
type NewUser1 = { [K in UserKeys]: string }; //{name: string, newAge: string}
type NewUser2 = { readonly [K2 in keyof User]: string };  //{ readonly name: string, readonly newAge: string }

conditional type
条件によって型を変えることができるようになります。

//型Tに型Uが代入できるなら型A、代入できないなら型B
T extends U ? A : B

以下はTに当てはまる型によって、型が変わる例です。
型Tがstringならstring型、そうでなければnumber型、そうでなければboolean型、、、、のように全ての型を判断します。

type TypeName<T> =
   T extends string ? "string" :
   T extends number ? "number" :
   T extends boolean ? "boolean" :
   T extends undefined ? "undefined" :
   T extends Function ? "function" :
   "object";

type T0 = TypeName<string>;  // "string"
type T1 = TypeName<"a">;  // "string"
type T2 = TypeName<true>;  // "boolean"
type T3 = TypeName<() => void>;  // "function"
type T4 = TypeName<string[]>;  // "object"

少し長くなったのでここまでにします。

今回はインターフェースを応用した型チェックについて紹介しました。

次回はTypeScriptの最終回としてインターフェースを応用したユーティリティ型を紹介します。

今回もご精読ありがとうございました。