TypeScript型安全性向上ガイド：厳格な型定義でバグを80%削減する実装パターン

// 悪い例：any型の使用
function processUser(user: any) {
  console.log(user.name.toUpperCase());
  return user.age + 1;
}

// 良い例：明示的な型定義
interface User {
  name: string;
  age: number;
  email: string;
}

function processUser(user: User): number {
  console.log(user.name.toUpperCase());
  return user.age + 1;
}

// リテラル型とUnion型の組み合わせ
type Status = 'idle' | 'loading' | 'success' | 'error';

interface ApiState<T> {
  status: Status;
  data: T | null;
  error: Error | null;
}

// 判別可能なUnion型
type ApiResult<T> =
  | { status: 'idle' }
  | { status: 'loading' }
  | { status: 'success'; data: T }
  | { status: 'error'; error: Error };

function handleApiResult<T>(result: ApiResult<T>) {
  switch (result.status) {
    case 'idle':
      return '待機中';
    case 'loading':
      return '読み込み中';
    case 'success':
      // result.dataは確実に存在する
      return '成功: ' + JSON.stringify(result.data);
    case 'error':
      // result.errorは確実に存在する
      return 'エラー: ' + result.error.message;
  }
}

// ジェネリクスを使った型安全な配列操作
function findById<T extends { id: string }>(
  items: T[],
  id: string
): T | undefined {
  return items.find(item => item.id === id);
}

// 使用例
interface Product {
  id: string;
  name: string;
  price: number;
}

const products: Product[] = [
  { id: '1', name: '商品A', price: 1000 },
  { id: '2', name: '商品B', price: 2000 }
];

// 戻り値の型はProduct | undefinedと推論される
const product = findById(products, '1');
if (product) {
  console.log(product.name); // 型安全にアクセス可能
}

// ユーザー定義型ガード
interface SuccessResponse<T> {
  success: true;
  data: T;
}

interface ErrorResponse {
  success: false;
  error: string;
}

type ApiResponse<T> = SuccessResponse<T> | ErrorResponse;

// 型ガード関数
function isSuccessResponse<T>(
  response: ApiResponse<T>
): response is SuccessResponse<T> {
  return response.success === true;
}

// 使用例
async function fetchUser(id: string) {
  const response: ApiResponse<User> = await api.get('/users/' + id);
  
  if (isSuccessResponse(response)) {
    // この分岐内ではresponse.dataが確実に存在
    console.log(response.data.name);
  } else {
    // この分岐内ではresponse.errorが確実に存在
    console.error(response.error);
  }
}

// typeof型ガード
function processValue(value: string | number) {
  if (typeof value === 'string') {
    // この分岐内ではvalueはstring型
    return value.toUpperCase();
  } else {
    // この分岐内ではvalueはnumber型
    return value.toFixed(2);
  }
}

// instanceof型ガード
class ApiError extends Error {
  constructor(public statusCode: number, message: string) {
    super(message);
  }
}

function handleError(error: Error | ApiError) {
  if (error instanceof ApiError) {
    // この分岐内ではerror.statusCodeにアクセス可能
    console.error('API Error ' + error.statusCode + ': ' + error.message);
  } else {
    console.error('Error: ' + error.message);
  }
}

// オプショナルチェイニングの活用
interface User {
  name: string;
  profile?: {
    bio?: string;
    avatar?: string;
  };
}

function getUserBio(user: User): string {
  // 従来の方法（冗長）
  // return user.profile && user.profile.bio ? user.profile.bio : '未設定';
  
  // オプショナルチェイニングとNullish Coalescing
  return user.profile?.bio ?? '未設定';
}

// 配列やメソッドにも使用可能
function getFirstItemName(items?: Array<{ name: string }>): string {
  return items?.[0]?.name ?? 'なし';
}

// メソッド呼び出し
interface Logger {
  log?: (message: string) => void;
}

function logMessage(logger: Logger, message: string) {
  logger.log?.(message); // logメソッドが存在する場合のみ実行
}

# よく使うライブラリの型定義
npm install --save-dev @types/react @types/node @types/lodash

# 型定義の確認
npm list @types/react

// src/types/custom-library.d.ts
declare module 'custom-library' {
  export interface Config {
    apiKey: string;
    endpoint: string;
  }

  export class Client {
    constructor(config: Config);
    fetch<T>(path: string): Promise<T>;
    post<T>(path: string, data: unknown): Promise<T>;
  }

  export function createClient(config: Config): Client;
}

// グローバル変数の型定義
declare global {
  interface Window {
    customAnalytics?: {
      track: (event: string, properties?: Record<string, unknown>) => void;
    };
  }
}

export {};

{
  "dependencies": {
    "react": "18.2.0"
  },
  "devDependencies": {
    "@types/react": "18.2.0",
    "typescript": "5.3.3"
  }
}

// src/types/__tests__/custom-library.test-d.ts
import { expectType } from 'tsd';
import { createClient, Client } from 'custom-library';

const client = createClient({ apiKey: 'key', endpoint: 'https://api.example.com' });
expectType<Client>(client);

// 型エラーを期待するテスト
// @ts-expect-error
createClient({ apiKey: 123 }); // apiKeyはstring型のみ

{
  "compilerOptions": {
    "strict": true,
    "target": "ES2022",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  }
}

{
  "compilerOptions": {
    "strict": true,
    // 未使用変数のチェック
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    // 暗黙的なreturnのチェック
    "noImplicitReturns": true,
    // switch文の網羅性チェック
    "noFallthroughCasesInSwitch": true,
    // 到達不可能なコードの検出
    "allowUnreachableCode": false,
    // 未使用ラベルの検出
    "allowUnusedLabels": false,
    // インデックスシグネチャの厳格化
    "noUncheckedIndexedAccess": true,
    // オーバーライドの明示化
    "noImplicitOverride": true
  }
}

// noUncheckedIndexedAccess: true の場合
const items = ['a', 'b', 'c'];
const first = items[0]; // 型: string | undefined

// 存在チェックが必要
if (first) {
  console.log(first.toUpperCase()); // OK
}

// または非null アサーション（確実な場合のみ）
console.log(items[0]!.toUpperCase());

{
  "compilerOptions": {
    "strict": true,
    // パスエイリアスの設定
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "@components/*": ["src/components/*"],
      "@utils/*": ["src/utils/*"]
    },
    // ライブラリの型定義
    "lib": ["ES2022", "DOM", "DOM.Iterable"],
    // ソースマップの生成
    "sourceMap": true,
    // 宣言ファイルの生成（ライブラリの場合）
    "declaration": true,
    "declarationMap": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist", "**/*.spec.ts"]
}