JavaScript が不便なら、TypeScript を使えばいいじゃない？

JavaScript で規模の大きい開発をすると、「JavaScript って不便だな…」と思うこと、ありませんか？

1. 実行時エラーのデバッグに時間がかかる
2. コードが読みづらく、修正が大変
3. 静的型付け言語にあるような「型」を使いたい

こんな悩みは、「TypeScript」を使えば改善できますよ！

今回は、TypeScript 未経験でも、JavaScript からスムーズに移行する方法を解説していきます！

JavaScript から TypeScript に移行するメリット

JavaScript から TypeScript へ移行すると、以下のような嬉しいことがあります。

1. 型があるので、実行前にコンパイラがエラーを検知
2. コードの保守性の向上
3. 「変換前の TypeScript」と「変換後の JavaScript」はほぼ同じ
4. 変換するだけなので、実行速度・実行結果に影響がない
5. 他の altJS と違い、移行がしやすい
6. TypeScript の型システムを深く知らなくてもOK

このように、TypeScript は保守性も高く、JavaScript から移行しやすい言語になっています。

次に、TypeScript のコンパイラがどのくらい便利なのか、例をあげて解説していきましょう。

TypeScript のコンパイルエラー例①

例えば、以下のような JavaScript のコードがあったとします。

1var num = 123;
2num = 'message'; // イレギュラーな代入
3num = num * 7;

変数 num を数値「123」で宣言し、文字列「message」を代入してから、「7」を掛けています。

本来は、数値「123」に7を掛けたかったのに、文字列「message」を代入したので、結果は「NaN」となってしまいました。

この例では、わざと途中で文字列を代入しました。

しかし、実際にはもっとわかりにくいところで、このような代入が行われている場合もあるでしょう。

そんな時、JavaScript では間違いに気付きにくいのです。

でも TypeScript なら、コーディング時にエディタがエラーを出してくれるんです！

TypeScript のコンパイルエラー例②

さらに便利なのが、オブジェクトのプロパティを参照する場合です。

例えば、ある API から JSON を取得した時や、標準 API の関数を使用したい時。

JavaScript では、たとえプロパティ名を打ち間違えたとしても、実行前にはエラーになりません。

（実行後にエラーが出るか、undefined になるだけです）

しかし TypeScript なら、プロパティ名を打ち間違えた際は、しっかりエラーを表示してくれます。

こちらは、window.confirm を使いたい時に、間違えて window.conferm とタイプしてしまった例です。

こんな時、TypeScript ではプログラムを実行する前にエラーが表示されます。

（しかも、ご丁寧に「window.confirm の間違いじゃない？」と教えてくれます）

このように、JavaScript では気付きにくいエラーも、TypeScript なら丁寧に教えてくれるのです！

TypeScript の導入・移行方法を解説

それでは実際に、JavaScript から TypeScript へ移行する方法を見ていきましょう！

今回は、複雑な型システムを知らなくても TypeScript に移行できるように、より簡易的な移行方法をご紹介します。

事前にインストールするもの

TypeScript を導入するには、最低限以下のものが必要です。

1. npm(Node Package Manager)をインストール
2. TypeScript をインストール

npm をインストール

npm はコマンドを使ってインストールすることもできますが、今回はインストーラを使います。

node.js 公式ページから、Mac 用のインストーラ（LTS）をダウンロードして起動してください。

インストールが完了したら、以下のコマンドを実行して確認してみましょう。

1$ npm -v

1$ node -v

TypeScript インストール

TypeScript をインストールするには、以下のコマンドを実行してください。

1$ npm install -g TypeScript

これで、事前準備は完了です。

TypeScript を使う最小限の構成

JavaScript のプロジェクトをいきなり TypeScript へ移行するのはさすがに難しいです。

そのため、まずは最小限の構成を作ってみましょう。

TypeScript は、JavaScript へ変換するためのものなので、基本的には2つのディレクトリが必要です。

1. TypeScript ファイルが置かれているディレクトリ（例：src)
2. TypeScript をコンパイルした出力先のディレクトリ（例：dist、build)

以下のような構成を参考にしてください。

1root/ 
2├── tsconfig.json （設定ファイル） 
3├── dist/ （出力先ディレクトリ） 
4├── src/  （変換前ファイルが置かれているディレクトリ） 
5   ├── index.ts 
6   ├── sample.ts

TypeScript を使うには、設定ファイルが必要

TypeScript を使う際、コンパイルのオプションを設定するファイル「tsconfig.json」を作成する必要があります。

最低限、以下のように設定するといいでしょう！

1{
2  "compilerOptions": {
3    "outDir": "./dist",
4    "target": "es5",
5    "module": "es2015",
6    "esModuleInterop": true,
7
8  },
9  "include": [
10    "./src/*/*"
11  ]
12}

outDir と include の設定

ここでの重要な設定項目は「outDir」と「include」です。

詳しい設定方法に関しては、以下のページをご参照ください。

【tsconfig.json｜TypeScript 日本語ハンドブック】
http://js.studio-kingdom.com/typescript/project_configuration/tsconfig_json

tsc コマンドを実行

あとは、プロジェクトルートで tsc コマンドを実行すれば、TypeScript を JavaScript へ変換することができます。

1tsc

これで、変換されたファイルが出力先のディレクトリ（dist）へ出力されるはずです。

