第一回 Typescriptでデザインパターン: Adapter Pattern

Typescriptでデザインパターンをやる。
どうせなのでGoF網羅しよう。interpreter patternはちょっと無理かもしれませんが。

Adapter Patternとは?

Adapter パターン

Adapter パターンを用いると、既存のクラスに対して修正を加えることなく、インタフェースを変更することができる。Adapter パターンを実現するための手法として継承を利用した手法と委譲を利用した手法が存在する。

だそうです。

Adapter Patternを実装するには?

Adapter Patternはinterfaceがあればやれるはず、Typescriptにinterfaceはあるか？

ある。

interface Logger{
 log(msg: string): void;
}

こういう感じで書ける。interfaceはtscでコンパイルする時にだけ使われる。
interfaceをimplementsしているclassがintefaceを満たすかチェックしたり、interfaceを取り扱っている部分での型チェックなどを行う。コンパイル後のjsにはinterfaceは出力されない。javascriptにはinterfaceに準ずる機能はないので当然かもしれない。

このintefaceを使えばAdapter Patternを実装する事が出来そうだ。

実装

javascriptでログ出力を行う方法はパッと以下の3つが考えられる。

アラートで出す

コンソールに出す

ログ用要素に出す

それぞれで出力の仕方が異なるのでAdapter Patternを使ってログ出力のインタフェースを統一する。

実装は以下。intefaceとしてLoggerを定義し、それぞれの出力方法のAdapterを作る。ぞれぞれのLoggerはLogAdapterFactoryを通して受け取る。LogAdapterFactoryにはLOGGER_TYPEを渡す。Typescriptにenumはないので擬似でLOGGER_TYPEというのを作った。内部的には唯のstringなのでちょっとあれだけど知らん。

使う

Loggerを使ってみる。LogAdapterFactory.createLogger(LOGGER_TYPE.DISPLAY);のLOGGER_TYPEを変えればそれぞれの出力に切り替わる。

終わりに

javascriptでこれを実現するコードを書くのは別に難しくない、けど、今までそういう事をしようとした場合「js的にこうでいいかなぁ？」と毎回悩んでいた。Typescriptだとこの辺りをすっ飛ばして設計に専念しやすいと感じる。

Typescriptええで