TypeScriptの始め方とは？インストールからコンパイルまで初心者向けに解説

TypeScriptの始め方とは

TypeScriptの始め方とは、Node.jsを準備し、TypeScript本体をインストールして、書いたコード（.tsファイル）をブラウザやNode.jsで動かせる形（.jsファイル）に変換する一連の流れです。この記事では、その手順を一つずつ確認していきます。

型の書き方は分かってきたけど、そもそもTypeScriptってどうやって動かすの？

たしかに、そこ意外と説明されないよね。今日は環境構築から一緒に見ていこう

TypeScriptを使うために必要なもの

TypeScriptを使うには、まず「Node.js」というソフトが必要です。TypeScriptのインストールや実行に使う「npm」というツールが、Node.jsに含まれているためです。

▶ Node.js公式サイト

公式サイトからインストーラーをダウンロードし、案内に沿って進めればインストールできます。ターミナル（Macはターミナル、Windowsはコマンドプロンプトなど）で以下のコマンドを打ち、バージョンが表示されればインストール完了です。

node -v
npm -v

TypeScriptのインストール方法

Node.jsの準備ができたら、npmを使ってTypeScript本体をインストールします。

npm install -g typescript

-gは「グローバルにインストールする」という意味で、パソコン上のどのフォルダからでもTypeScriptのコマンドを使えるようにする設定です。インストールできたか確認するには、以下を実行します。

tsc -v

バージョンが表示されれば成功です。tscは「TypeScript Compiler」の略で、これから何度も使うコマンドになります。

.tsファイルの作り方

適当な作業用フォルダを作り、その中に拡張子が.tsのファイルを作成します。試しに、以下の内容でindex.tsというファイルを作ってみましょう。

const message: string = "Hello, TypeScript!";
console.log(message);

これまで紹介してきた型注釈の書き方は、こちらの記事も参考にしてください。

kinoblog

TypeScriptの変数・関数の型注釈とは？書き方を初心者向けに解説

🕒️2026年8月3日

 TypeScriptの型注釈とはTypeScriptの型注釈とは、変数や関数に対して「どんな型の値を扱うか」を明示する書き方です。変数の後ろや関数の引数・戻り値に: 型名という形で記述します。コロンの後ろに型を書くってやつ、なんとなく真似して書いてるけど、ちゃんと理解できてないかも実はここ、応用が少なくて一番「型に慣れる」のに向いてる場所だから、今日はここだけ丁寧にやろうなぜ型注釈が必要なのかJavaScriptでは、変数にどんな値でも自由に代入できます。// JavaScriptlet price = 1000;price = "1000円"; // 数...

コンパイルとは何か

ブラウザやNode.jsは、実は.tsファイルをそのまま実行できません。.tsファイルを、実行可能な.jsファイルに変換する作業を「コンパイル」と呼びます。ターミナルで、先ほど作ったファイルに対して次のコマンドを実行します。

tsc index.ts

同じフォルダの中にindex.jsという新しいファイルが生成されていれば成功です。中身を開いてみると、型注釈が取り除かれた、普通のJavaScriptのコードになっているのが分かります。

コンパイルした.jsファイルを実行する

生成された.jsファイルは、Node.jsで実行できます。

node index.js
// Hello, TypeScript!

「.tsファイルを書く → コンパイルする → .jsファイルを実行する」という3ステップが、TypeScriptを動かす基本の流れです。

毎回コンパイルするのが面倒なときの対処法

コードを直すたびに手動でtscコマンドを打つのは手間です。--watchオプションを付けると、ファイルを保存するたびに自動でコンパイルしてくれます。

tsc index.ts --watch

実務ではさらに、コンパイルと実行を1コマンドでまとめて行うts-nodeというツールもよく使われます。学習初期は、まずtscコマンドの流れを理解しておくのが優先です。

よくあるエラー

tsc index.ts
// 'tsc' is not recognized as an internal or external command
// または
// command not found: tsc

これは、TypeScriptがインストールされていない、もしくは正しくインストールされていないときに出るエラーです。npm install -g typescriptを再度実行し、インストールされているか確認してみてください。

よくある質問

Q. TypeScriptを使うのにNode.jsは必須ですか？
A. TypeScript本体のインストールや、tscコマンドの実行にnpm（Node.jsに含まれるツール）が必要なため、事実上必須です。

Q. .tsファイルはブラウザでそのまま動きますか？
A. 動きません。コンパイルして.jsファイルに変換してから、ブラウザやNode.jsで実行します。

Q. tscコマンドを毎回打つのは面倒です。何か方法はありますか？
A. --watchオプションを使うと、保存するたびに自動でコンパイルされます。

まとめ

• TypeScriptを使うには、まずNode.jsが必要
• npm install -g typescriptでTypeScript本体をインストールする
• .tsファイルは、tscコマンドでコンパイルしてから実行する
• --watchオプションを使うと、保存のたびに自動でコンパイルできる

公式ドキュメントにも、環境構築の手順がまとまっています。

▶ TypeScript公式ドキュメント：Download / Installation

書く・変換する・実行する、この3つの流れがやっと繋がった気がする

うん。ここが分かると、これまで書いてきた型注釈の意味もイメージしやすくなるはずだよ