本記事ではTypeScriptの学習を行おうとしている初学者向けの内容となります。
まずTypeScriptとは何かについて説明していきます。
TypeScriptについて
TypeScript
…JavaScriptを基盤言語としていて、JavaScriptの代替言語となりえる機能を持っています。簡単にいうとJavaScriptの上位互換です。コードを記述する段階で多くのエラーを発見することができるため、実行時のエラーが減り、作業効率を上げることができます。
TypeScriptの特徴
【JavaScriptとの共通点】
・双方ともWeb開発に使用され、クライアントサイド・サーバサイドの両方で利用できます。
・React、Angular、Vue.js等のJavaScriptライブラリやフレームワークを使用できます。
【JavaScriptとの相違点】
・型システム
JavaScript…動的型付け言語で、変数の型は実行時に決められます。
TyepeScript…静的型付け言語で、変数や関数の型を明示的に指定します。
型の不一致はコンパイル時にエラーとして検出されます。
・コンパイル
JavaScript…インタプリタ言語で、コードはそのままブラウザで実行されます。
TyepeScript…コンパイル言語で、TypeScripコードはJavaScriptに
変換（コンパイル）されてから実行されます。
（.tsファイルを作成し、コンパイルを実行して同一内容の.jsファイルに
変換されます。）
・クラスとインターフェース
JavaScript…厳密な型の仕組みは有りません。
TyepeScript…クラスに加えてインターフェースを利用して
オブジェクトの型を定義できます。
・ツールのサポート
JavaScript…多くのエディタやIDEがコード補完やリファクタリングをサポートしています。
TyepeScript…型情報を利用することで、より高度なコード補完やリファクタリング、
エラーチェックができます。
【用語解説】
コンパイル
…TypeScriptにおけるコンパイルは、他言語でのコンパイルと少し意味合いが異なります。ここでのコンパイルは、TypeScriptで記述されたコードをJavaScriptに変換する動作のことです。この動作を行う理由としては、ブラウザやNode.jsなどのJavaScript実行環境で直接実行するためにTypeScriptで記述したコードをJavaScriptのコードに変換する必要があるためです。
インタプリタ
…プログラムのソースコードを１行ずつ読み込み、その場で実行するソフトウェアのこと。これによりプログラムの実行が即座に行われるため、開発やデバッグをいち早く行うことができます。
インターフェース
…異なる部分をつなぐ接点のこと。中継地点のようなものです。具体的には、異なるシステムやデバイスが情報を交換するための橋渡し部分のことです。TypeScriptにおけるインターフェースは「オブジェクト構造を定義するための機能」です。これを用いることでコードの可読性と保守性が高くなります。
IDE（Integrated Development Environment）
…ソフトウェア開発を効率的に行うためのツールや機能を１つにまとめたソフトウェアのことです。主な機能としてテキストエディタ、コンパイラ、デバッガ、ビルドツール、バージョン管理システムを持ちます。代表例としてVisual StudioやEclipse等が挙げられます。。
リファクタリング
…ソフトウェア開発において、プログラムの挙動を変えることなく内部の設計や構造を見直して、コードを修正したりする作業のことです。
TypeScriptの導入方法
導入
TypeScriptが使用できる環境は大きく分けて２つあります。
WEB上での実行
…環境構築を十分に行っていない状態であったり、試験的に動作を確認したいコードを実行したい場合はWEB上での実行環境を使用します。
下記のサイトではWEB上のエディタでTypeScriptを即座に実行することができます。
（https://www.typescriptlang.org/play/）
ローカル環境での実行
…例えばとあるプロジェクトに従事していて、プログラムをファイル内に書いていくつもりであればローカル環境にTypeScriptをダウンロードして使用します。
前提
・Windows 11
・VSCode
ここではローカル環境での実行を前提にダウンロード方法から説明していきます。
下記のダウンロードを行います。
・Node.js
・TypeScript
まずVSCodeのターミナルを開きます。
自分のローカル環境にこれらが既にダウンロードされているかどうかそれぞれ下記コマンドで確認します。
（厳密にいえばバージョンを確認するコマンドです。）
Node
node -v
tsc -v
Node.jsダウンロード方法
まず下記のNode.jsの公式サイトからNode.jsインストーラをダウンロードします。
https://nodejs.org/en/download/prebuilt-installer
インストーラがダウンロードできたら、ファイルサーバで右クリックし、実行します。
VSCodeでターミナルを開いて下記のコマンドをもう一度実行します。
node -v
node.jsがダウンロードされていると、下記のようにバージョンが表示されます。
v22.12.0
TypeScript.jsダウンロード方法
そのままVSCodeで開いているターミナルでTypeScriptのインストールを行います。
下記のコマンドによって最新のTypeScriptがインストールされます。
npm install -g typescript
もしバージョン指定が必要である場合は「@」を付けて任意のバージョンをインストールすることができます。
npm install -g typescript@X.X.X(指定のバージョン)
npm
…Node Package Managerの略。Node.jsのパッケージ管理ツールのことです。
パッケージのインストールや更新、削除等を行うことができます。
-g
…グローバルオプションです。このオプションを付けると、パッケージをシステム全体にインストールすることができます。これによって、どのディレクトリからでもそのパッケージを使用できるようになります。
インストールが完了したか確認してみましょう。
tsc -v
下記のようにインストールしたTypeScriptのバージョンが表示されます。
Version 4.7.4
ソースコードを試してみよう
まずhtmlファイルを作成します。
scriptタグで「app.js」を指定して読み込むように記述します。
（ここで要注意なのは、TypeScriptのファイル「.ts」ではなく、JavaScriptのファイル「.js」を読み込ませることです。）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TypeScript Test</title>
<script src="app.js"></script>
</head>
<body>
</body>
</html>
次にapp.tsファイルを作成します。
コンソールに「Hello World!!」と表示されるようなプログラムを書きます。
const str: string = 'Hello World!!';
console.log(str);
次にVSCodeのターミナルで下記のコマンドを入力します。
tsc app.ts
するとapp.tsの内容がJavaScriptファイルに変換されたapp.jsが作成されます。
こうすることでHTML側（test.html）から読み込むことができます。
var str = 'Hello World!!';
console.log(str);
成功しているか確認してみましょう。
ファイルサーバを開き、「test.html」をブラウザで開きます。（右クリックメニューからchromeやEdgeで開いてください）
真っ白の画面が表示されるので、そこで「F12」キーを押下します。
Devツールが表示され、コンソールタブをクリックすると、「Hello World!」が表示されていることが確認できます。
もし.tsファイルの内容を修正した場合は、都度下記のコマンドでJavaScriptの内容へ変換する必要があるため、要注意です。TypeScriptを使用する場合は.jsファイルは直接いじらず、.tsファイルを修正して→変換という流れを守ってください。
tsc app.ts