7839

雑草魂エンジニアブログ

【TS】TypeScriptのすすめ

技術 TypeScript

遅ればせながら、最近やっと Babel から卒業して TypeScript に入門した私ですが、便利だなぁーと思っている。というか、TypeScript を理解しておくことで、めっちゃ効率が上がっている気がする。まだまだ初学者の私であるが、私のように TypeScript に手を出したいと思っていても、まだ手を出せていない方に向けて、TypeScript のすすめを参考に書いてみる。

TypeScriptとは

www.typescriptlang.org

TypeScript は、「JavaScript にコンパイルされる、静的型システムのあるJavaScriptの上位集合（上位互換）」である。すなわち、TypeScript は JavaScript にコンパイルされてからコードが実行される。そのため、JavaScript が動く環境であれば、TypeScript のコードは実行することができると言える。TypeScript は、JavaScript を用いている様々なプロジェクトに導入することが可能である。

大きな特徴として、以下の 2点が挙げられる

  1. 静的型システムがある

    • コードの品質向上
    • 可読性の向上

  2. JavaScriptの上位集合

    • 段階的な導入が可能

1. 静的型システムがある

TypeScriptは「型をつけられるJavaScript」である。「静的型付け言語」という種別にあたる。同じ種別の言語としては、C、C++、Java、Scala、Swiftなどが挙げられる。変数や定数、関数の引数や戻り値などが「どの型なのか」を定義する必要がある。静的型付けが必要な理由は、実行する前にネイティブにコンパイルするには必須であるということが挙げられる。（反対に、動的型付け言語には、JavaScript、PHP、Ruby、Pythonなどがあり、実行時に型が自動的に決定する。コードを書く際に、型を指定する必要がない分、手軽に書くことができるメリットがある。ただし、実行時にしかエラーが判明しないため、考え無しに実装すると実行時に思った通り動作しなくなり、バグの究明にかなり時間がかかることがある。）

TypeScriptは、コーディングの生産性に対する影響をなるべく小さく抑えながら型の安全性を提供するために、可能な限り、型推論を行う。型推論とは、TypeScriptが、ソースコードを解析し、そのコードの流れから、変数や関数などの型を推測してくれる仕組みのことである。 TypeScript Deep Dive 日本語版

2. JavaScriptの上位集合

f:id:serip39:20200722072613p:plain

図にすると、上記のようになる。すなわち、TypeScript は、JavaScript のすべての機能を使うことができ、JavaScript に新しい機能（静的型システムや JavaScript の将来のバージョンで計画されている機能）を追加したものであるといえる。そのため、実際には、型を利用するかどうかは、完全に任意（オプション）である、と言える。既存の .jsファイルを TypeScriptの拡張子である .ts に変更してコンパイルしても、TypeScriptのコンパイラは、元の JavaScript ファイルと同じ有効な .js を出力する。（コンパイル時に、型システムでエラーを検知することはあるが、有効なJavaScriptファイルを生成することができる。）ゆえに、既存の JavaScript のプロジェクトにおいては、TypeScript を途中からでも段階的に導入していくことが可能である。そのため、あまり気負わずに導入ができると言える。

TypeScriptのメリット

TypeScript を導入してみて感じたメリットとして、以下の 3点が挙げられる。

  1. コードの品質・可読性の向上
  2. Linterとしてのエラー検知
  3. ES5へのコンパイラ

1. コードの品質・可読性の向上

型システムのお陰で、コードの品質・可読性の向上した。チーム開発である場合には特に、この型定義がすごく有用である。コードを書く量が多くなってしまうというデメリットはあるが、それ以上に得られるこの安心感と可読性の良さは比べ物にならないと感じている。確かに個人開発や JSDoc などに従い、コメントでしっかりと書いているから問題ないと思われるかもしれないが、ヒューマンエラーを自動では検出することができない。TypeScript の型推論でヒューマンエラーさえも検出してくれるので、今は理解しているコードも、数年後に見返した時にすぐに理解できるとは限らない。

型は、それ自体が、完璧なドキュメントです。関数のシグネチャは定理であり、関数の本体は証明です。 TypeScript Deep Dive 日本語版

「型は完璧なドキュメントです。」このようにハッキリと言い切っている感じがステキだと感じる。ただ、実際にその通りであると実感することができる。TypeScript の型定義をみることで、公式ドキュメントを読んでいるかのように使い方がわかる。

