3.

TypeScript(.ts/.tsx)完全ガイド — Microsoft 製・静的型・tsconfig・型推論・Type-Only Imports・JSX 対応

編集
この記事の要点
  • TypeScript は Microsoft の Anders Hejlsberg(C# 設計者)率いるチームが 2012 年に公開した JavaScript の静的型付け版
  • JavaScript の厳密な上位互換(superset)で、任意の有効な JS コードは有効な TS コードでもある
  • tsc(TypeScript Compiler)でトランスパイル → .js + .d.ts(型定義)を出力
  • プロジェクト設定は tsconfig.jsonstrict: true で全厳格チェックが有効になる
  • 型推論が強力で、明示的な型注釈なしでも多くの型を自動で導出する
  • any は型安全性を完全に放棄する逃げ道、unknown + 型ガードのほうが安全
  • React の JSX を含むファイルは .tsx、純粋な TS は .ts

概要

TypeScript(タイプスクリプト、TS) は、Microsoft が 2012 年 10 月に公開したプログラミング言語で、JavaScript に 静的型システム を追加した「上位互換言語(superset)」です。設計者は C#、Delphi、Turbo Pascal の生みの親としても知られる Anders Hejlsberg(アンダース・ヘルスバーグ) で、Microsoft でのリーダーシップのもと開発が進められています。プロジェクトは Apache License 2.0 で GitHub に公開され、最も Star の多い言語実装の 1 つです。

TS の最大の特徴は 「JavaScript の構文をそのまま受け入れる」 ことです。.js ファイルの拡張子を .ts に変えるだけで TypeScript として扱え、徐々に型を追加していく 段階的型付け(gradual typing) が可能です。型情報は実行時には存在せず、tsc(TypeScript Compiler)が型チェック後に 型を消去した純粋な JavaScript を出力します。これを type erasure と呼びます。

型推論は非常に強力で、const x = [1, 2, 3]; と書けば number[] が自動で推論されます。さらに ジェネリクスArray<string>)、ユニオン型string | number)、インターセクション型A & B)、条件型T extends U ? X : Y)、マップ型テンプレートリテラル型 などの高度な型機能を備え、ライブラリ作者は驚くほど精密な API を表現できます。型システムだけで簡易な計算(SQL パーサや JSON 検証)まで書ける表現力があります。

ファイル種類とビルド成果物

拡張子役割備考
.tsTypeScript ソースJSX を含まない通常のロジック
.tsxJSX を含む TypeScriptReact コンポーネントなど
.d.ts型定義ファイル(宣言ファイル)JS ライブラリに型を後付けするためのスタブ。DefinitelyTyped / @types/*
.mts / .ctsESM / CJS 強制版それぞれ .mjs/.cjs へコンパイル
tsconfig.jsonプロジェクト設定target, module, strict, paths 等を定義
.js + .d.tstsc の出力型情報を別ファイルに分離して配布

「Hello, World」

// hello.ts — 型注釈付き
function greet(name: string): string {
    return `Hello, ${name}!`;
}

// ジェネリクス例
function first<T>(arr: Array<T>): T | undefined {
    return arr[0];
}

const users: Array<{ id: number; name: string }> = [
    { id: 1, name: "Alice" },
    { id: 2, name: "Bob" },
];

console.log(greet("World"));
console.log(first<string>(["a", "b"]));

コンパイル: tsc hello.tshello.js が生成され、node hello.js で実行できます。ts-node / tsx / Bun を使えば直接実行も可能です。

パッケージ管理・ビルドツール

  • npm / yarn / pnpm:基本は JavaScript と同じ。npm i -D typescript でローカルインストール
  • tsc:公式コンパイラ。型チェック+トランスパイル両方
  • ts-node / tsx.ts を直接実行する開発用ランナー
  • esbuild / swc:型チェックを行わず高速トランスパイルだけ。バンドラと組み合わせる
  • tsconfig パス解決baseUrl + paths でモノレポのエイリアスを定義
  • Project References:大規模リポジトリで tsc --build による増分ビルド
  • 型定義の取得npm i -D @types/node @types/react

関連言語との比較

項目TypeScriptJavaScriptFlow(Meta)JSDoc 型注釈
静的型強力なしあり(衰退)限定的
コンパイル必要不要必要不要
ジェネリクス充実なしあり限定
エディタ支援最高(VS Code 由来)普通普通VS Code 経由で良好
採用状況事実上の標準圧倒的縮小傾向軽量プロジェクト向け

注意点・落とし穴

  • any の罠any を使うと型チェックを完全に無効化する。unknown + 型ガード(typeofinstanceof)で安全に扱う
  • 型情報は実行時に存在しないtypeof x === "MyInterface" はできない。実行時バリデーションには zodvalibot を併用
  • 構造的型付け(structural typing):名前ではなく形(プロパティ集合)で型を判定する。C# / Java のような名前ベースとは違う
  • Type-Only Importsimport type { Foo } from "./foo"; を使うと、トランスパイル後の JS から完全に消える
  • 列挙型(enum)の地雷:数値 enum はランタイムに残り、双方向マッピングなど混乱を招く。as const オブジェクト + ユニオン型のほうが推奨
  • strict モードtsconfig.json"strict": true は新規プロジェクトでは必須。途中から有効化すると大量のエラーが出る
  • tsc の出力 と バンドラの設定不整合targetmodule がランタイムと合っていないと実行時に謎のエラー

関連リンク

編集
Post Share
子ページ

子ページはありません

同階層のページ
  1. Python(.py / .pyc)
  2. JavaScript(.js / .mjs / .cjs)
  3. TypeScript(.ts / .tsx)
  4. Go(.go)
  5. Rust(.rs)
  6. Java(.java / .class / .jar)
  7. C / C++(.c / .h / .cpp / .hpp)
  8. Ruby(.rb)
  9. Swift(.swift)
  10. Kotlin(.kt / .kts)

最近更新/作成されたページ