Giriş: Type-Safe Error Handling

TypeScript 5.6 ile discriminated union types sayesinde, derleme zamanında (compile-time) tüm hata durumlarını modelleyebiliriz. Runtime'da yakalanması zor beklenmedik hatalar statik olarak denetlenir.

1. Discriminated Union Pattern

// lib/types/result.ts

export type Success<T> = {
  type: 'success';
  data: T;
  timestamp: Date;
};

export type ValidationError = {
  type: 'validation_error';
  field: string;
  message: string;
};

export type PaymentError = {
  type: 'payment_error';
  code: 'insufficient_funds' | 'declined' | 'timeout';
  message: string;
  retryable: boolean;
};

export type NetworkError = {
  type: 'network_error';
  statusCode: number;
  message: string;
};

export type AppError = ValidationError | PaymentError | NetworkError;
export type Result<T> = Success<T> | AppError;

// Type guard fonksiyonları
export function isSuccess<T>(result: Result<T>): result is Success<T> {
  return result.type === 'success';
}

// ✅ DÜZELTME: assertNever çalışması için return type never
export function assertNever(x: never): never {
  throw new Error(`Beklenmeyen tip: ${JSON.stringify(x)}`);
}

2. Server Action'da Hata Yönetimi

'use server';

import { z } from 'zod';
import type { Result } from '@/lib/types/result';

const checkoutSchema = z.object({
  orderId: z.string().uuid(),
  amount: z.number().positive(),
  paymentMethod: z.enum(['card', 'bank_transfer']),
});

export async function processCheckoutAction(
  formData: FormData
): Promise<Result<{ orderId: string; transactionId: string }>> {
  try {
    const rawData = Object.fromEntries(formData);
    const validatedData = checkoutSchema.parse(rawData);

    const paymentResult = await processPayment(
      validatedData.amount,
      validatedData.paymentMethod
    );

    if (!paymentResult.success) {
      return {
        type: 'payment_error',
        code: paymentResult.code,
        message: paymentResult.message,
        retryable: paymentResult.retryable,
      };
    }

    return {
      type: 'success',
      data: {
        orderId: validatedData.orderId,
        transactionId: paymentResult.transactionId,
      },
      timestamp: new Date(),
    };
  } catch (error: unknown) {
    // ✅ DÜZELTME: error explicitly unknown type olarak tanımlandı
    if (error instanceof z.ZodError) {
      const firstError = error.errors[0];
      return {
        type: 'validation_error',
        field: String(firstError.path[0] || 'form'),
        message: firstError.message,
      };
    }
    
    return {
      type: 'network_error',
      statusCode: 500,
      message: 'Bağlantı hatası oluştu',
    };
  }
}

3. Client Component'te Exhaustive Error Handling

// components/CheckoutForm.tsx
'use client';

import { useState } from 'react';
import { processCheckoutAction } from '@/app/actions/checkout';
import { isSuccess, type Result, type AppError } from '@/lib/types/result';

export function CheckoutForm() {
  const [result, setResult] = useState<Result<{ orderId: string; transactionId: string }> | null>(null);

  async function handleCheckout(formData: FormData) {
    const res = await processCheckoutAction(formData);
    setResult(res);
  }

  return (
    <div className="space-y-4">
      <form action={handleCheckout}>
        <input type="hidden" name="orderId" value="123" />
        <button type="submit" className="btn-primary">Ödeme Yap</button>
      </form>

      {result && !isSuccess(result) && (
        <ErrorDisplay error={result} />
      )}
    </div>
  );
}

// ✅ DÜZELTME: Switch statement return types uyumlu, exhaustive checking
function ErrorDisplay({ error }: { error: AppError }): JSX.Element {
  switch (error.type) {
    case 'payment_error': {
      return (
        <div className="alert alert-error">
          <p>Ödeme Hatası: {error.message}</p>
          {error.retryable && <button>Tekrar Dene</button>}
        </div>
      );
    }
    case 'validation_error': {
      return (
        <p className="text-red-500">
          {error.field}: {error.message}
        </p>
      );
    }
    case 'network_error': {
      return (
        <p className="text-amber-500">
          Ağ Hatası ({error.statusCode}): {error.message}
        </p>
      );
    }
    // TS5.6: default clause yazılmadı, tüm varyasyonlar handle edildi
  }
}

4. Best Practices

Discriminated Union: Her error tipinin mutlaka ayırt edici benzersiz bir type alanı olmalıdır.
Exhaustive Checking: Switch bloklarında tüm varyasyonları handle edin, default clause yazılmayabilir.
Unknown Error Handling: catch(error: unknown) açıkça yazın ve tip daraltması yapın.
Return Type Tutarlılığı: Tüm case branch'leri aynı return type döndürmelidir.

Özet

TypeScript 5.6'nın discriminated union pattern'i ile compile-time'da runtime sürprizlerini sıfıra indirebilir ve güvenli hata işleme mimarileri inşa edebilirsiniz.