ここで、ひとつ例をあげて、型でどこまで確認できるのか、見てみる。
非同期通信でよく使っている、「axios」というライブラリがある。

axios.post(url: "http://api.test.com", data: { ... })

上記のように、axiosで何らかのデータをPOSTしようとした場合に、header などの設定をどのように書けばいいか忘れたとする。もちろん公式ドキュメントをみてもいいが、Visual Studio Code でコーディングをしている方であれば、importしたモジュール名の名前の部分で右クリック→「Go to Definition」を選択することで、index.d.ts という型定義のファイルを確認することができる。

f:id:serip39:20200722044640p:plain

以下は、一部抜粋であるが、axiosでPOSTメソッドがどのような型定義がされているか、確認することができる。headerの設定に関しては、引数のconfigの中に定義すればいいことがわかる。詳細な型定義の方法の説明は今回は省略するが、このように型定義をみるだけで、関数の中身の処理まではわからないにしても、使い方を読み解くことができる。処理内容に関しては、メソッド名で明示的に示す必要がある。

~~~~
post<T = any, R = AxiosResponse<T>>(url: string, data?: any, config?: AxiosRequestConfig): Promise<R>;
~~~~
export interface AxiosRequestConfig {
  url?: string;
  method?: Method;
  baseURL?: string;
  transformRequest?: AxiosTransformer | AxiosTransformer[];
  transformResponse?: AxiosTransformer | AxiosTransformer[];
  headers?: any;
  params?: any;
  ~~~
}

2. Linterとしてのエラー検知

こちらも、型推論がもたらしてくれる恩恵に他ならない。1のメリットとほぼ同義であるが、型推論が自動的にエラーを検知してくれるのである。Linterとは、「コードを実行する前に、コードが正しいかを検証するツール」を指し、TypeScript では実行前のコンパイル時に必ずエラー検知をしてくれる。また、エディタのプラグインや ESLint と組み合わせることで、コンパイル前のコードを書いている途中でエラーを検出してくれる。この機能のお陰で、開発スピードを格段に早めることができる。（正直、TypeScript に慣れるまでは、このエラー検知のせいで、型推論のエラー解消をするためにかなりの時間を取られてしまう。本末転倒な気もするが、コードの品質担保のために、必要な学習コストと考えるべきであると考えている。）もちろんESLintだけでも、エラー検出だけであれば可能であるが、TypeScript の型推論と組み合わせることでより強固なエラー検出ができるようになり、コードの品質担保が可能となる。

エディタのTypeScriptサポート情報は以下の通りである。 TypeScript Editor Support · microsoft/TypeScript Wiki · GitHub

Visual Studio Code, a lightweight cross-platform editor, comes with TypeScript support built in.

3. ES5へのコンパイラ

JavaScriptは毎年バージョンアップが行われている。現在、ほとんどのブラウザで対応しているバージョンがECMAScript2015（ES6）である。しかし、古いブラウザではECMAScript2015（ES6）の構文で書いたJavaScriptが正常に動作しません。そこで、TypeScriptのコンパイル機能が役立つのである。もちろん Babel を用いることでトランスパイルすることもできるが、TypeScript にも同様の機能が搭載されている。JavaScript にコンパイルするので当たり前と思うかもしれないが、この機能はまさに欠かせない機能であり、メリットと言える気がしている。

ES6の対応表は以下を参照してみてください。

kangax.github.io

TypeScript 初学者にオススメのドキュメント

TypeScript は意外に学習コストがかかる気がしている。。。段階的に導入が可能とはいえ、慣れるまでにかなり時間が必要が気がしている。私自身もその一人である。。。これも、JavaScript の書きやすいコードに慣れていた弊害ともいうべきなのであろうか。。。

また、TypeScript に関して、あまり日本語の文献がまだ多くないように感じる。そこで、オススメのリンクを紹介しておく。

typescript-jp.gitbook.io

book.yyts.org

www.udemy.com

まとめ

今回は、TypeScript の概要およびメリットをまとめてみた。TypeScript を少しでもやってみようかなぁと思ってくれる人が一人でも増えたら嬉しい限りです。

それでは、ステキな開発ライフを。