プログラミング言語

TypeScript

Microsoft(Anders Hejlsberg) / 2012年登場

JavaScript に静的な型を足した言語。JS の資産をそのまま使え、大規模開発の事実上の標準。型が消えて実行されるのは JS。

3つの要点
TL;DR
  1. JS に静的型を足したスーパーセット言語。
  2. 型による安全性とエディタ補完が強力。
  3. 大規模 Web なら素の JS よりこちらが標準。

基本情報

仕様と特徴

TypeScript のロゴ
製品・技術の概要TypeScriptJavaScript に静的な型を足した言語。JS の資産をそのまま使え、大規模開発の事実上の標準。型が消えて実行されるのは JS。
型付け
静的強い型付けJS のスーパーセット)
実行方式
トランスパイル → JavaScript
パラダイム
マルチパラダイムJS + 静的型)
登場
2012年Microsoft(Anders Hejlsberg)
この言語の強み
型で安全エディタ補完が強力既存の JS 資産をそのまま使える
活躍する領域
大規模 Web アプリフロント/バック共通 / ライブラリ開発

選定ガイド

選定ポイント

採用する理由と、事前に受け入れるべきトレードオフを分けて確認します。

採用に向く条件

選ぶ理由

  1. 型で安全・エディタ補完が強力
  2. 既存の JS 資産をそのまま使える
  3. 大規模で保守しやすい

事前に確認する条件

考慮すべき点

  1. ビルド/型定義の手間
  2. 型は実行時に消える(あくまで開発時の保証)
  3. 学習コストが上乗せ

向いている用途

こんな用途に向く

大規模 Web アプリフロント/バック共通ライブラリ開発

詳しい解説

もっと詳しく

どんな言語か

TypeScript は 2012 年に Microsoft(設計は Anders Hejlsberg)が公開した言語で、JavaScript に静的型システムを足した「スーパーセット」です。正しい JavaScript はそのまま正しい TypeScript でもあるため、既存コードに少しずつ型を導入していけます。

通常のブラウザ配布では、コンパイラやバンドラーが TypeScript を JavaScript へ変換してから実行します。現在の Node.js は、消去可能な型構文だけを含む .ts を型除去して直接起動できますが、tsconfig.json は読み込まず型検査もしません。どちらの経路でも型注釈や interface は実行時に残らないため、型は「開発時の安全装置」であって実行時の検証ではありません。

横にスクロール

tsconfig と TypeScript ソースから Program、Binder、型検査を構築し、JavaScript、型宣言、ソースマップを生成して bundler と実行環境へ渡す経路と、型消去、増分ビルド、実行時検証の境界
TypeScript は設定と依存からプログラム全体を組み立て、型検査と JavaScript 生成を行います。型は実行時に消えるため、外部入力は別に検証し、実際の解決規則は bundler・Node.js・ブラウザと揃えます。

型がもたらす価値

型の本当の効果は、エディタとの連携で現れます。補完・リファクタリング・定義ジャンプが正確になり、関数の引数や戻り値の食い違いを書いた瞬間に検出できます。

  • コードが仕様書を兼ね、大人数開発でも認識がそろう。
  • リファクタリング時に壊れた箇所を型エラーが洗い出す。
  • 今や大規模 Web 開発の事実上の標準になっている。

得意なこと・不得意なこと

フロントエンド(React など)からサーバーサイド(Node.js)まで、JavaScript が動く場所すべてで使えます。一方、型はあくまで開発時のもので、外部 API の戻り値など実行時のデータが型どおりとは限りません。型を信じすぎると、想定外の値で実行時エラーになります。

つまずきやすいところ

// interface で構造を定め、関数に型注釈を付ける
interface User {
  id: number;
  name: string;
}
function greet(user: User): string {
  return `Hello, ${user.name}`; // 名前の打ち間違いは型でも防げない
}
  • any を多用すると、せっかくの型チェックが無効になる。
  • ライブラリの型定義(@types)が古い/不正確なことがある。

言語選定

TypeScriptを実務で読む

TL;DRは入口です。実際に選ぶ・使う段階では、何を解決するか、何と比較するか、導入後にどこで詰まるかまで見る必要があります。

解決すること

大規模 Web アプリ

比較で見る軸

型付け: 静的・強い型付け(JS のスーパーセット) / 実行方式: トランスパイル → JavaScript / パラダイム: マルチパラダイム(JS + 静的型)

導入後に効く点

既存の JS 資産をそのまま使える

先に潰すリスク

ビルド/型定義の手間

数字・仕様の読み方
型付け
静的・強い型付け(JS のスーパーセット)
実行方式
トランスパイル → JavaScript
パラダイム
マルチパラダイム(JS + 静的型)
登場
2012年
Microsoft(Anders Hejlsberg)

判断チェックリスト

  • 自社の用途が「大規模 Web アプリ / フロント/バック共通」に近いか確認する。
  • 強みである「型で安全・エディタ補完が強力」が本当に評価軸になるか確認する。
  • 注意点の「ビルド/型定義の手間」を運用で吸収できるか確認する。
  • 公開値や仕様値は、対象プラン・対象機種・対象リージョンまで確認する。
  • 既存システム、ID、ネットワーク、監視、バックアップとの接続方法を先に洗い出す。
  • 小さく試してから、本番移行、権限設計、障害時手順、コスト監視を決める。

次に確認する観点

大規模 Web アプリフロント/バック共通ライブラリ開発

最初の一歩

Hello, World!

const msg: string = "Hello, World!";
console.log(msg);
公式ドキュメント