[TypeScript] Type Alias を使って分かりやすいコードを書こう

こんにちは、@yoheiMuneです。
TypeScriptは猛勉強中ですが、なかなか楽しいですね。今日はType Aliasという機能を使って、読みやすいコードを書く方法をブログに書きたいと思います。

目次

タイプエイリアスとは

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

type Name = string

これの何が便利なのかというと、型名を見るだけでコードの意味が推測できやすくなったり、複雑な型（=コールバックなど）を完結に記述できたりします。

Type Aliasを使って分かりやすいコードを書く

ここでは2つの例を紹介したいと思います。

既存の型に別名をつける

例えば以下のようにMapにデータを格納する場合を考えます。

interface Ship {
    id : number
    name : string
}

const map = new Map<number, Ship>()

このコードは十分にシンプルですが、1点分かりづらい点があります。それは「Mapのキーに使うnumber型はどんなデータなのか」ということです。それを補足するために、例えば以下のようなコメントを書く必要があります。

// キー：船ID、バリュー：船
const map = new Map<number, Ship>()

ここでタイプエイリアスの出番です。number型に別名（ここではShipId）をつけてそれを利用することで、補足コメントなしにMapに入るデータが理解できるようになります。

// numberの別名を定義.
type ShipId = number

const map = new Map<ShipId, Ship>()

このように実装することで、Mapのキーが船のIDであることが分かります。このようにType Aliasを使うことで、より理解しやすいコードを書くことができます。

複雑な型の別名を定義する

コールバックを引数に受け取る関数の場合、その引数の型を書くのは少し煩雑です。

function fetch(callback: (ships: Ship[]) => void) {
    // 処理...
}

これを Type Alias で実装すると分かりやすくなります。

// コールバックの型を定義
type CallbackFunction = (ships: Ship[]) => void

function fetch(callback: CallbackFunction) {
    // 処理...
}

関数定義のところがスッキリしましたね。

また、type定義はexportすることもできます。

export type CallbackFunction = (ships: Ship[]) => void

1つの定義を任意の場所で利用できるので、再利用性も高く、わかりやすいコードが書けます。

今回の例を試せる環境

TypeScriptのオンラインエディタで、今回のサンプルコードを動かすことができます。必要あればご参照ください。

参考資料

TypeScriptの Type Alias に関する公式ドキュメントは、こちらです。

http://www.typescriptlang.org/docs/handbook/advanced-types.html#type-aliases

最後に

TypeScriptは、型定義、ジェネリクス、Enum、スコープ定義など様々な機能があって便利ですね。学べば学ぶほど、離れられなくなる気分です。

最後になりますが本ブログでは、フロントエンド、サーバー、Swift、PHP、Node.js、Python、Java、Linux、インフラ、Go言語、機械学習、などの技術トピックを発信をしていきます。「プログラミングで困ったその時の、解決の糸口に！」そんな目標でブログを書き続けています。ぜひ、本ブログのRSSやTwitterをフォローして貰えたら嬉しいです ^ ^

最後までご覧頂きましてありがとうございました！