TypeScriptの基礎 - 開発環境

提供: MochiuWiki : SUSE, EC, PCB

2026年2月22日 (日) 07:04時点におけるWiki (トーク | 投稿記録)による版 (ページの作成:「== 概要 == TypeScriptは、Microsoftが開発したJavaScriptのスーパーセット (superset) であり、静的型付けと高度な言語機能を備えたプログラミング言語である。<br> <br> 全ての有効なJavaScriptコードはTypeScriptとしても有効であるため、既存のJavaScriptプロジェクトへの段階的な導入が可能である。<br> TypeScriptで記述されたコードは、tscコンパイラによって型情報が…」)
(差分) ← 古い版 | 最新版 (差分) | 新しい版 → (差分)

概要

TypeScriptは、Microsoftが開発したJavaScriptのスーパーセット (superset) であり、静的型付けと高度な言語機能を備えたプログラミング言語である。

全ての有効なJavaScriptコードはTypeScriptとしても有効であるため、既存のJavaScriptプロジェクトへの段階的な導入が可能である。
TypeScriptで記述されたコードは、tscコンパイラによって型情報が除去され、通常のJavaScriptコードに変換されて実行される。

開発環境の構築には、以下に示すアプローチが一般的である。

開発環境の構築アプローチ
アプローチ 説明
tscコンパイラを直接使用する方法 TypeScriptの公式コンパイラを用いた基本的なアプローチ
Viteを使用する方法 開発サーバと高速ビルドを提供するフロントエンドビルドツールを活用するアプローチ
TypeScript Playgroundを使用する方法 インストール不要でWebブラウザ上でTypeScriptを試せるオンライン環境


TypeScriptを学習する場合は、TypeScript Playgroundから試し、その後ローカル環境を構築することを推奨する。


TypeScriptとは

TypeScriptは、Microsoftによって2012年に公開されたオープンソースのプログラミング言語である。
JavaScriptをベースとしながら、静的型付けなどの機能を追加することで、大規模なアプリケーション開発の課題を解決することを目的として設計された。

JavaScriptとの関係

TypeScriptはJavaScriptのスーパーセットとして設計されており、以下の関係が成り立つ。

JavaScriptとの互換性
特徴 説明
完全な互換性 全ての有効なJavaScriptコードは、そのままTypeScriptとして有効である。
既存のJavaScriptファイルを .ts拡張子 に変更するだけで、
TypeScriptとして扱うことができる。
段階的な型付け 既存プロジェクトへの段階的な導入が可能であり、型注釈のない箇所はJavaScriptと同様に動作する。
JavaScriptへのコンパイル TypeScriptは最終的にJavaScriptにコンパイルされるため、
JavaScriptが動作する全ての環境で実行できる。
Node.js、Webブラウザ、その他のJavaScriptランタイムで動作する。
ECMAScriptへの準拠 TypeScriptはECMAScript仕様に準拠しており、
最新のJavaScript機能 (async / await、アロー関数等) を利用できる。


TypeScriptの主要な特徴

下表に、TypeScriptが提供する主要な機能と特徴を示す。

TypeScript の主要な機能と特徴
機能 説明
静的型付け (Static Typing) 変数、関数のパラメータ、戻り値に型を注釈 (アノテーション) として付与できる。
コンパイル時に型の不一致を検出し、実行前にエラーを発見できる。
コードの意図が明確になり、チームでの開発でコミュニケーションコストが下がる。
型推論 (Type Inference) 全てに型を明示的に記述しなくても、コンパイラが文脈から自動的に型を推測する。
例えば、const x = 5; と記述した場合、x の型は自動的に number と推論される。
型推論により、型安全性を保ちながらソースコードの記述量を減らすことができる。
コンパイル時エラー検出 実行前に多くのエラーを検出できるため、デバッグに掛かる時間を削減できる。
存在しないプロパティへのアクセス、型の不一致、未定義変数の使用等を事前に発見できる。
インターフェースとジェネリック インターフェースを用いてオブジェクトの構造を定義して、コードの一貫性を保つことができる。
ジェネリックを用いて、型を汎用的に扱う再利用可能なコードを記述できる。
列挙型 (Enum) 名前付きの定数の集合を定義する列挙型を利用できる。
関連する定数をグループ化して、コードの可読性を向上させる。
IDE統合 Zed等の現代的なエディタとの統合により、優れた開発体験を提供する。
自動補完 (IntelliSense)、リファクタリング支援、型情報のホバー表示等の機能が利用できる。