tsc: command not foundと表示されてしまう時

「command not found」と表示されてしまう場合、Path が通っていないことがほとんどです。

npm がグローバルにインストールされているディレクトリ内に、tsc が入っているかどうか確認します。

1$ ls `npm bin -g`
2npm tsc node

tsc が入っていることが確認できたら、npm bin -g で表示されたパスを通すようにします。

以下のコマンドで、「.bash_profile」にパスを通しましょう。

1$ echo "export PATH=\$PATH:\`npm bin -g\`" >> ~/.bash_profile
2$ source .bash_profile

これで、tsc コマンドが使えるようになっているはずです。

既存の JavaScript プロジェクトを TypeScript に移行するコツ

既存の JavaScript プロジェクトを TypeScript に移行する場合の、基本的なプロセスは以下の通りです。

1. 拡張子を「.js」から「.ts」に変更する
2. コンパイルエラーを修正する

拡張子を .js から .ts に変更する

js ファイルの拡張子を、全て「.ts」に変更していきます。

rename コマンドを使って一括で変換すると便利です！

1rename 's/.js/.ts/' *.js

コンパイルエラーを修正する

コンパイルエラーの修正は、「プログラムが動くことを優先する」のがポイントです。

any 型を使う

一旦何も考えずに「any型」を使用するようにしましょう。

プロジェクトによっては、JavaScript のコードが実はエラーだらけ…という場合もあるので、「any」型を使えばエラーを抑制することができます。

1var num = 123;
2var str = 'hey';
3
4str = num as any; // any型でキャスト

1function calc(): any {
2    return 7;
3}
4var str = 'hello';
5str = calc(); // calc()がany型になるので、コンパイルは通せる

リアルタイムにエラーを監視する

また、以下のコマンドを使えば、エラーをリアルタイムに監視することも可能です。

1tsc --watch

コンパイルエラーが修正できたら、あとは自分のお好みの設定をしたり、any 型をなるべく減らしたりしましょう。

JavaScript → TypeScript の移行ツール「ts-migrate」を使ってみる

2020年8月に Airbnb がリリースした移行ツール「ts-migrate」を使うのもひとつの手です。

【ts-migrate】
https://www.npmjs.com/package/ts-migrate

ts-migrate をインストール

以下のコマンドでインストールし、実行してみましょう！

1$ npm install --save-dev ts-migrate
2$ npx ts-migrate-full src # 「src」には、変換するJavaScriptが置いてあるディレクトリを指定

実行すると、以下のような注意文が出て来るので確認し、特に問題なければ「y」を入力します。

1Welcome to TS Migrate! :D
2
3This script will migrate a frontend folder to a compiling (or almost compiling) TS project.
4It is recommended that you take the following steps before continuing...
5
61. Make sure you have a clean git slate.
7   Run `git status` to make sure you have no local changes that may get lost.
8   Check in or stash your changes, then re-run this script.
9
102. Check out a new branch for the migration.
11   For example, `git checkout -b v97ug--ts-migrate` if you're migrating several folders or
12   `git checkout -b v97ug--ts-migrate-src` if you're just migrating src.
13
143. Make sure you're on the latest, clean master.
15   `git fetch origin master && git reset --hard origin/master`
16
174. Make sure you have the latest npm modules installed.
18   `npm install` or `yarn install`
19
20If you need help or have feedback, please file an issue on Github!
21Continue? (y/N)

次に、このような表示が出ますが、tsc の読み込み先を変更しないなら、そのまま Enter キーを押しましょう。

1Set a custom path for the TypeScript compiler. (It's an optional step. Skip if you don't need it. Default path is ./node_modules/.bin/tsc.):

あとは、自動的に TypeScript ファイルに変換してくれるはずです。

TypeScript をサポートしているエディタを使用する

TypeScript に移行するなら、強力な補完機能があるエディタを使ったほうが、作業効率が上がります。

TypeScript のコーディングにおすすめなエディタを挙げておきます。

【Visual Studio Code】
https://code.visualstudio.com/

JetBrains 系の IDE なら、「IntelliJ」や「WebStorm」などがおすすめです。

【JetBrains】
https://www.jetbrains.com/ja-jp/

もっと気軽に TypeScript を試してみるには？

ここまで見てきて「実際に TypeScript に触ってみたい！」と思った方もいるのではないでしょうか？

以下のサイトでは、Web 上で気軽に TypeScript を試すことができます。

【TypeScript：TS Playground】
https://www.TypeScriptlang.org/play

エラー表示もちゃんと出るので、TypeScript のコードを試したい時は、すぐに確認できて便利ですよ。

さいごに

この記事では、TypeScript のメリットや、JavaScript から TypeScript へ移行する方法をお伝えしました。

TypeScript は、仕組みを深く知らなくても動かすことができる上、導入コストも低めで、プログラム実行前にエラーチェックもできて便利です。

最初は any 型で乗り切れますが、徐々に TypeScript の機能を知るうちに、その便利さ・柔軟さ・保守性の高さに驚くと思います。

この記事が、TypeScript に触れる第一歩となれば幸いです。

こちらの記事もオススメ！

2020.07.17ライトコード的「やってみた！」シリーズ「やってみた！」を集めました！（株）ライトコードが今まで作ってきた「やってみた！」記事を集めてみました！※作成日が新し...