目次

はじめに

これまでいくつかの記事でTypescriptを使用してきました。しかしまだTypescript自体を紹介したことはなかったで、今回はなぜピュアなJavascriptではなくTypescriptで実装したほうがいいのか紹介していきます。

Typescript

TypescriptはaltJSと呼ばれるJavascriptの派生系のようなものです。代表的なaltJSとしてはTypescript,Coffeescript、Babelのようなものがあります。その中でも最も人気のある言語がマイクロソフト社の開発したTypescriptです。

altJSはコードを通常のJSへ変換(トランスパイル)して構築し直すことで動くようなコードになります。なぜそのような面倒くさいことをしなければならないのでしょうか?

それはaltJSを利用することで、より爆速で効率的に開発をできるからです。

今回はそんなTypescriptのメリットを紹介していきます。

Typescriptの特徴

Typescriptには主に2つの特徴があります。ここからはその特徴について簡単に説明をしていきましょう

静的型付が可能

まず一つ目としては静的型付ができることです。そもそもJavacriptでは変数がどのような型であろうと勝手に動き出します。これはかなり厄介です。例をあげてみます。

アニメーションでモーダルのオープンやクローズを実装します。最初にモーダルの開閉に関するisOpenという変数を定義しました。デフォルトではfalseを代入します。

true/falseの型はboolean型なので変数の横に「この変数はboolean型ですよ」という印を記述しました。

let isOpen: boolean = false;

モーダルを開くボタンボタンを押した際にisOpenの値を変更します。今回は2パターン用意しました。1つ目は通常通りにtrueへ変更するパターン。もう一つは間違えて1/0でオンオフを切り替えようとしたときです。

isOpen = ture; //OK
isOpen = 1; //型エラー

仮にJavascriptで下のパターン書いて間違えたとしましょう。以下のコードを見て下さい。今モーダルが閉じていたら開き、開いていたら閉じるという式を書きました。

当然これではモーダルは動作しないですし、エラーも出ないのでなぜ動かないのかが分かりません。

こんなミスは考えるだけ時間の無駄です。

isOpen === true ? closeModal() : openModal();

これをTypescriptで書いておくとisOpenに1を入れた式を書いた時点で型エラーが発生します。こういったミスを事前に防ぐことができるのです。

この機能はコードの量が多くなり関数が増えたり複雑になったときより効力を発揮できます。

強力な入力補完

これはTypescriptで特に強力な機能となります。Typescriptには入力補完機能がついています。特にVSコードを使用されている方であれば簡単に入力補完の恩恵を受けることができます。

それでは例をあげてみましょう。フルネームを取得するための関数を書きたいとします。ちょっと途中まで書いてみました。

以下で利用しているinterfaceというのはオブジェクト形式で入っているデータに対して型の定義付けするためのものです。以下ではfirstNameとlastNameにそれぞれstringという文字列型を割り当てています。

そしてgetFullNameの関数ですがdataという引数の中にfirstNameとlastNameが入っていると仮定します。dataに対してNameというinterfaceを割り当てます。そして通常のES6のアロー関数でgetFullNameを定義します。dataという引数の括弧の外側に書かれているのは返ってきた値の型を定義するためのものです。

フルネームを取得したいので文字列型を宣言します。ちなみに文字列を返さない関数の定義はvoidという型になります

interface Name {
    firstName: string;
    lastName: string;
}

const getFullName = (data: Name): string => data.

上記ではdata.という中途半端なところで止めて、一瞬待つかctrl+spaceキーを押すことでfirstNameとlastNameというサジェストが表示されます。これで関数の続きを書いていきましょう。

interface Name {
    firstName: string;
    lastName: string;
}

const getFullName = (data: Name): string => data.lastName + data.firstName

コード補完が効いて簡単にコードを書くことができました。コピペする元の変数を探したり、コピペする面倒な作業は全てスキップしてしまいましょう。リファクタリングをするのも非常に簡単です。

ただこれ一回だけだとinterfaceを書く手間が増えて面倒くさくなっただけです。

それではどのように利用すればいいのか。

型は通常別の型ファイルに分けてしまい、何回も使いまわしたり型を拡張することで効力を発揮してくれます(今回は細かい説明を省きます)。そうすることで変数をいちいちコピペすることなく、ガンガン入力補完を利用することが可能になるのです。

これが皆さんのTypescriptで一番便利だと感じられている機能になります。

まとめ

今回はTypescriptのメリットを簡単に紹介しました。これをきっかけにJavascriptをある程度書ける方はJavascriptからTypescriptへ乗り換えてみようかなと少しでも思っていただければ幸いです。