コンパイルの仕組み

TypeScriptのコードは、そのままWebブラウザやNode.jsで実行することはできない。

tscコンパイラを用いてJavaScriptコードに変換 (コンパイル) する必要がある。

tscコンパイラ

tscは、TypeScriptの公式コンパイラである。
型チェックとトランスパイル (TypeScript -> JavaScriptへの変換) の2つの役割を担う。

コンパイルの流れ

tscコンパイラによるコンパイルは、以下の手順で行われる。

  1. ソースコードの読み込み
    TypeScriptソースコード (.ts拡張子 / .tsx拡張子 ファイル) を読み込む。

  2. 構文解析とAST生成
    ソースコードを解析して、AST (Abstract Syntax Tree : 抽象構文木) を生成する。

  3. 型チェック
    ASTを基に型の整合性を検証し、宣言された型との一致を確認する。
    型エラーがある場合は、エラーメッセージを報告する。

  4. コード生成
    型情報を除去して、JavaScriptコードを出力する。
    出力先のJavaScriptバージョン (ES5、ES2020等) は、tsconfig.jsonファイル で設定できる。


基本的なコンパイルコマンドを以下に示す。

# 単一ファイルのコンパイル
tsc index.ts

# tsconfig.jsonの設定に従ってコンパイル
tsc

# 型チェックのみ (ファイル出力なし)
tsc --noEmit

# ファイル変更を監視して自動コンパイル
tsc --watch


型消去 (Type Erasure)

TypeScriptの重要な特性として、型消去 (Type Erasure) がある。
コンパイル後に生成されるJavaScriptコードには、型情報が含まれない。

型消去の仕組みを以下に示す。

 // TypeScriptコード (コンパイル前)
 
 function greet(name: string): string {
    return "Hello, " + name;
 }
 
 const age: number = 30;
 
 interface User {
    id: number;
    name: string;
 }


上記のTypeScriptコードは、コンパイル後に以下のJavaScriptコードに変換される。

 // JavaScriptコード (コンパイル後)
 
 function greet(name) {
    return "Hello, " + name;
 }
 
 const age = 30;
 
 // インターフェースは完全に消去される (コードに残らない)


型消去に関する重要な点を以下に示す。

  • 型アノテーションの削除
    変数や関数に付与した型注釈は、全てコンパイル時に削除される。

  • インターフェースの消去
    インターフェース定義は完全に削除され、生成されたJavaScriptコードには残らない。

  • 型エイリアスの消去
    type キーワードで定義した型エイリアスも、コンパイル時に削除される。

  • ランタイムでの型情報不在
    型情報はランタイムでは参照できないため、実行時の型チェックには別の手段が必要になる。

  • エラー時のコンパイル継続
    tscは型エラーがあってもコンパイルを継続し、JavaScriptファイルを生成する。(デフォルト動作)
    エラー時にファイルを生成したくない場合は、tsconfig.jsonファイル で noEmitOnError: true を設定する。


Viteでの利用

Viteは、フロントエンド開発向けのビルドツールであり、TypeScriptのトランスパイルと型チェックを分離して処理する。
この分離により、開発時の高速フィードバックと型安全性を両立することができる。

下表に、Viteにおける処理の役割分担を示す。

