前回の記事
「TypeScript(タイプスクリプト)って何?」 では、
JavaScript と比較しながら、TypeScript についてできる限りやさしく解説しました。
そこで今回の記事では、実際に TypeScript を導入し、動かしてみるところまでを体験してみましょう。
なお、プログラムファイルを作成する方法はいくつかありますが、
この記事では 「Visual Studio Code(VS Code)」を使用する前提で進めます。
VS Code についての詳しい説明は、ここでは省略します。
もし VS Code について知りたい方は、以下の動画をご確認ください。
👉 https://crebit.jp/video/
事前に知っておいてください
この記事では macOS(Mac)を使用した手順で説明します。
Windows や Linux をお使いの方は、手順や使用するツールが一部異なる場合がありますので、あらかじめご了承ください。
それでは、さっそく始めていきましょう。
Step1:Node.js をインストールする
TypeScript を使うためには、まず Node.js をインストールする必要があります。
公式サイトから入れる(いちばん簡単・おすすめ)
① 公式サイトへアクセス
②「Node.js®︎を入手」ボタンをクリック
③ macOS 用の Node.js を選択
通常は、現在使っている OS が自動的に選択されます。
・macOS インストーラ(.pkg) ボタンをクリック
④ 手順に従ってインストール
特に設定を変更する必要はありません。
すべて「次へ」で OK です。
インストール確認(ここ重要)
インストールが終わったら、ターミナルを開いて、以下のコマンドを入力していきます。
ターミナルとは、キーボードでコマンド(命令)を入力して、パソコンに直接指示を出すためのツールです。ファイル操作やプログラムの実行、環境確認などを行うときに使用します。macOSに標準搭載されているツールになります。下記アプリ収納エリアより、検索窓🔍に「terminal」と入力するとアプリが開きます。

※ Windows をお使いの場合は「コマンドプロンプト」を使用します。
node -v
以下のようにバージョン番号が表示されれば成功です。
v24.x.x
※ 数字は環境によって異なっても問題ありません。
Step2:TypeScript をインストールする
Node.js が入ったら、次は TypeScript をインストールします。
npm install -g typescript
インストール確認
tsc -v
Version 5.x.x
と表示されれば成功です。
⚠ 権限エラーが出た場合
もし、以下のようなエラーが表示された場合:
npm error Error: EACCES: permission denied
これは
「システム領域に一般ユーザーの権限では書き込めません」
という意味です。
その場合は、管理者権限で実行します。
sudo npm install -g typescript
実行すると、次のように表示されます。
Password:
👉 Mac にログインするときのパスワードを入力してください
(入力中は文字が表示されませんが、正常な動作です)
再度確認します。
tsc -v
バージョンが表示されれば OK です。
Step3:TypeScript を実行してみる
① hello.ts を作成する
Visual Studio Code を開き、次のコードを書きます。
console.log("ようこそ、TypeScriptの世界へ!");
ファイル名は hello.ts として、デスクトップに保存しましょう。
② TypeScript を JavaScript に変換する
ターミナルに戻り、次のコマンドを入力します。
cd Desktop
tsc hello.ts
ここでのポイントは、tscコマンドを使って、
TypeScript で書いたファイルを JavaScript に変換しているという点です。
※ ちなみに cd は、「カレントディレクトリ(作業場所)を移動する」ためのコマンドです。cd Desktop と入力することで、「デスクトップを作業場所にしてください」という意味になります。
成功すると、デスクトップに hello.js というファイルが生成されます。
③ JavaScript を実行する
node hello.js
以下のように表示されれば成功です。
ようこそ、TypeScriptの世界へ!
🎉 おめでとうございます!
まとめ
- TypeScript は そのまま実行できない
- 一度 JavaScript に変換 してから実行する
- Node.js は、その JavaScript を動かすための環境
この一連の流れを体験できたら、TypeScriptの第一歩はしっかり踏み出せています 👍
