TypeScript入門｜型安全なコードの書き方と実践パターン

TypeScriptとは？JavaScriptに「型」を加えた言語

TypeScriptはMicrosoftが開発した、JavaScriptに静的型付けを加えたプログラミング言語です。

TypeScriptを使う理由： - 型エラーをコーディング時に検出できる（実行前にバグを発見） - IDEの補完・リファクタリングが強力になる - 大規模開発でのコードの読みやすさが向上する

現代のWebフロントエンド開発（React・Next.js等）では、TypeScriptがほぼ標準になっています。

基本的な型の書き方

プリミティブ型

let name: string = "田中";
let age: number = 30;
let isActive: boolean = true;

配列とオブジェクト

// 配列
let scores: number[] = [90, 85, 70];
let names: string[] = ["Alice", "Bob"];

// オブジェクト型（interfaceで定義）
interface User {
  id: number;
  name: string;
  email: string;
  age?: number; // ?をつけるとオプショナル（省略可能）
}

const user: User = {
  id: 1,
  name: "田中",
  email: "tanaka@example.com"
};

関数の型定義

// 引数と返り値の型を明示する
function add(a: number, b: number): number {
  return a + b;
}

// アロー関数でも同様
const greet = (name: string): string => {
  return `こんにちは、${name}さん！`;
};

Union型とIntersection型

// Union型（AまたはB）
type Status = "active" | "inactive" | "pending";
let status: Status = "active";

// Intersection型（AかつB）
interface HasName { name: string; }
interface HasAge { age: number; }
type Person = HasName & HasAge;

ジェネリクス

// 型を引数のように使える
function getFirst<T>(arr: T[]): T {
  return arr[0];
}

getFirst<number>([1, 2, 3]);  // number型として返る
getFirst<string>(["a", "b"]); // string型として返る

TypeScriptプロジェクトの始め方

# TypeScriptのインストール
npm install -D typescript

# tsconfig.jsonの生成
npx tsc --init

# TypeScriptファイルをコンパイル
npx tsc

# ts-nodeで直接実行（開発時に便利）
npm install -D ts-node
npx ts-node index.ts

まとめ

TypeScriptは最初の学習コストこそかかりますが、習得後は開発効率と品質が大幅に上がります。まずは小さなCLIツールや簡単なWebアプリをTypeScriptで書いてみましょう。