Viteにおけるビルド処理の役割分担
フェーズ ツール 処理内容 型チェック
開発時トランスパイル esbuild (またはSWC) TypeScript → JavaScript の高速変換 なし
型チェック tsc --noEmit 型の整合性検証のみ あり
本番ビルド Rollup + esbuild バンドリング + トランスパイル + 最小化 なし


  • 開発時のトランスパイル
    esbuild (またはSWC) を用いてTypeScriptを高速にJavaScriptに変換する。
    型チェックは行わないため、高速な変換が可能となり、HMR (Hot Module Replacement) の応答速度を維持する。

  • 型チェック
    tsc --noEmit コマンドで型チェックのみを実行する。(--noEmit オプションにより、ファイルは出力されない)
    CIパイプラインや別ターミナルで実行することにより、型安全性を担保する。

  • 本番ビルド
    Rollupによるモジュールバンドリングとesbuildによるトランスパイル・最小化 (minification) を行う。


型チェックを別プロセスで実行するコマンドを以下に示す。

 # 型チェックのみを実行 (ファイル出力なし)
 tsc --noEmit
 
 # ファイル変更を監視しながら型チェックを実行
 tsc --noEmit --watch



.tsと.tsxの違い

TypeScriptには、.ts と .tsx という2種類のファイル拡張子がある。
使用する拡張子は、ファイルにJSXシンタックスが含まれるかどうかによって決まる。

.tsファイル

.tsファイル は、通常のTypeScriptコードを記述するためのファイルである。
JSXシンタックスを含まない、純粋なTypeScript / JavaScriptロジックを記述する場合に使用する。

.tsファイル の用途を以下に示す。

  • ユーティリティ関数
    文字列操作、日付計算、数値フォーマット等の汎用関数
    例: utils.ts

  • ビジネスロジック
    データの変換、バリデーション、APIとの通信処理等
    例: api.ts、validation.ts

  • 型定義
    インターフェース、型エイリアス、列挙型の定義
    例: types.ts、interfaces.ts

  • クラス定義
    UIに依存しないデータモデルやサービスクラス
    例: UserService.ts、AuthManager.ts


.tsファイル の記述例を以下に示す。

 // utils.tsファイル
 
 export function formatDate(date: Date): string {
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, "0");
    const day = String(date.getDate()).padStart(2, "0");
    return `${year}-${month}-${day}`;
 }
 
 export function clamp(value: number, min: number, max: number): number {
    return Math.min(Math.max(value, min), max);
 }


.tsxファイル

.tsx ファイルは、TypeScriptとJSXシンタックスを組み合わせて記述するためのファイルである。
主にReactコンポーネントの定義に使用される。

JSXは、HTMLライクなマークアップをJavaScriptコード内に記述するための構文拡張である。
Reactでは、このJSXを用いてUIコンポーネントの構造を表現する。

.tsxファイル ファイルを使用する時の重要な事柄を以下に示す。

  • tsconfig.jsonファイル での設定
    .tsxファイル でJSXを使用するには、tsconfig.jsonファイル の compilerOptions に jsx オプションの設定が必須である。
    Reactの場合は "jsx": "react-jsx" の設定を推奨する。(React 17以降の自動インポート方式に対応)

  • 主な用途
    Reactコンポーネント (関数コンポーネント、クラスコンポーネント) の定義
    例: App.tsx、Button.tsx、Header.tsx


.tsxファイル の記述例を以下に示す。

 // Button.tsxファイル
 
 import React from "react";
 
 interface ButtonProps {
    label: string;
    onClick: () => void;
    disabled?: boolean;
 }
 
 export function Button({ label, onClick, disabled = false }: ButtonProps) {
    return (
       <button onClick={onClick} disabled={disabled}>
          {label}
       </button>
    );
 }


tsconfig.jsonファイル における jsx オプションの設定例を以下に示す。

 {
    "compilerOptions": {
       "jsx": "react-jsx"
    }
 }


下表に、.ts拡張子 と .tsx拡張子 の違いを示す。

