TypeScript入門講座_第2回：TypeScriptのはじめかた

TypeScriptを使うには、まずローカル環境に開発ツールを整える必要があります。
この回では、Visual Studio Codeの導入から、TypeScriptの最初のコードを実行するまでを、ステップごとに説明します。

ステップ1：VSCodeをインストールする

TypeScriptを書くには、コード補完・エラーチェックに対応したエディタが必要です。
Visual Studio Code（VSCode）はTypeScriptと連携が深く、多くの開発現場でも使われています。

任意の場所（例：デスクトップ）に、以下のような作業フォルダを作成します。

my-ts-app/

VSCodeでこのフォルダを開いてください。
メニューの「ファイル → フォルダーを開く」から選べます。

コマンド操作はVSCode内のターミナルで行います。

ターミナルが画面下に表示されれば準備OKです。

TypeScriptはnpmというツールを通じてインストールします。npmはNode.jsに含まれているため、まずNode.jsを導入します。

ターミナルで以下を実行します。

node -v
npm -v

バージョン番号（例：v20.5.0 など）が表示されれば完了です。

npmを使用するプロジェクトでは、まず package.json という設定ファイルを作成します。

npm init -y

このファイルには、使用するライブラリやスクリプトの情報が記録されます。
TypeScriptをはじめとする依存パッケージを管理するために必要です。

Node.jsプロジェクトの基本設定ファイルです。TypeScriptをインストールすると、その情報がこのファイルに記録されます。
他の人が同じ環境を再現したり、自動化ツールでビルド処理をしたりする際に使われます。

次に、プロジェクト内にTypeScript本体をインストールします。

npm install -D typescript

package.json にも "typescript" の記述が追加されていれば成功です。

TypeScriptの挙動を定義する tsconfig.json を作成します。

npx tsc --init

このコマンドで、基本的な設定内容を持つ tsconfig.json が自動生成されます。

TypeScriptのコンパイルに関する設定ファイルです。
出力先、変換対象、型チェックの厳しさなどをここで制御できます。

主な設定項目の例：

まず以下のようにファイル構成を整えます。

my-ts-app/
└─ src/
   └─ index.ts

src/index.ts に次のようなコードを記述します。

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

保存して閉じるだけでOKです。

.ts ファイルを .js に変換するには、以下を実行します。

npx tsc

初期設定のままなら、出力は src/index.js に生成されます。
（※ tsconfig.json で outDir を指定していない場合）

生成された .js ファイルをNode.jsで実行してみましょう。

node src/index.js

画面に次のように表示されれば成功です。

Hello, TypeScript

ステップ	成功の目安
VSCodeが使える	起動でき、フォルダが開ける
ターミナルが開ける	黒い入力欄が使える
Node.jsが動く	`node -v`, `npm -v` が表示される
package.jsonがある	`npm init -y` の結果が見える
TypeScriptが導入された	`typescript` が `package.json` に追加されている
tsconfig.jsonがある	`npx tsc --init` で生成されている
.tsファイルが書けた	`src/index.ts` にコードを保存できた
コンパイルできた	`.js` ファイルが出力されている
実行できた	`"Hello, TypeScript"` が表示された