TypeScript Formatla

Biçimlendirilmiş Kod

Yukarıdaki küçültülmüş TypeScript’e biçimlendiriciyi uygulamak şunu üretir:

type ApiResponse<T> = {
  data: T;
  status: number;
  message: string;
  meta: {
    page: number;
    total: number;
    hasNext: boolean;
  };
};

interface User {
  id: number;
  name: string;
  email: string;
  role: "admin" | "user" | "guest";
  preferences: {
    theme: "light" | "dark";
    language: string;
  };
}

async function fetchUsers(
  page: number = 1,
): Promise<ApiResponse<User[]>> {
  const response = await fetch(`/api/users?page=${page}`);
  if (!response.ok) {
    throw new Error(`HTTP ${response.status}`);
  }
  return response.json();
}

function filterByRole<T extends User>(
  users: T[],
  role: T["role"],
): T[] {
  return users.filter((u) => u.role === role);
}

export type { ApiResponse, User };
export { fetchUsers, filterByRole };

Her tip kendi bildirimini alır. Arayüzlerde her satırda bir özellik olur. Generic tip parametreleri yazdırma genişliğini aştığında satırlara bölünür. Birleşim (union) tipi üyeleri taranabilirlik için dikey hizalanır.

TypeScript Biçimlendirme Neden Önemli

TypeScript kodu tip açıklamaları nedeniyle JavaScript’ten daha yoğundur. İç içe generic’ler, birleşim tipleri ve mapped type’lar içeren biçimlendirilmemiş TypeScript, eşdeğer JavaScript’ten daha hızlı okunamaz hale gelir. Biçimlendirme birkaç şeyi kolaylaştırır:

Tip incelemesi. Bir işlev imzasını incelerken her parametreyi ve tipini kendi satırında görmen gerekir. Tek satırdaki tip açıklaması duvarı, dizeyi manuel ayrıştırmadan tek tek tipleri denetlemeyi imkansız kılar.

Yeniden düzenleme (refactoring). Bir tipi yeniden adlandırırken veya generic kısıtını değiştirirken biçimlendirilmiş kod değişikliği diff’te görünür kılar. Küçültülmüş TypeScript’te aynı değişiklik tüm satıra yayılan bir diff üretir.

Belgelendirme. Biçimlendirilmiş TypeScript belgelendirme görevi görür. İyi biçimlendirilmiş bir arayüz tanımı, bir veri yapısının şeklini herhangi bir yorumdan daha net anlatır.

TypeScript’e Özgü Biçimlendirme

Prettier, TypeScript’e özgü yapıları JavaScript koduyla aynı kurallarla ele alır:

Tip açıklamaları: Yazdırma genişliğini aştığında satırlara bölünür. İşlev parametre tipleri, dönüş tipleri ve generic kısıtları aynı satır bölme kurallarını izler.

Arayüzler ve tip takma adları: Her satırda bir özellik. Birleşim tipi üyeleri yeterince kısaysa dikey hizalanabilir. Ayırt edici birleşimler (discriminated union), ayırt edici özellik net görünecek şekilde biçimlendirilir.

Generic’ler: Tip parametreleri uzun olduğunda satırlara bölünür. Çok satırlı generic’lerde her tip parametresi kendi satırına girintilenir.

Enum’lar: Üyeler her satırda bir tane olacak şekilde biçimlendirilir. Const enum’lar aynı kuralları izler.

TypeScript için Prettier ve ESLint Karşılaştırması

Prettier kodu biçimlendirir. ESLint hata yakalar ve en iyi uygulamaları dayatır. Farklı amaçlara hizmet ederler ve birbirini tamamlar. Yaygın bir kurulum:

1. Tüm biçimlendirme için Prettier kullan (noktalı virgül, tırnak, girinti, satır sonları)
2. Tip farkındalıklı lint için @typescript-eslint kullan (no-unused-vars, no-explicit-any, prefer-optional-chain)
3. Prettier ile çakışan ESLint kurallarını kapat (indent, semi, quotes)
4. Önce Prettier, sonra ESLint çalıştır; böylece ESLint, Prettier’ın ele almadığı sorunları düzeltebilir

Bu ayrım sayesinde Prettier’dan tutarlı biçimlendirme, ESLint’ten kod kalitesi denetimi alırsın; iki araç birbiriyle çatışmaz.