TypeScriptはJavaScriptを拡張した言語で、型安全性が向上し、大規模開発にも適した言語です。
本記事では、
「初心者必見！TypeScriptの環境構築から実行まで完全ガイド」
と題して、
TypeScriptの環境構築から簡単な動作確認までの流れ
を解説します。
TypeScriptとは？
TypeScriptはMicrosoftが開発したプログラミング言語で、JavaScriptに型の概念を追加したものです。
主な特徴は以下の通りです。
- 静的型付けが可能でバグを減らせる
- 最新のJavaScript機能を利用できる
- コンパイルによりES5/ES6のJavaScriptに変換される
特に1つ目の「静的型付けが可能でバグを減らせる」は、
TypeScriptの特徴として覚えておくとよいよ！
Node.jsのインストール
Node.jsとnpmのインストールの確認
TypeScriptを使用するには、まずNode.jsとnpm（Node Package Manager）が必要です。
node -v
npm -v
上のようにコマンドを実行して、バージョンが出力されればOK！
バージョンが出なかった方（まだインストールしていない方）は、
以下の記事で詳しく解説しています！
ぜひ、ご覧ください！
TypeScriptをグローバルにインストール
TypeScriptはnpmを使用してインストールできます。
グローバルにインストールする場合は、以下のコマンドを実行してください。
npm install -g typescriptインストールが完了したら、以下のコマンドでTypeScriptのバージョンを確認できます。
tsc -v
バージョンが出ることが確認できたら、
TypeScriptのインストールは完了！
TypeScriptプロジェクトのセットアップ
プロジェクトごとにTypeScriptを導入する場合は、以下の手順を行います。
プロジェクトフォルダを作成
mkdir my-typescript-app
cd my-typescript-appただフォルダ作成して、そのフォルダに移動しています！
npmの初期化
npm init -yこれにより package.json が作成されます！
TypeScriptをローカルにインストール
npm install --save-dev typescript設定ファイル tsconfig.json の作成
npx tsc --init生成された tsconfig.json は、TypeScriptのコンパイル設定を管理するためのファイルです！
ちなみに私はこのファイルがなくて、TypeScriptが動かず、苦労しました…
TypeScriptのコードを書いてみる
エディタ（VSCodeなど）を開き、index.ts というファイルを作成し、以下のコードを記述します。
const message: string = "Hello, TypeScript!";
console.log(message);TypeScriptのコンパイルと実行
コンパイル
TypeScriptのコード（.ts）は、そのままでは実行できないため、JavaScript（.js）に変換（コンパイル）する必要があります。以下のコマンドを実行してください。
npx tsc index.tsコンパイルが成功すると、index.js というファイルが生成されます。
このJavaScriptファイルをNode.jsで実行します。
実行
node index.js正しく設定できていれば、以下のように出力されるはずです。
Hello, TypeScript!まとめ
今回は
「初心者必見！TypeScriptの環境構築から実行まで完全ガイド」
と題して、TypeScriptの環境構築から動作確認までの基本的な流れを解説しました。
・Node.jsとnpmをインストール
・TypeScriptをグローバルまたはローカルにインストール
・TypeScriptの設定ファイル（tsconfig.json）を作成
・TypeScriptコードを記述し、コンパイルして実行
次のステップとして、TypeScriptの型システムやインターフェース、クラスなどの基本概念を学ぶと、より実践的な開発ができるようになります。ぜひ挑戦してみてください！
コメント