#1 TypeScriptで学ぶ環境構築の基本

TypeScriptは、JavaScriptに「型」という仕組みを追加した言語です。JavaScriptのコードをそのまま活かしつつ、より安全にプログラムを書けることから、近年人気が高まっています。この記事では、TypeScriptを学ぶための環境構築の手順を、つまずきやすいポイントやよくあるエラーへの対処法も含めて、できるだけ具体的に解説します。

TypeScriptはJavaScriptに変換されて動く

TypeScriptの大きな特徴は、書いたコードがそのまま実行されるわけではないという点です。TypeScriptのコードは、一度JavaScriptに変換(コンパイル、あるいは「トランスパイル」と呼ばれます)されてから実行されます。そのため、環境構築ではまず土台となるJavaScriptの実行環境であるNode.jsが必要になります。

「型をつけて書いたコードが、最終的には型のないJavaScriptになって動く」という順番をイメージできると、この後に出てくる設定ファイルやコマンドの意味がぐっと理解しやすくなります。

Node.jsとTypeScriptのインストール

公式サイト(nodejs.org)からNode.jsをインストールしたら、ターミナルで次のコマンドを実行し、TypeScript本体をインストールします。

npm install -g typescript

インストールが完了したか確認するには、次のコマンドを使います。

tsc --version

ここまでの手順はシンプルですが、実際に手を動かすと最初の壁にぶつかる人が少なくありません。次の章で、よく遭遇するエラーとその対処法をまとめて紹介します。

よくあるエラーと対処法

環境構築の段階でつまずくと、「自分のやり方が間違っているのでは」と不安になりがちですが、以下のエラーはTypeScript学習者のほとんどが一度は目にするものです。落ち着いて一つずつ確認していきましょう。

「'tsc' は、内部コマンドまたは外部コマンド...として認識されていません」

Windowsでtsc --versionを打ったときに出るこのエラーは、TypeScriptがインストールされていない、またはNode.jsのインストール後にターミナルを再起動していないことが原因のほとんどです。macやLinuxでは「command not found: tsc」という似たメッセージになります。まずnpm install -g typescriptを実行し直し、それでも直らない場合はターミナル(コマンドプロンプトやVS Codeのターミナル)を一度閉じて開き直してみてください。インストール直後はPATHという「コマンドの置き場所リスト」が反映されていないことがあります。

「Cannot find module 'xxx' or its corresponding type declarations」

外部のライブラリを読み込もうとしたときに出るエラーです。JavaScriptのライブラリの多くは型情報を持っていないため、TypeScript側に「このライブラリの形はこうですよ」と教える追加パッケージが必要になることがあります。多くの場合、npm install --save-dev @types/ライブラリ名のようなコマンドで型定義を追加すると解決します。

「Cannot find name 'process'」「Cannot find name 'require'」

Node.js特有の機能を使おうとしたときに出るエラーです。これはコードの書き方が間違っているのではなく、Node.jsの型情報(@types/node)がプロジェクトに入っていないために起こります。npm install --save-dev @types/nodeを実行し、後述のtsconfig.jsonを見直すことで解消できます。

tscを実行したのに古い内容のまま実行されてしまう

「.tsファイルを直したのに、node コマンドで実行すると変更が反映されていない」という相談もよくあります。これはほぼ確実に、変換(コンパイル)をし忘れているケースです。TypeScriptは.tsファイルを保存しただけでは変換されず、tscコマンドを実行して初めて.jsファイルが更新されます。毎回手動で打つのが面倒に感じたら、tsc -w(watchモード)を使うと、ファイルを保存するたびに自動で変換してくれるようになります。

「Object is possibly 'undefined'」のような型エラー

これは環境構築のミスではなく、TypeScriptが正しく機能している証拠でもあります。「値が存在しないかもしれない場所を、実行前に指摘してくれている」状態です。最初は煩わしく感じますが、実行時に突然エラーで落ちるバグを未然に防いでくれていると捉えると、少し前向きに受け止められるはずです。

ファイルを変換して実行する

拡張子`.ts`のファイルを用意したら、次のコマンドでJavaScriptに変換します。

tsc ファイル名.ts

同じ名前の`.js`ファイルが生成されるので、それをNode.jsで実行します。

node ファイル名.js

なお、学習の初期段階では「毎回この2ステップを踏むのが面倒」と感じることが多いです。慣れてきたらts-nodeという、変換と実行をまとめて行ってくれるツールを試してみるのもおすすめです(まずは基本の2ステップに慣れてからで十分です)。

