【TypeScript】型の書き方 完全入門｜基本型・Union・Generics・型ガードまで

この記事で学べること

• TypeScriptの型システムの全体像と基本の型（string, number, boolean, any, unknown, never等）
• 配列・タプル・オブジェクト型・interface・type aliasの使い分け
• Union型・Intersection型・リテラル型・テンプレートリテラル型
• 型推論・型アサーション・型ガード（typeof, instanceof, in, ユーザー定義型ガード）
• Generics（ジェネリクス）の基礎から実践パターン
• ユーティリティ型（Partial, Required, Pick, Omit, Record, Readonly等）
• Mapped Types・Conditional Typesの仕組みと活用法
• 実務で使う型パターン集（APIレスポンス型、イベントハンドラー型等）
• よくあるエラーと対処法

function greet(name) {
  return "Hello, " + name.toUpperCase();
}

greet(42); // TypeError: name.toUpperCase is not a function

function greet(name: string) {
  return "Hello, " + name.toUpperCase();
}

greet(42); // コンパイルエラー: Argument of type 'number' is not assignable to parameter of type 'string'

ポイント：TypeScriptの型はコンパイル時のみ存在し、実行時のJavaScriptには残りません。つまり型を付けてもパフォーマンスへの影響はゼロです。

# プロジェクト初期化
mkdir my-ts-project && cd my-ts-project
npm init -y

# TypeScriptをdevDependenciesに追加
npm install --save-dev typescript

# バージョン確認
npx tsc --version

npx tsc --init

