前回の記事
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 をインストールする必要があります。

公式サイトから入れる(いちばん簡単・おすすめ)

① 公式サイトへアクセス

👉 https://nodejs.org/

②「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の第一歩はしっかり踏み出せています 👍