はじめに

TypeScript（TS） は、Microsoft が開発した JavaScript の拡張言語であり、静的型付けを備えたスクリプト言語です。
本記事では、TypeScript の基本概念や JavaScript との違い、そして TypeScript を使うメリットについて解説します。

1. TypeScript とは？

TypeScript は JavaScript のスーパーセットであり、型システムを持つことでコードの安全性を向上させる 言語です。
TypeScript のコードは、最終的に JavaScript にコンパイルされ、通常の JavaScript 環境で実行できます。

TypeScript の主な特徴

• 静的型付け
  （型を明示的に指定可能）
• コンパイル時エラーの検出
  （実行前にエラーを発見）
• ES6+ の機能をサポート
  （class, async/await, module など）
• JavaScript との互換性
  （JavaScript のコードをそのまま利用可能）

2. TypeScript と JavaScript の違い

① 静的型付け vs. 動的型付け

JavaScript は動的型付け言語であり、変数の型が実行時に決まります。
一方、TypeScript は静的型付けを採用し、コンパイル時に型をチェックできます。

JavaScript（動的型付け）

JAVASCRIPT
let message = "Hello";
message = 42; // エラーにならない（実行時に判明）

TypeScript（静的型付け）

TYPESCRIPT
let message: string = "Hello";
message = 42; // コンパイルエラー

TypeScript では、型を指定することで 不適切な型の代入を防ぐことができる ため、バグの発生を抑えられます。

② 型推論（Type Inference）

TypeScript は型を明示的に指定しなくても、変数の値から型を推論することができます。

TYPESCRIPT
let age = 25; // TypeScript は自動的に number 型と推論
// age = "twenty-five";  // エラー: string を number に代入できない

このように、型を明示的に書かなくても、TypeScript が適切な型を推測してくれます。

③ インターフェースと型エイリアス

TypeScript では、オブジェクトの構造を定義するために インターフェース（interface） や 型エイリアス（type） を利用できます。

TYPESCRIPT
interface Person {
  name: string;
  age: number;
}

const user: Person = {
  name: "Alice",
  age: 30,
};

JavaScript ではオブジェクトの型を事前に定義することはできませんが、TypeScript ではインターフェースを利用することで データ構造を明確に定義できる というメリットがあります。

3. TypeScript を使うメリット

① エラーの早期発見

TypeScript は コンパイル時にエラーを検出できる ため、実行時のバグを未然に防ぐことができます。

TYPESCRIPT
let count: number = "10"; // エラー: string を number に代入できない

JavaScript では実行しないと気づけないエラーを、TypeScript では 開発中に防ぐことができる のが大きな利点です。

② 開発の効率化

TypeScript は コード補完（IntelliSense）や リファクタリングの支援 が充実しており、開発の効率を向上させます。

TYPESCRIPT
const user = {
  name: "Alice",
  age: 25,
};

console.log(user.nmae); // タイプミス（name の間違い）をコンパイル時に検出

JavaScript では user.nmae のような スペルミスを実行するまで気づけない ですが、TypeScript ではエディタが 事前にエラーを指摘 してくれます。

③ 大規模開発に向いている

TypeScript は、インターフェースや型定義を活用することで コードの可読性が向上し、チーム開発に適している という特徴があります。

TYPESCRIPT
type User = {
  id: number;
  name: string;
  isAdmin: boolean;
};

const fetchUser = (id: number): User => {
  return { id, name: "Bob", isAdmin: false };
};

型を定義しておくことで、関数の戻り値や引数の型が明確になり、コードの理解や保守が容易になる ため、大規模なプロジェクトで特に役立ちます。

4. TypeScript の導入方法

TypeScript を使うには、まず Node.js をインストールし、typescript パッケージを導入します。

SH
npm install -g typescript

その後、tsc（TypeScript コンパイラ）を使って .ts ファイルを .js にコンパイルできます。

SH
tsc example.ts  # example.ts → example.js に変換

また、tsconfig.json を設定することで、プロジェクト全体の設定を管理できます。

まとめ

• TypeScript は 静的型付け を備えた JavaScript のスーパーセット
• JavaScript と比べて 型安全性が高く、エラーの早期発見が可能
• 型推論やインターフェース を活用し、コードの可読性・保守性を向上
• 大規模開発やチーム開発に適している
• tsc を使って .ts ファイルを .js にコンパイルして実行