プログラミング言語

TypeScript たいぷすくりぷと

静的型付けJavaScript型推論トランスパイルインターフェースMicrosoft

TypeScriptについて教えて

簡単に言うとこんな感じ！

JavaScriptに「型チェック機能」を追加した言語だよ！「この変数には数字しか入れちゃダメ」ってルールを事前に決めておくことで、バグを実行前に発見できるんだ。大きなシステム開発で特に力を発揮する「頼れる先輩JavaScript」ってイメージ！

TypeScriptとは

TypeScript（タイプスクリプト）は、Microsoftが開発したプログラミング言語で、JavaScriptのスーパーセット（上位互換） です。JavaScriptの文法をそのまま使いながら、静的型付け（変数や関数にデータの「型」を指定する仕組み） を追加したものです。TypeScriptで書いたコードは最終的にJavaScriptに変換（トランスパイル）されて動作します。

「型」とは「この変数は文字列だ」「この関数は数値を返す」といった情報のことです。型を指定することで、開発ツール（エディタ）がコードの誤りを事前に検出してくれます。たとえば、数値を期待している場所に文字列を渡してしまったときに、実行前にエラーを教えてくれる のが最大のメリットです。

大規模なWebシステムやアプリ開発において、チームで開発する場合にその真価を発揮します。型情報がドキュメントの役割を果たし、「この関数に何を渡せばいいか」がコードを読むだけで明確になるため、開発効率と品質を同時に向上させる ことができます。現在ではフロントエンド開発の事実上の標準となりつつあります。

TypeScriptの仕組みと特徴

TypeScriptがJavaScriptと最も異なる点は「型システム」です。以下に主な特徴を整理します。

特徴	説明	利点
静的型付け	変数・関数に型を明示的に指定	実行前にバグを検出できる
型推論	型を書かなくても自動で推論	型の恩恵を受けながらコードが簡潔になる
インターフェース	オブジェクトの形（構造）を定義	データ構造を統一・共有できる
トランスパイル	TypeScript→JavaScriptに変換	ブラウザ・Node.jsでそのまま動く
後方互換	既存のJSコードがそのまま使える	段階的に移行できる

JavaScriptとの比較コード例

// JavaScript（型なし）
function add(a, b) {
  return a + b;
}
add(1, "2"); // → "12"（意図しない結果でも実行できてしまう）

// TypeScript（型あり）
function add(a: number, b: number): number {
  return a + b;
}
add(1, "2"); // → コンパイルエラー！実行前に気づける

覚え方

「TypeScript＝型（タイプ）があるJavaScript」と覚えよう。「タイプライター」のタイプ＝型、と連想するとバッチリ！

トランスパイルの流れ

開発者が書くコード           実際に動くコード
┌─────────────────┐          ┌──────────────────┐
│  TypeScript     │  tsc     │  JavaScript      │
│  （.ts/.tsx）   │ ───────▶ │  （.js）         │
│  型情報あり      │  変換    │  ブラウザで動作   │
└─────────────────┘          └──────────────────┘

歴史と背景

2010年頃：GoogleやMicrosoftが大規模JavaScript開発の課題（バグ検出の難しさ・保守性の低さ）を認識し始める
2012年10月：Microsoftがオープンソースとして TypeScript 0.8 を公開。開発はAnders Hejlsberg（C#の設計者）が主導
2014年：TypeScript 1.0リリース。Visual StudioおよびVS Codeとの統合が進む
2016年：Angular（Googleのフレームワーク）がTypeScriptを標準言語として採用。一気に注目度が上がる
2019年：Airbnb・Slack・MicrosoftなどがTypeScriptへの全面移行を発表。エンタープライズ採用が加速
2020年以降：Node.jsバックエンド・React/Vue.jsフロントエンドでも主流に。Stack Overflow調査で「最も愛されている言語」上位に継続ランクイン
2023年：主要フレームワーク（Next.js・NestJS・Deno）がTypeScriptをデフォルトで採用するようになる

JavaScriptとTypeScriptの関係

TypeScriptはJavaScriptを「包んだ」関係にあります。すべてのJavaScriptコードは有効なTypeScriptコードでもあります。

主要フレームワーク・ライブラリとの対応

フレームワーク	TypeScript対応状況
React	`.tsx` ファイルで公式サポート。大規模開発では事実上必須
Angular	TypeScript がデフォルト言語（JSの選択肢なし）
Vue.js 3	Composition APIとTypeScriptの相性が良い
Next.js	プロジェクト作成時にTypeScriptを推奨
NestJS	TypeScriptベースで設計されたバックエンドフレームワーク
Deno	TypeScriptをネイティブで実行可能（トランスパイル不要）

型の種類早見表

// 基本型
let name: string = "田中";         // 文字列
let age: number = 30;              // 数値
let isAdmin: boolean = true;       // 真偽値
let data: null = null;             // null
let nothing: undefined = undefined;// undefined

// 複合型
let scores: number[] = [90, 85];   // 配列
let tuple: [string, number] = ["A", 1]; // タプル

// インターフェース（オブジェクトの形を定義）
interface User {
  id: number;
  name: string;
  email?: string; // ?は省略可能
}

規格	内容
ECMAScript 2015（ES6）仕様	TypeScriptが対応するJavaScriptの基盤仕様。クラス・アロー関数・モジュールなどを定義
ECMA-262	JavaScript（ECMAScript）の国際標準仕様。TypeScriptのトランスパイル対象