2018/04/26更新

[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言語、機械学習、などの技術トピックを発信をしていきます。「プログラミングで困ったその時の、解決の糸口に!」そんな目標でブログを書き続けています。ぜひ、本ブログのRSSTwitterをフォローして貰えたら嬉しいです ^ ^

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





こんな記事もいかがですか?

RSS画像

もしご興味をお持ち頂けましたら、ぜひRSSへの登録をお願い致します。