TypeScript | 基礎文法:環境・前提理解 – TypeScriptのインストール

TypeScript TypeScript
スポンサーリンク

TypeScriptをインストールする前に知っておく前提

TypeScriptは単体で動くわけではなく、「Node.js」と「npm」が前提になります。npmはNode.jsに付属しているパッケージ管理ツールで、TypeScript本体もこのnpmを使ってインストールします。なので、まず最初にやるべきことは「Node.jsが入っているか確認すること」です。ターミナル(コマンドプロンプト)を開いて、node -vnpm -v を実行し、バージョンが表示されれば準備OKです。もし何も表示されなければ、Node.js公式サイトからインストールしてから先に進みます。

この前提を押さえておくと、「なぜいきなりnpmコマンドを打っているのか」「なぜTypeScriptの話なのにNode.jsが出てくるのか」がスッと理解できるようになります。TypeScriptは、Node.jsの上で動くツール(コンパイラ)としてインストールし、そのコンパイラがTypeScriptコードをJavaScriptに変換してくれる、という構造になっています。


グローバルインストールとローカルインストールのイメージ

グローバルインストールとは何か

TypeScriptのインストール方法には大きく分けて「グローバルインストール」と「ローカルインストール」があります。グローバルインストールは、「このPC全体でTypeScriptを使えるようにする」方法です。ターミナルで次のコマンドを実行します。

npm install -g typescript

-g は「global(グローバル)」の意味で、どのフォルダからでも tsc コマンドが使えるようになります。インストールが終わったら、tsc -v を実行してバージョンが表示されれば成功です。

初心者にとってのメリットは、「どこでもすぐにTypeScriptを試せる」ことです。学習用にちょっとした .ts ファイルを書いてコンパイルするだけなら、このグローバルインストールだけでも十分に遊べます。

ローカルインストールとは何か

一方、ローカルインストールは「特定のプロジェクトの中だけでTypeScriptを使う」方法です。プロジェクト用のフォルダを作り、その中で次のように実行します。

npm install --save-dev typescript

これで、そのプロジェクトの node_modules の中にTypeScriptがインストールされます。--save-dev は「開発用の依存関係として記録する」という意味で、package.json に「このプロジェクトはTypeScriptを開発に使っています」と書き残してくれます。

ローカルインストールのメリットは、「プロジェクトごとにTypeScriptのバージョンを固定できる」ことです。現場ではこちらが主流ですが、学習の最初の一歩としては、まずグローバルインストールで感覚を掴み、その後ローカルインストールに進む、という流れでもまったく問題ありません。


最初の一歩:グローバルインストールでTypeScriptを触ってみる

インストールからバージョン確認まで

Node.jsとnpmが入っている前提で、まずはグローバルインストールをしてみます。ターミナルで次のコマンドを実行します。

npm install -g typescript

インストールが終わったら、次のコマンドでバージョンを確認します。

tsc -v

Version 5.x.x のような表示が出れば成功です。ここまで来たら、もうあなたのPCは「TypeScriptコンパイラを持っている状態」です。

最初のTypeScriptファイルを書いてみる

次に、実際にTypeScriptファイルを作って動かしてみましょう。適当なフォルダに test.ts というファイルを作り、次のように書きます。

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

ここでポイントは、message: string という「型注釈」が入っていることです。これがTypeScriptらしさです。

ターミナルでそのフォルダに移動し、次のコマンドを実行します。

tsc test.ts

これで同じフォルダに test.js が生成されます。中身は普通のJavaScriptです。最後に、Node.jsで実行します。

node test.js

コンソールに Hello TypeScript と表示されれば、TypeScript→JavaScript→実行、という一連の流れが体験できたことになります。


プロジェクトとして使うときのローカルインストールと設定

プロジェクトフォルダを作ってTypeScriptを入れる

本格的に学んでいくなら、「プロジェクトとしてTypeScriptを使う」形に慣れておくと良いです。まず、作業用フォルダ(例:my-ts-app)を作り、VS Codeなどで開きます。

ターミナルでそのフォルダに移動し、次のコマンドでnpmの初期化をします。

npm init -y

これで package.json が作られます。続いて、TypeScriptを開発用依存としてインストールします。

npm install --save-dev typescript

これで、このプロジェクト専用のTypeScriptが node_modules に入り、package.json にも記録されます。

tsconfig.jsonを作ってコンパイル設定を管理する

プロジェクトでTypeScriptを使うときは、tsconfig.json という設定ファイルを用意するのが一般的です。これは「このプロジェクトではTypeScriptをこういうルールでコンパイルします」という宣言書のようなものです。

ローカルインストールしたTypeScriptを使って、次のように実行します。

npx tsc --init

これで、プロジェクト直下に tsconfig.json が生成されます。中にはターゲットのJavaScriptバージョンや、どのフォルダをコンパイル対象にするかなどの設定が書かれています。最初はデフォルトのままで構いません。

あとは、src フォルダなどに .ts ファイルを置き、次のようにコンパイルします。

npx tsc

tsconfig.json の設定に従って、まとめて .js ファイルが生成されます。この流れに慣れると、「TypeScriptプロジェクトを立ち上げる」という感覚が掴めてきます。


どのインストール方法を選べばいいかの目安

学習の最初はグローバル、その後プロジェクト単位へ

プログラミング初心者で、「まずTypeScriptというものを触ってみたい」という段階なら、グローバルインストールがシンプルで分かりやすいです。npm install -g typescripttsc -vtest.ts を作ってコンパイル、という流れだけで、「型付きのJavaScriptを書いて動かす」という体験ができます。

一方で、「実際のアプリケーションを作っていきたい」「他のライブラリと一緒に使いたい」という段階に入ったら、プロジェクトごとにローカルインストールして、tsconfig.json を用意する形に移行するのがおすすめです。現場ではこちらが標準的なスタイルなので、早めに慣れておくと後が楽になります。


まとめ:インストールは「TypeScriptという先生をPCに招く」作業

TypeScriptのインストールは、単なる作業ではなく、「型という厳しくも優しい先生を、自分のPCに招き入れる儀式」みたいなものです。Node.jsとnpmを土台にして、TypeScriptコンパイラを入れ、tsc でコンパイルし、node で実行する——この一連の流れが、これからあなたがTypeScriptで学んでいくための基本のリズムになります。

タイトルとURLをコピーしました