.tsと.tsxの比較
項目 .ts .tsx
JSXシンタックス 使用不可 使用可能
主な用途 ユーティリティ、型定義、ビジネスロジック Reactコンポーネント
tsconfig.jsonのjsx設定 不要 必須
ファイル例 utils.ts / api.ts / types.ts App.tsx / Button.tsx



開発環境のセットアップ

TypeScriptの開発環境をローカルに構築するための手順を以下に示す。

Node.jsとパッケージマネージャの準備

TypeScriptの開発には、Node.jsとパッケージマネージャ (npm 等) が必要である。

  • Node.js
    バージョン18以上を推奨する。
    Node.js公式サイト からインストーラをダウンロードしてインストールする。
    バージョン管理ツール (nvm、fnm 等) を用いて管理することも推奨される。

  • npm
    Node.jsにバンドルされており、Node.jsのインストール時に同時にインストールされる。
    npm --version コマンドでインストールを確認できる。


Node.jsとnpmのインストール確認コマンドを以下に示す。

 # Node.jsのバージョンを確認
 node --version
 
 # npmのバージョンを確認
 npm --version


TypeScriptのインストール

TypeScriptのインストール方法には、グローバルインストールとローカルインストールの2種類がある。
プロジェクトごとにバージョンを管理できるため、ローカルインストールを推奨する。

 # ローカルインストール (推奨)
 npm install --save-dev typescript
 
 # グローバルインストール
 npm install -g typescript


インストール後、tscのバージョンを確認する。

# ローカルインストールの場合
npx tsc --version

# グローバルインストールの場合
tsc --version


tsconfig.jsonファイル を生成するには、以下のコマンドを実行する。

# tsconfig.jsonを生成
npx tsc --init


tsconfig.jsonファイル の詳細については、TypeScriptの基礎 - tsconfig.jsonのページを参照すること。

Viteプロジェクトの作成

対話形式での作成

以下に示すコマンドを実行すると、プロジェクト名、フレームワーク、バリアント (TypeScript / JavaScript) を対話的に選択できる。

npm create vite@latest


テンプレートを指定した作成

React + TypeScriptのプロジェクトを直接作成する場合は、以下に示すコマンドを実行する。

# React + TypeScriptテンプレートでプロジェクトを作成
npm create vite@latest <任意のプロジェクト名> -- --template react-ts


下表に、利用可能な主要なテンプレートを示す。

Viteの主要テンプレート
テンプレート名 説明
vanilla-ts フレームワークなし + TypeScript
react-ts React + TypeScript
vue-ts Vue.js + TypeScript
svelte-ts Svelte + TypeScript


プロジェクトの初期化と起動

プロジェクト作成後は、以下の手順で依存パッケージをインストールし、開発サーバを起動する。

 # プロジェクトディレクトリに移動
 cd my-app
 
 # 依存パッケージのインストール
 npm install
 
 # 開発サーバの起動
 npm run dev


開発サーバが起動すると、ターミナルにローカルURLが表示される。
Webブラウザで表示されたURLにアクセスすることにより、アプリケーションの動作を確認できる。

TypeScript Playground

TypeScript Playgroundは、Webブラウザ上でTypeScriptを即座に試せるオンライン環境である。
Node.jsやnpmのインストールが不要なため、TypeScriptの学習を始める時や、動作を手軽に確認する場合に活用できる。


下表に、TypeScript Playgroundが提供する主な機能を示す。

TypeScript Playgroundの主な機能
機能 説明
即座の実行 処理を記述すると、リアルタイムでコンパイルされたJavaScriptコードを確認できる。
型エラーの表示 型エラーが発生した箇所がリアルタイムで強調表示される。
コードの共有 記述した処理をURLとして共有する機能を利用できる。
バグの報告や、他者へのサンプルコードの共有に活用できる。
コンパイルオプションの変更 ターゲットバージョンや厳格モード等のコンパイルオプションをWebブラウザ上で変更して動作を確認できる。



関連情報



「https://mochiu.net/index.php?title=TypeScriptの基礎_-_開発環境&oldid=14398」から取得