tsconfig.jsonという設定ファイル

プロジェクトが大きくなると、変換のルールを毎回コマンドで指定するのは大変です。そこで`tsconfig.json`という設定ファイルを用意し、変換対象のファイルや出力先などをまとめて管理します。`tsc --init`というコマンドを実行すると、雛形を自動生成できます。

この設定ファイルまわりでも、初心者がよく戸惑う点があります。たとえば`tsconfig.json`の中の"strict": trueという項目を有効にすると、型チェックが一気に厳しくなり、それまでエラーが出ていなかったコードに急に赤い波線が大量に出ることがあります。これは設定ミスではなく「厳格さのレベルを上げた」ことによる自然な変化です。慣れないうちは戸惑うかもしれませんが、strictモードは長期的にはバグを減らしてくれるため、可能であれば有効にしたまま少しずつ慣れていくことをおすすめします。また、`"outDir"`(変換後のファイルの出力先)の設定を忘れると、.tsファイルと同じ場所に大量の.jsファイルが生成されて散らかることがあるので、あわせて確認しておくとよいでしょう。

つまずきやすいポイント・よくある質問(FAQ)

Q. TypeScriptとJavaScript、結局どちらを先に学ぶべき?

TypeScriptはJavaScriptの上に成り立っている言語なので、変数・関数・配列・オブジェクトといったJavaScriptの基本文法を一通り触ったことがある状態で始めると理解がスムーズです。「JavaScriptを完璧にマスターしてから」である必要はなく、基本文法を触った経験があれば、TypeScript特有の「型」の部分に集中して学べます。

Q. エディタは何を使えばいい?

TypeScriptを書くなら、Visual Studio Code(VS Code)がよく使われています。TypeScript自体がMicrosoft主導で開発されていることもあり、型エラーの表示や自動補完との相性が良いためです。もちろん他のエディタでも学習は可能なので、すでに使い慣れたエディタがある場合は無理に乗り換える必要はありません。

Q. なぜ型を書くだけで面倒なエラーが増えるように感じるの?

型を導入すると、これまで実行するまで気づけなかった「値がないかもしれない」「想定と違う形のデータが来るかもしれない」といった問題を、実行前の段階で指摘してくれるようになります。エラーの数が増えたように見えても、それは新しく不具合が生まれたのではなく、隠れていた不具合が見える化されただけ、というケースがほとんどです。

Q. JavaScriptの資産(既存コード)はどうなるの?

TypeScriptは基本的にJavaScriptを拡張したものなので、既存の.jsファイルの拡張子を.tsに変えるところから少しずつ型を足していく、という移行の仕方もよく行われています。最初からすべてに型をつけようとせず、書ける箇所から少しずつ慣れていくという進め方で問題ありません。

他の言語と比べた環境構築の考え方

環境構築の感覚は言語によって結構違います。たとえばPythonやRubyのようなインタプリタ言語は、書いたコードを変換せずにそのまま実行できるのが特徴です。一方でTypeScriptは、「型付きのコードを書く→変換する→変換後のJavaScriptを実行する」という一手間が加わります。これは面倒に見える反面、変換のタイミングでミスに気づけるという利点にもつながっています。また、Javaのように専用の実行環境(JVM)を新たに用意する言語とは違い、TypeScriptは最終的に既存のJavaScript実行環境(ブラウザやNode.js)にそのまま乗せられる点も特徴です。どの言語の環境構築が優れている・劣っているということではなく、それぞれの言語が大事にしている考え方の違いとして捉えると理解しやすいと思います。

TypeScriptならではの注意点

JavaScriptしか知らない状態でTypeScriptを触ると、「型が合っていません」というエラーに戸惑うことがあります。これはTypeScriptが、実行前の段階でミスに気づけるようにするための仕組みです。最初は窮屈に感じても、慣れると逆にバグを未然に防いでくれる心強い存在になります。

まとめ

TypeScriptの環境構築は、Node.jsのインストール後に`tsc`コマンドを使えるようにするのが基本の流れです。「型を書いてJavaScriptに変換する」という考え方さえ理解できれば、あとはJavaScriptの知識をそのまま活かして学習を進められます。途中で見慣れないエラーメッセージに出会っても、多くは今回紹介したパターンのどれかに当てはまります。エラーメッセージを恐れず、一つずつ意味を確認しながら進めていけば、着実に環境構築の壁を越えられるはずです。

---

本ページはプロモーションを含みます。

参考書籍(PR)

TypeScriptをもっと学びたい方には「プロを目指す人のためのTypeScript入門」がおすすめです。