TypeScript

一言で言うと

JavaScript に静的型を加えた言語。書いたコードはコンパイルで JS に変換され、ブラウザや Node.js でそのまま動く。

詳細

TypeScript は Microsoft 製の言語で、JavaScript のスーパーセットです。JS のコードはそのまま TS としても動き、そこに型注釈・interface・generics などを足していくと、エディタの補完、リファクタリング、コンパイル時のバグ検出がぐっと強力になります。

実行時には型情報が消えるため (tsc が JS に落とす)、性能ペナルティはゼロです。React・Next.js・NestJS・Vite といった主要フレームワークが標準サポートしています。

具体例

// 型注釈と関数
function greet(name: string, age: number): string {
  return ${name} (${age});
}
// interface vs type
interface User {
  id: string;
  name: string;
}
type UserId = User["id"]; // ユーティリティ型
// generics
function first(items: T[]): T | undefined {
  return items[0];
}
const n = first([1, 2, 3]); // n: number | undefined
// ユニオン + 型ガード
function format(value: string | number): string {
  if (typeof value === "string") return value.trim();
  return value.toFixed(2);
}

JS プロジェクトから移行するときは、まず tsconfig.json で allowJs: true にして拡張子を .ts / .tsx に少しずつ変えていけば段階移行できます。

使い分け / トレードオフ

interface と type の使い分けは、オブジェクトの形 (構造) を表すときは interface (宣言マージ・extends がしやすい)、ユニオン・タプル・条件型などプリミティブ含む型エイリアスは type が定番です。

学習コストとビルド時間が増える一方、3 人以上のチーム開発・規模 5,000 行以上のプロジェクトでは、保守コストが下がる効果のほうが圧倒的に大きいです。試作品・1 ファイルのスクリプトなら素の JS のままでも構いません。

関連用語