{
  "compilerOptions": {
    "target": "ES2020",            // 出力するJSのバージョン
    "module": "commonjs",          // モジュールシステム
    "strict": true,                // 厳格な型チェックを有効化
    "esModuleInterop": true,       // ESM/CJSの相互運用
    "outDir": "./dist",            // 出力先ディレクトリ
    "rootDir": "./src",            // ソースのルート
    "resolveJsonModule": true,     // JSONファイルのimport
    "declaration": true,           // 型定義ファイル(.d.ts)を生成
    "sourceMap": true              // ソースマップを生成
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

注意："strict": true は strictNullChecks、noImplicitAny、strictFunctionTypes など複数の厳格チェックをまとめて有効化します。新規プロジェクトでは必ず有効にしましょう。

# コンパイル（.ts → .js）
npx tsc

# ウォッチモード（ファイル変更を監視して自動コンパイル）
npx tsc --watch

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

let greeting: string = "Hello, TypeScript";
let userName: string = "太郎";
let template: string = `こんにちは、${userName}さん`; // テンプレートリテラルもOK

// エラー: number型を代入しようとした
let wrong: string = 123; // Type 'number' is not assignable to type 'string'

let age: number = 25;
let price: number = 19.99;
let hex: number = 0xff;     // 16進数
let binary: number = 0b1010; // 2進数
let inf: number = Infinity;
let notNum: number = NaN;    // NaNもnumber型

let isActive: boolean = true;
let hasPermission: boolean = false;

// 関数の戻り値にも使える
function isAdult(age: number): boolean {
  return age >= 18;
}

let nothing: null = null;
let notDefined: undefined = undefined;

// strictNullChecks: true の場合
let str: string = null;      // エラー!
let num: number = undefined; // エラー!

// nullを許容したい場合はUnion型を使う
let nullable: string | null = null;       // OK
let optional: number | undefined = undefined; // OK

let anything: any = 42;
anything = "hello";   // OK（型チェックなし）
anything = true;      // OK
anything.foo.bar.baz; // OK（実行時にエラーになる可能性あり）

注意：anyは型安全性を完全に放棄します。「型がわからない」場合は、後述するunknown型を使いましょう。ESLintの@typescript-eslint/no-explicit-anyルールでanyの使用を禁止できます。

let value: unknown = "hello";

// そのままでは操作できない
value.toUpperCase(); // エラー: Object is of type 'unknown'

// 型チェック（型ガード）を行えば使える
if (typeof value === "string") {
  console.log(value.toUpperCase()); // OK: "HELLO"
}

function logMessage(msg: string): void {
  console.log(msg);
}

const warn = (msg: string): void => {
  console.warn(msg);
};

function throwError(msg: string): never {
  throw new Error(msg);
}

// 網羅性チェック（Exhaustive Check）
type Color = "red" | "blue";

function handleColor(c: Color) {
  switch (c) {
    case "red": return "#ff0000";
    case "blue": return "#0000ff";
    default:
      const _exhaustive: never = c;
      return _exhaustive;
  }
}

// 書き方1: 型名[]（推奨）
let numbers: number[] = [1, 2, 3];
let names: string[] = ["Alice", "Bob"];

// 書き方2: Array<型名>（ジェネリクス記法）
let scores: Array<number> = [90, 85, 70];

// 型が違う要素は追加できない
numbers.push("four"); // エラー

// 読み取り専用の配列
const readonlyArr: readonly number[] = [1, 2, 3];
readonlyArr.push(4); // エラー: Property 'push' does not exist

// [string, number] の順番・型が固定
let user: [string, number] = ["Alice", 30];

// 順番を間違えるとエラー
let wrong: [string, number] = [30, "Alice"]; // エラー

// オプション要素
let pair: [string, number?] = ["hello"]; // OK

// 可変長タプル（Rest Elements）
type StrNumBools = [string, number, ...boolean[]];
const example: StrNumBools = ["hi", 1, true, false];

// 名前付きタプル（TS 4.0+）
type Range = [start: number, end: number];
const range: Range = [0, 100];

ポイント：ReactのuseStateフック const [count, setCount] = useState(0) は、タプル型 [number, Dispatch<SetStateAction<number>>] を返しています。タプルの分割代入は実務で頻繁に登場します。

// オブジェクトの形をそのまま型として記述
let user: { name: string; age: number } = {
  name: "太郎",
  age: 25
};

// オプショナルプロパティ（?）
let config: { host: string; port?: number } = {
  host: "localhost"
  // port は省略可能
};

// 読み取り専用プロパティ（readonly）
let point: { readonly x: number; readonly y: number } = { x: 10, y: 20 };
point.x = 30; // エラー: Cannot assign to 'x' because it is a read-only property

interface User {
  name: string;
  age: number;
  email?: string;        // オプション
  readonly id: number;  // 読み取り専用
}

const user: User = {
  name: "太郎",
  age: 25,
  id: 1
};

// メソッドの定義
interface Calculator {
  add(a: number, b: number): number;
  subtract(a: number, b: number): number;
}

// interfaceの拡張（extends）
interface Admin extends User {
  role: "admin";
  permissions: string[];
}

// 宣言マージ（同名のinterfaceは自動的に結合される）
interface Window {
  myCustomProp: string;
}
// ← 元のWindow型にmyCustomPropが追加される

// オブジェクト型
type User = {
  name: string;
  age: number;
};

// プリミティブ型にも名前を付けられる
type ID = string | number;
type Status = "active" | "inactive" | "pending";

// 関数型
type Callback = (data: string) => void;

// タプル型
type Coordinate = [number, number];

// 交差型（Intersection）
type Admin = User & { role: "admin" };

ポイント：一般的な使い分けとして、オブジェクトの構造を定義する場合はinterface、Union型やプリミティブ型に名前を付ける場合はtypeを使うのがおすすめです。プロジェクト内で統一していれば、どちらを使っても大きな問題はありません。

// キーがstring、値がnumberのオブジェクト
interface ScoreMap {
  [subject: string]: number;
}

const scores: ScoreMap = {
  math: 90,
  english: 85,
  science: 78
};

// 固定プロパティとの併用
interface Config {
  version: number;            // 必須プロパティ
  [key: string]: unknown;  // それ以外は任意
}

// string または number
let id: string | number;
id = "abc";  // OK
id = 123;    // OK
id = true;   // エラー: Type 'boolean' is not assignable

// 関数の引数に使う
function printId(id: string | number) {
  // 共通のメソッドしか使えない
  console.log(id.toString()); // OK（両方にある）

  // 型を絞り込めば固有のメソッドが使える
  if (typeof id === "string") {
    console.log(id.toUpperCase()); // OK
  }
}

// 配列との組み合わせ
let arr: (string | number)[] = ["hello", 42, "world"];

// null許容型（よく使うパターン）
type Nullable<T> = T | null;
let username: Nullable<string> = null; // OK

type HasName = { name: string };
type HasAge = { age: number };
type HasEmail = { email: string };

// すべてのプロパティが必要
type Person = HasName & HasAge & HasEmail;

const person: Person = {
  name: "太郎",
  age: 25,
  email: "taro@example.com"
};

// 実務例: 既存の型に機能を追加
type Timestamped<T> = T & {
  createdAt: Date;
  updatedAt: Date;
};

type TimestampedUser = Timestamped<User>;

注意：Intersection型でプリミティブ型同士を交差させるとneverになります。例えば string & number は never です（stringでありかつnumberである値は存在しないため）。Intersection型はオブジェクト型の合成に使いましょう。

// 文字列リテラル型
type Direction = "up" | "down" | "left" | "right";

function move(direction: Direction) {
  console.log(`Moving ${direction}`);
}

move("up");      // OK
move("diagonal"); // エラー: Argument of type '"diagonal"' is not assignable

// 数値リテラル型
type DiceValue = 1 | 2 | 3 | 4 | 5 | 6;

// HTTPステータスコード
type SuccessCode = 200 | 201 | 204;
type ErrorCode = 400 | 401 | 403 | 404 | 500;
type StatusCode = SuccessCode | ErrorCode;

// constアサーションでリテラル型を推論させる
const config = {
  endpoint: "/api/users",
  method: "GET"
} as const;
// config.method の型は "GET"（stringではない）

// 基本的な連結
type World = "world";
type Greeting = `hello ${World}`; // "hello world"

// Union型との組み合わせ（直積）
type Color = "red" | "blue";
type Size = "small" | "large";
type Variant = `${Color}-${Size}`;
// "red-small" | "red-large" | "blue-small" | "blue-large"

// CSSプロパティ名の生成
type CSSProperty = "margin" | "padding";
type CSSDirection = "top" | "right" | "bottom" | "left";
type CSSSpacing = `${CSSProperty}-${CSSDirection}`;
// "margin-top" | "margin-right" | ... | "padding-left" (8通り)

// イベントハンドラー名の生成
type EventName = "click" | "scroll" | "mousemove";
type Handler = `on${Capitalize<EventName>}`;
// "onClick" | "onScroll" | "onMousemove"

組み込み文字列操作型

• Uppercase<T> ― 全て大文字に変換
• Lowercase<T> ― 全て小文字に変換
• Capitalize<T> ― 先頭を大文字に変換
• Uncapitalize<T> ― 先頭を小文字に変換

// 変数の初期化時に推論される
let message = "hello";       // string と推論
let count = 42;               // number と推論
let isValid = true;           // boolean と推論
let items = [1, 2, 3];        // number[] と推論

// constで宣言するとリテラル型になる
const greeting = "hello";     // "hello" と推論（リテラル型）
const PI = 3.14;              // 3.14 と推論

// 関数の戻り値も推論される
function add(a: number, b: number) {
  return a + b; // 戻り値は number と推論
}

// コールバック関数のパラメータも推論される
const nums = [1, 2, 3];
nums.map((n) => n * 2); // n は number と推論

// 分割代入でも推論される
const { name, age } = { name: "太郎", age: 25 };
// name: string, age: number

ポイント：型推論が効く場面では型注釈を省略してコードを簡潔に保ちましょう。ただし、関数の引数や公開APIの戻り値には明示的に型を書くことが推奨されます。

// as 構文（推奨）
const input = document.getElementById("myInput") as HTMLInputElement;
console.log(input.value); // HTMLInputElementとして扱える

// アングルブラケット構文（JSXでは使えない）
const input2 = <HTMLInputElement>document.getElementById("myInput");

// JSONパース結果の型指定
interface ApiResponse {
  data: string[];
  total: number;
}
const response = JSON.parse(jsonStr) as ApiResponse;

// constアサーション（値をリテラル型にする）
const colors = ["red", "green", "blue"] as const;
// readonly ["red", "green", "blue"]

type Color = (typeof colors)[number]; // "red" | "green" | "blue"

注意：型アサーションは型チェックを迂回するため、誤った型を指定すると実行時エラーの原因になります。as anyは特に危険です。型アサーションの代わりに型ガード（次セクション）を使えないか検討しましょう。

// nullまたはundefinedではないと断言
const el = document.getElementById("app")!; // HTMLElement（nullではない）

// ただし要素が存在しない場合は実行時エラーになる
// 安全なのはnullチェックを行う方法
const el2 = document.getElementById("app");
if (el2) {
  el2.textContent = "Hello"; // 安全
}

function padLeft(value: string, padding: string | number): string {
  if (typeof padding === "number") {
    // ここでは padding は number 型
    return " ".repeat(padding) + value;
  }
  // ここでは padding は string 型
  return padding + value;
}

padLeft("hello", 4);       // "    hello"
padLeft("hello", ">> ");  // ">> hello"

class Dog {
  bark() { return "ワン!"; }
}
class Cat {
  meow() { return "ニャー!"; }
}

function makeSound(animal: Dog | Cat): string {
  if (animal instanceof Dog) {
    return animal.bark();  // Dog型に絞り込まれる
  }
  return animal.meow();    // Cat型に絞り込まれる
}

interface Circle {
  kind: "circle";
  radius: number;
}
interface Rectangle {
  kind: "rectangle";
  width: number;
  height: number;
}

type Shape = Circle | Rectangle;

function getArea(shape: Shape): number {
  if ("radius" in shape) {
    // Circle型に絞り込まれる
    return Math.PI * shape.radius ** 2;
  }
  // Rectangle型に絞り込まれる
  return shape.width * shape.height;
}

type Result =
  | { status: "success"; data: string }
  | { status: "error"; error: Error }
  | { status: "loading" };

function handleResult(result: Result) {
  switch (result.status) {
    case "success":
      console.log(result.data);  // data にアクセス可能
      break;
    case "error":
      console.error(result.error); // error にアクセス可能
      break;
    case "loading":
      console.log("Loading...");
      break;
  }
}

interface Fish { swim: () => void; }
interface Bird { fly: () => void; }

// 戻り値の型が「pet is Fish」（型述語）
function isFish(pet: Fish | Bird): pet is Fish {
  return ("swim" in pet);
}

function move(pet: Fish | Bird) {
  if (isFish(pet)) {
    pet.swim();  // Fish型に絞り込まれる
  } else {
    pet.fly();   // Bird型に絞り込まれる
  }
}

// 実務例: nullishチェック関数
function isDefined<T>(value: T | null | undefined): value is T {
  return value !== null && value !== undefined;
}

const items = ["a", null, "b", undefined, "c"];
const filtered = items.filter(isDefined); // string[] に絞り込まれる

// anyを使うと型情報が失われる（NG）
function firstAny(arr: any[]): any {
  return arr[0];
}

// Genericsを使えば型情報を保持できる（OK）
function first<T>(arr: T[]): T | undefined {
  return arr[0];
}

// 型パラメータTは呼び出し時に推論される
const num = first([1, 2, 3]);           // number | undefined
const str = first(["a", "b", "c"]);     // string | undefined

// 明示的に型パラメータを指定することもできる
const val = first<string>(["hello"]); // string | undefined

// キーと値のペアを返す関数
function pair<K, V>(key: K, value: V): [K, V] {
  return [key, value];
}

const p1 = pair("name", "太郎");  // [string, string]
const p2 = pair("age", 25);       // [string, number]

// マップ変換関数
function mapArray<T, U>(arr: T[], fn: (item: T) => U): U[] {
  return arr.map(fn);
}

const lengths = mapArray(["hello", "world"], s => s.length);
// number[]

// lengthプロパティを持つ型のみ受け入れる
interface HasLength {
  length: number;
}

function logLength<T extends HasLength>(item: T): T {
  console.log(item.length);
  return item;
}

logLength("hello");       // OK: stringはlengthを持つ
logLength([1, 2, 3]);     // OK: 配列はlengthを持つ
logLength(42);            // エラー: numberにlengthはない

// keyof制約: オブジェクトのキーに限定する
function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}

const user = { name: "太郎", age: 25 };
getProperty(user, "name");    // string
getProperty(user, "age");     // number
getProperty(user, "email");   // エラー: "email"はkeyof Userに含まれない

// ジェネリックインターフェース
interface ApiResponse<T> {
  data: T;
  status: number;
  message: string;
}

// 使用時に型を指定
const userRes: ApiResponse<User> = {
  data: { name: "太郎", age: 25 },
  status: 200,
  message: "OK"
};

const listRes: ApiResponse<string[]> = {
  data: ["item1", "item2"],
  status: 200,
  message: "OK"
};

// デフォルト型パラメータ
interface Pagination<T = unknown> {
  items: T[];
  page: number;
  totalPages: number;
}

// ジェネリック型エイリアス
type Result<T, E = Error> =
  | { ok: true; value: T }
  | { ok: false; error: E };

class Stack<T> {
  private items: T[] = [];

  push(item: T): void {
    this.items.push(item);
  }

  pop(): T | undefined {
    return this.items.pop();
  }

  peek(): T | undefined {
    return this.items[this.items.length - 1];
  }
}

const numStack = new Stack<number>();
numStack.push(1);
numStack.push(2);
numStack.push("three"); // エラー: Argument of type 'string'

const strStack = new Stack<string>();
strStack.push("hello");

ポイント：型パラメータの命名規則として、T（Type）、K（Key）、V（Value）、E（Element/Error）が慣習的に使われます。複数の型パラメータがある場合は意味のある名前を付けると可読性が上がります。

interface User {
  name: string;
  age: number;
  email: string;
}

// すべてのプロパティがオプショナルになる
type PartialUser = Partial<User>;
// { name?: string; age?: number; email?: string; }

// 実務例: 更新関数の引数（一部だけ更新したい）
function updateUser(id: number, updates: Partial<User>): User {
  const currentUser = getUser(id);
  return { ...currentUser, ...updates };
}

updateUser(1, { name: "新しい名前" }); // OK: ageとemailは省略可

interface Config {
  host?: string;
  port?: number;
  debug?: boolean;
}

// すべて必須になる
type FullConfig = Required<Config>;
// { host: string; port: number; debug: boolean; }

interface User {
  id: number;
  name: string;
  email: string;
  password: string;
}

// nameとemailだけ取り出す
type UserPreview = Pick<User, "name" | "email">;
// { name: string; email: string; }

// passwordを除外
type SafeUser = Omit<User, "password">;
// { id: number; name: string; email: string; }

// 新規作成時はidが不要
type CreateUserInput = Omit<User, "id">;
// { name: string; email: string; password: string; }

// キーがstring、値がnumber
const scores: Record<string, number> = {
  math: 90,
  english: 85,
  science: 78
};

// リテラル型と組み合わせて、キーを限定する
type Role = "admin" | "editor" | "viewer";

const permissions: Record<Role, string[]> = {
  admin: ["read", "write", "delete"],
  editor: ["read", "write"],
  viewer: ["read"]
};

const user: Readonly<User> = {
  id: 1,
  name: "太郎",
  email: "taro@example.com",
  password: "secret"
};

user.name = "次郎"; // エラー: Cannot assign to 'name'

// Extract: Union型から特定の型を抽出
type T1 = Extract<"a" | "b" | "c", "a" | "b">;
// "a" | "b"

// Exclude: Union型から特定の型を除外
type T2 = Exclude<"a" | "b" | "c", "a">;
// "b" | "c"

// NonNullable: null と undefined を除外
type T3 = NonNullable<string | null | undefined>;
// string

// ReturnType: 関数の戻り値の型を取得
function createUser() {
  return { id: 1, name: "太郎" };
}
type CreatedUser = ReturnType<typeof createUser>;
// { id: number; name: string; }

// Parameters: 関数のパラメータ型をタプルで取得
function greet(name: string, age: number) {}
type GreetParams = Parameters<typeof greet>;
// [string, number]

// Awaited: Promiseの中身の型を取得（TS 4.5+）
type T4 = Awaited<Promise<string>>;
// string

// Mapped Typesの基本構文
// { [P in K]: T }

// Partialの内部実装
type MyPartial<T> = {
  [P in keyof T]?: T[P];
};

// Readonlyの内部実装
type MyReadonly<T> = {
  readonly [P in keyof T]: T[P];
};

// 全プロパティの値をstring型にする
type Stringify<T> = {
  [P in keyof T]: string;
};

interface User {
  name: string;
  age: number;
  active: boolean;
}

type StringifiedUser = Stringify<User>;
// { name: string; age: string; active: string; }

// Getter型を自動生成
type Getters<T> = {
  [P in keyof T as `get${Capitalize<string & P>}`]: () => T[P];
};

type UserGetters = Getters<User>;
// {
//   getName: () => string;
//   getAge: () => number;
//   getActive: () => boolean;
// }

// 特定のプロパティを除外（as neverでフィルタリング）
type OmitByType<T, U> = {
  [P in keyof T as T[P] extends U ? never : P]: T[P];
};

type WithoutBooleans = OmitByType<User, boolean>;
// { name: string; age: number; }

// 基本構文: T extends U ? X : Y

// 型が文字列かどうかを判定
type IsString<T> = T extends string ? "yes" : "no";

type A = IsString<string>;  // "yes"
type B = IsString<number>;  // "no"

// 配列の要素型を取得
type ElementOf<T> = T extends (infer E)[] ? E : never;

type C = ElementOf<string[]>;     // string
type D = ElementOf<number[]>;     // number
type E = ElementOf<string>;       // never（配列ではない）

// 関数の戻り値型を取得（ReturnTypeの実装）
type MyReturnType<T> = T extends (...args: any[]) => infer R ? R : never;

// Promiseの中身を取得
type UnwrapPromise<T> = T extends Promise<infer U> ? U : T;

type F = UnwrapPromise<Promise<string>>;  // string
type G = UnwrapPromise<number>;           // number（Promiseではない）

// 配列の最初の要素の型を取得
type Head<T extends any[]> = T extends [infer First, ...any[]] ? First : never;

type H = Head<[string, number, boolean]>; // string

ポイント：Mapped TypesやConditional Typesは高度な機能ですが、ライブラリの型定義を読む際に頻繁に登場します。まずはユーティリティ型を使いこなし、その内部実装を理解していくと自然に身に付きます。

// 成功・失敗を型で表現（Discriminated Union）
type ApiResponse<T> =
  | { success: true; data: T; }
  | { success: false; error: { code: number; message: string; }; };

// ページネーション付きレスポンス
interface PaginatedResponse<T> {
  items: T[];
  pagination: {
    page: number;
    perPage: number;
    total: number;
    totalPages: number;
  };
}

// fetch関数のラッパー
async function fetchApi<T>(url: string): Promise<ApiResponse<T>> {
  try {
    const res = await fetch(url);
    const data = await res.json() as T;
    return { success: true, data };
  } catch (e) {
    return { success: false, error: { code: 500, message: String(e) } };
  }
}

// 使用例
const result = await fetchApi<User[]>("/api/users");
if (result.success) {
  console.log(result.data); // User[]
} else {
  console.error(result.error.message); // string
}

// DOM イベント
const handleClick = (e: MouseEvent) => {
  console.log(e.clientX, e.clientY);
};

const handleInput = (e: Event) => {
  const target = e.target as HTMLInputElement;
  console.log(target.value);
};

// React のイベント型
// import { ChangeEvent, FormEvent } from "react";
// const handleChange = (e: ChangeEvent<HTMLInputElement>) => { ... };
// const handleSubmit = (e: FormEvent<HTMLFormElement>) => { ... };

// カスタムイベント型
type EventMap = {
  userLogin: { userId: string; timestamp: Date };
  userLogout: { userId: string };
  pageView: { path: string; referrer?: string };
};

function emit<K extends keyof EventMap>(event: K, data: EventMap[K]) {
  // ...
}

emit("userLogin", { userId: "123", timestamp: new Date() }); // OK
emit("pageView", { path: "/home" });                          // OK
emit("userLogin", { path: "/home" });                          // エラー

// 非同期データの4つの状態を型で表現
type AsyncState<T> =
  | { status: "idle" }
  | { status: "loading" }
  | { status: "success"; data: T }
  | { status: "error"; error: string };

// 使用例
function renderUsers(state: AsyncState<User[]>) {
  switch (state.status) {
    case "idle":
      return "初期状態";
    case "loading":
      return "読み込み中...";
    case "success":
      return state.data.map(u => u.name);
    case "error":
      return `エラー: ${state.error}`;
  }
}

// フォームのフィールドエラー型
type FormErrors<T> = {
  [K in keyof T]?: string;
};

interface SignUpForm {
  username: string;
  email: string;
  password: string;
}

const errors: FormErrors<SignUpForm> = {
  email: "無効なメールアドレスです",
  password: "8文字以上にしてください"
  // username は省略可能
};

// バリデーション関数の型
type Validator<T> = (value: T) => string | null;

const required: Validator<string> = (v) =>
  v.length === 0 ? "入力必須です" : null;

const minLength = (min: number): Validator<string> =>
  (v) => v.length < min ? `${min}文字以上にしてください` : null;

// ブランドを付与する型
type Brand<T, B> = T & { __brand: B };

// UserIdとPostIdは両方stringだが、混同できない
type UserId = Brand<string, "UserId">;
type PostId = Brand<string, "PostId">;

function getUser(id: UserId) { /* ... */ }
function getPost(id: PostId) { /* ... */ }

const userId = "user_123" as UserId;
const postId = "post_456" as PostId;

getUser(userId);  // OK
getUser(postId);  // エラー: PostIdはUserIdに代入できない

// エラーになるコード
const el = document.getElementById("app");
el.textContent = "Hello"; // エラー: Object is possibly 'null'

// 対処法1: nullチェック
if (el) {
  el.textContent = "Hello"; // OK
}

// 対処法2: Optional Chaining + Nullish Coalescing
const text = el?.textContent ?? "default";

// 対処法3: Non-null Assertion（確実に存在すると分かっている場合のみ）
const el2 = document.getElementById("app")!;
el2.textContent = "Hello"; // OK（ただし要素がない場合は実行時エラー）

// Union型の値を安全に扱う
function processValue(value: string | number | boolean) {
  // そのままではstringのメソッドは使えない
  // value.toUpperCase(); // エラー

  if (typeof value === "string") {
    return value.toUpperCase(); // OK: string型に絞り込まれた
  }
  if (typeof value === "number") {
    return value.toFixed(2);     // OK: number型に絞り込まれた
  }
  return value; // boolean型
}

// 問題: オブジェクトのプロパティが広い型になる
const config = {
  method: "GET", // string型と推論される
  url: "/api/users"
};

// fetchの第2引数はmethod: "GET" | "POST" | ... を期待
// fetch(config.url, { method: config.method }); // エラー

// 解決: as const でリテラル型にする
const config2 = {
  method: "GET",
  url: "/api/users"
} as const;
// config2.method は "GET" 型（リテラル型）

// または個別にリテラル型を指定
const config3 = {
  method: "GET" as "GET",
  url: "/api/users"
};

記事の振り返り

• 基本型: string, number, boolean, null, undefined, any, unknown, void, neverの使い分け
• 配列・タプル: number[] と [string, number] の違い
• オブジェクト型: interface（拡張・宣言マージ向き）と type（Union・プリミティブ型向き）の使い分け
• Union型・Intersection型: | で「いずれか」、& で「すべてを満たす」型
• リテラル型: 特定の値に限定する型と、テンプレートリテラル型による文字列型の組み合わせ
• 型推論: TypeScriptが自動で型を判定する仕組み。冗長な型注釈を避けてコードを簡潔に
• 型アサーション: as で型を明示。as const でリテラル型に固定
• 型ガード: typeof, instanceof, in, ユーザー定義型ガードで安全に型を絞り込む
• Generics: 型パラメータで再利用可能な型安全コード。extends制約で型を限定
• ユーティリティ型: Partial, Required, Pick, Omit, Record等で既存型を変換
• Mapped Types・Conditional Types: 型レベルのループと条件分岐
• 実務パターン: APIレスポンス型、イベントハンドラー型、AsyncState、Branded Types等

ポイント：TypeScriptの公式ハンドブック（typescriptlang.org）は最も信頼できるリソースです。この記事で学んだ内容をさらに深めたい場合はぜひ参照してください。