JavaScript Geliştiricilerinin Edinmesi Gereken 10 TypeScript Alışkanlığı 🚀

JavaScript Geliştiricilerinin Edinmesi Gereken 10 TypeScript Alışkanlığı 🚀

JavaScript ekosisteminin hızla gelişen dünyasında, projelerin karmaşıklığı arttıkça, geliştiricilerin daha güvenilir ve bakımı kolay kod yazma ihtiyacı da artıyor. İşte tam bu noktada TypeScript devreye giriyor. TypeScript, JavaScript’e statik tip denetimi ekleyerek, hataları derleme zamanında yakalamamızı, kodun okunabilirliğini artırmamızı ve büyük ölçekli uygulamaların yönetimini kolaylaştırmamızı sağlar. Bir JavaScript geliştiricisi olarak TypeScript’in sunduğu tüm bu avantajlardan tam anlamıyla faydalanmak için belirli alışkanlıklar edinmek kritik öneme sahiptir. Bu makalede, her JavaScript geliştiricisinin benimsemesi gereken 10 temel TypeScript alışkanlığını ve bu alışkanlıkların kod kalitenizi nasıl dönüştüreceğini detaylı bir şekilde inceleyeceğiz.

1. Temel Tip Güvenliğini Benimseyin

TypeScript’in en temel faydası, kodunuza tip güvenliği getirmesidir. Bu, değişkenlerin, fonksiyon parametrelerinin ve dönüş değerlerinin belirli bir tipte olmasını sağlayarak beklenmedik hataları önler. Bu alışkanlıklar, TypeScript yolculuğunuzun ilk adımları olmalıdır.

Alışkanlık 1: Değişkenleri ve Fonksiyonları Açıkça Tiplendirin

JavaScript’te değişkenleri genellikle let veya const ile tanımlarız ve tipleri çalışma zamanında belirlenir. TypeScript’te ise değişkenlere, fonksiyon parametrelerine ve dönüş değerlerine açıkça tip atamak, kodunuzun ne beklediğini ve ne döndürdüğünü netleştirir. Bu, hem sizin hem de ekibinizdeki diğer geliştiriciler için kodun anlaşılırlığını artırır ve olası tip uyumsuzluklarını derleme anında tespit etmenizi sağlar.

// Değişken tiplendirme
let isim: string = "Ali Can";
let yas: number = 30;
let aktif: boolean = true;

// Fonksiyon parametreleri ve dönüş değeri tiplendirme
function topla(a: number, b: number): number {
  return a + b;
}

// Hatalı kullanım örneği (derleme hatası verir)
// topla("merhaba", 5); // Argument of type 'string' is not assignable to parameter of type 'number'.

Bu basit alışkanlık, kodunuzu daha öngörülebilir hale getirir ve geliştirme sürecinde size önemli zaman kazandırır.

Alışkanlık 2: Arayüzler ve Tiplerle Veri Yapılarını Tanımlayın

Uygulamalar büyüdükçe, nesnelerin ve veri yapılarının karmaşıklığı da artar. TypeScript'teki interface ve type anahtar kelimeleri, bu yapıları tanımlamak için güçlü araçlar sunar. Bu sayede, uygulamanızdaki veri akışını standartlaştırabilir ve nesnelerinizin her zaman beklenen yapıda olmasını sağlayabilirsiniz.

// Arayüz (Interface) ile nesne yapısı tanımlama
interface Kullanici {
  id: number;
  ad: string;
  email: string;
  yas?: number; // Opsiyonel özellik
  adres: {
    sokak: string;
    sehir: string;
  };
}

// Type alias ile nesne yapısı tanımlama
type Urun = {
  urunId: string;
  ad: string;
  fiyat: number;
  stoktaVarMi: boolean;
};

const kullanici1: Kullanici = {
  id: 1,
  ad: "Ayşe Yılmaz",
  email: "ayse@example.com",
  adres: {
    sokak: "Deneme Sok. No:1",
    sehir: "İstanbul",
  },
};

const urun1: Urun = {
  urunId: "P101",
  ad: "Kablosuz Klavye",
  fiyat: 250.00,
  stoktaVarMi: true,
};

Arayüzler ve tipler, özellikle API yanıtlarını veya karmaşık veri modellerini tanımlarken vazgeçilmezdir. Kodunuzun belgelendirilmesine de büyük katkı sağlarlar.

2. Gelişmiş Tiplendirme Tekniklerini Kullanın

TypeScript sadece temel tiplerle sınırlı değildir. Gelişmiş tiplendirme teknikleri, daha esnek, yeniden kullanılabilir ve güçlü tip tanımları oluşturmanıza olanak tanır.

Alışkanlık 3: Union ve Intersection Tiplerini Etkin Kullanın

Bazen bir değişkenin birden fazla tipe sahip olabileceği veya bir nesnenin birden fazla arayüzün özelliklerini taşıması gerektiği durumlar olur. Union Types (birleşim tipleri) ve Intersection Types (kesişim tipleri) bu senaryolar için ideal çözümler sunar.

• Union Types (|): Bir değişkenin birden fazla olası tipten herhangi birine sahip olabileceğini belirtir.
• Intersection Types (&): Bir nesnenin birden fazla tipin tüm özelliklerini taşıması gerektiğini belirtir.

// Union Type örneği
type Kimlik = string | number;
let kullaniciID: Kimlik = 123;
kullaniciID = "abc-123";

function islemYap(veri: string | number | boolean) {
  if (typeof veri === "string") {
    console.log("String veri:", veri.toUpperCase());
  } else if (typeof veri === "number") {
    console.log("Sayısal veri:", veri * 2);
  } else {
    console.log("Boolean veri:", !veri);
  }
}

// Intersection Type örneği
interface Loglanabilir {
  logla(): void;
}

interface Kaydedilebilir {
  kaydet(): void;
}

type Islem = Loglanabilir & Kaydedilebilir;

class VeriIsleyici implements Islem {
  logla() {
    console.log("Veri loglandı.");
  }
  kaydet() {
    console.log("Veri kaydedildi.");
  }
}

const isleyici = new VeriIsleyici();
isleyici.logla();
isleyici.kaydet();

Bu tipler, kodunuzun daha esnek olmasını sağlarken tip güvenliğinden ödün vermemenizi sağlar.

Alışkanlık 4: Generic'lerin Gücünü Keşfedin

Generic'ler, TypeScript'in en güçlü özelliklerinden biridir. Fonksiyonları, sınıfları veya arayüzleri, belirli bir tip yerine bir "tip değişkeni" ile çalışacak şekilde tanımlamanıza olanak tanır. Bu sayede, farklı tiplerle çalışabilen yeniden kullanılabilir ve tip-güvenli bileşenler oluşturabilirsiniz.

// Generic fonksiyon örneği
function getIlkEleman(arr: T[]): T | undefined {
  return arr.length > 0 ? arr[0] : undefined;
}

const sayilar = [1, 2, 3];
const ilkSayi = getIlkEleman(sayilar); // ilkSayi tipi: number

const metinler = ["a", "b", "c"];
const ilkMetin = getIlkEleman(metinler); // ilkMetin tipi: string

// Generic interface örneği
interface Kutu {
  icerik: T;
}

const stringKutu: Kutu = { icerik: "Merhaba Dünya" };
const numberKutu: Kutu = { icerik: 123 };

Generic'ler, özellikle veri yapıları (listeler, kuyruklar), API istemcileri ve UI bileşenleri gibi genel amaçlı kod yazarken çok faydalıdır.

3. Tip Güvenliğini Artırıcı Mekanizmalar

TypeScript, kodunuzdaki potansiyel hataları azaltmak için çeşitli mekanizmalar sunar. Bu alışkanlıklar, uygulamanızın daha sağlam olmasını sağlar.

Alışkanlık 5: Enum'larla Sabit Değerleri Yönetin

Enum'lar (numaralandırmalar), birbiriyle ilişkili sabit değerler kümesini tanımlamak için kullanılır. JavaScript'te genellikle sabitleri basit nesnelerle veya string literal'lerle yönetirken, TypeScript enum'ları ile bu sabitlere tip güvenliği ekleyebilirsiniz. Bu, kodunuzun daha okunabilir olmasını sağlar ve yanlış değerlerin kullanılmasını engeller.

// Sayısal Enum
enum Durum {
  Beklemede, // 0
  Islemde,   // 1
  Tamamlandi // 2
}

console.log(Durum.Beklemede); // 0

// String Enum
enum Rol {
  Admin = "ADMIN",
  Editor = "EDITOR",
  Okuyucu = "OKUYUCU"
}

function kullaniciYetkisiKontrol(rol: Rol) {
  if (rol === Rol.Admin) {
    console.log("Admin yetkileri var.");
  } else {
    console.log("Sınırlı yetkiler.");
  }
}

kullaniciYetkisiKontrol(Rol.Admin);
// kullaniciYetkisiKontrol("MANAGER"); // Hata: Argument of type '"MANAGER"' is not assignable to parameter of type 'Rol'.

Enum'lar, özellikle durum yönetimi, yetkilendirme rolleri veya belirli seçenek kümeleri gibi senaryolarda kodunuzu daha temiz ve güvenli hale getirir.

Alışkanlık 6: Type Guard'larla Çalışma Zamanı Kontrolü

TypeScript derleme zamanında tip kontrolü yaparken, bazen çalışma zamanında bir değişkenin tipini daraltmanız gerekebilir. Type Guard'lar, bu tür durumlarda kullanılır. typeof, instanceof operatörleri veya özel tip koruma fonksiyonları kullanarak, kodunuzun belirli bir blok içinde bir değişkenin belirli bir tipe sahip olduğunu garantileyebilirsiniz.

// typeof tabanlı Type Guard
function isNumber(value: any): value is number {
  return typeof value === 'number';
}

function printId(id: string | number) {
  if (isNumber(id)) {
    console.log(id * 2); // Burada 'id'nin tipi 'number' olarak daraltıldı.
  } else {
    console.log(id.toUpperCase()); // Burada 'id'nin tipi 'string' olarak daraltıldı.
  }
}

// instanceof tabanlı Type Guard
class Kedi {
  miyavla() { console.log("Miyav!"); }
}

class Kopek {
  havla() { console.log("Hav hav!"); }
}

type Hayvan = Kedi | Kopek;

function hayvanSesiCikar(hayvan: Hayvan) {
  if (hayvan instanceof Kedi) {
    hayvan.miyavla();
  } else {
    hayvan.havla();
  }
}

const tekir = new Kedi();
const karabas = new Kopek();
hayvanSesiCikar(tekir);
hayvanSesiCikar(karabas);

Type Guard'lar, özellikle union tipleriyle çalışırken veya dinamik verileri işlerken kodunuzu daha güvenli ve hatasız hale getirir.

4. any'den Uzak Durun, Kontrollü Yaklaşın

TypeScript'in tip sistemini kullanmanın amacı tip güvenliği sağlamaktır. any tipi, bu güvenliği devre dışı bırakır. Bu nedenle, any kullanımını en aza indirmek kritik bir alışkanlıktır.

Alışkanlık 7: any Kullanımını Sınırlandırın, unknown'u Tercih Edin

any tipi, bir değişkene herhangi bir tipte değer atanabileceğini ve o değişkenin herhangi bir metodu veya özelliğine erişilebileceğini belirtir. Bu, TypeScript'in tip denetimini tamamen atlar ve JavaScript'teki dinamik tiplendirmeye geri döner. Bu nedenle, any genellikle bir "kaçış kapısı" olarak görülür ve mümkün olduğunca kaçınılmalıdır.

Bunun yerine, bilmediğiniz bir tipteki değeri temsil etmek için unknown tipini kullanın. unknown, any'ye benzer şekilde her türlü değeri kabul eder, ancak bu değeri kullanmadan önce tipini daraltmanızı (type guard ile kontrol etmenizi) zorunlu kılar. Bu, daha güvenli bir yaklaşımdır.

// 'any' kullanımı (kaçınılması gereken)
let veriAny: any = 10;
veriAny = "Merhaba";
veriAny.toFixed(); // Çalışma zamanı hatası verebilir eğer veriAny string ise

// 'unknown' kullanımı (tercih edilen)
let veriUnknown: unknown = 10;
veriUnknown = "Merhaba";

// veriUnknown.toFixed(); // Hata: Object is of type 'unknown'.

if (typeof veriUnknown === 'number') {
  console.log(veriUnknown.toFixed(2)); // Güvenli kullanım
} else if (typeof veriUnknown === 'string') {
  console.log(veriUnknown.toUpperCase()); // Güvenli kullanım
}

any ve unknown arasındaki farkı gösteren basit bir tablo:

unknown kullanarak, bilinmeyen tiplerle çalışırken bile tip güvenliğini koruyabilirsiniz.

5. TypeScript Ortamınızı ve Entegrasyonunuzu Optimize Edin

TypeScript'in gücünden tam olarak yararlanmak için, derleyici ayarlarınızı doğru yapılandırmak ve JavaScript ekosistemiyle entegrasyonu sağlamak önemlidir.

Alışkanlık 8: tsconfig.json Dosyasını Doğru Yapılandırın

tsconfig.json dosyası, TypeScript derleyicisinin (tsc) projenizi nasıl derleyeceğini belirleyen ana yapılandırma dosyasıdır. Bu dosyayı doğru bir şekilde yapılandırmak, projenizin tip güvenliği seviyesini artırmanın ve geliştirme sürecinizi optimize etmenin anahtarıdır.

Özellikle aşağıdaki seçenekleri etkinleştirmek, daha katı bir tip denetimi sağlar ve erken hataları yakalamanıza yardımcı olur:

• "strict": true: Tüm katı tip denetimi seçeneklerini etkinleştirir. Bu, yeni projeler için şiddetle tavsiye edilir.
• "noImplicitAny": true: Açıkça belirtilmemiş tipler için any kullanımını yasaklar.
• "strictNullChecks": true: null ve undefined değerlerinin tip sistemine dahil edilmesini sağlar. Bu, null veya undefined olabilecek değerleri kullanmadan önce kontrol etmenizi zorunlu kılar.
• "noUnusedLocals": true: Kullanılmayan yerel değişkenler için hata verir.
• "noUnusedParameters": true: Kullanılmayan fonksiyon parametreleri için hata verir.

{
  "compilerOptions": {
    "target": "es2016",
    "module": "commonjs",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,                 /* Tüm katı tip denetimi seçeneklerini etkinleştirir */
    "noImplicitAny": true,          /* 'any' tipine sahip ifadeler için örtük tipleri engeller */
    "strictNullChecks": true,       /* Null ve undefined için katı null denetimi etkinleştirir */
    "noUnusedLocals": true,         /* Kullanılmayan yerel değişkenler için hata bildirir */
    "noUnusedParameters": true,     /* Kullanılmayan parametreler için hata bildirir */
    "esModuleInterop": true,        /* CommonJS modülleri ile ES modülleri arasında uyumluluk sağlar */
    "skipLibCheck": true,           /* Tüm deklarasyon dosyalarının tip denetimini atlar */
    "forceConsistentCasingInFileNames": true /* Dosya adlarında tutarlı büyük/küçük harf kullanımını zorlar */
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

Projenizin ihtiyaçlarına göre tsconfig.json dosyasını düzenli olarak gözden geçirmek ve optimize etmek, TypeScript deneyiminizi büyük ölçüde iyileştirecektir.

Alışkanlık 9: Tip Açıklama Dosyalarını (.d.ts) Etkin Kullanın

JavaScript ekosistemi çok geniştir ve birçok kütüphane hala saf JavaScript ile yazılmıştır. Bu kütüphaneleri TypeScript projenizde kullanırken, tip bilgilerine ihtiyacınız olacaktır. Tip açıklama dosyaları (.d.ts), mevcut JavaScript koduna tip bilgisi eklemenin yoludur.

Çoğu popüler JavaScript kütüphanesi için, tip tanımları DefinitelyTyped projesi tarafından sağlanır ve @types/ önekiyle npm üzerinden yüklenebilir:

npm install --save-dev @types/lodash
npm install --save-dev @types/react @types/react-dom

Eğer kullandığınız bir kütüphane için tip tanımları yoksa, kendi .d.ts dosyanızı oluşturarak veya projenizde geçici bir deklarasyon yaparak bu sorunu çözebilirsiniz. Bu alışkanlık, JavaScript kütüphanelerini TypeScript projenize güvenli bir şekilde entegre etmenizi sağlar.

// custom-library.d.ts
declare module 'custom-library' {
  export function doSomething(input: string): string;
  export class MyClass {
    constructor(name: string);
    greet(): string;
  }
}

6. Modern JavaScript Özelliklerini TypeScript ile Birleştirin

TypeScript, modern JavaScript özelliklerini de destekler ve onlara tip güvenliği ekler. Bu, kodunuzu daha kısa, daha okunabilir ve daha az hataya açık hale getirir.

Alışkanlık 10: Opsiyonel Zincirleme ve Nullish Coalescing'i Kullanın

ES2020 ile gelen Opsiyonel Zincirleme (?.) ve Nullish Coalescing (??) operatörleri, TypeScript ile birlikte kullanıldığında kodunuzu daha güvenli ve okunaklı hale getirir. Bu özellikler, özellikle iç içe geçmiş nesne yapılarıyla çalışırken veya varsayılan değerler atarken çok faydalıdır.

• Opsiyonel Zincirleme (?.): Bir nesnenin bir özelliğine veya metoduna erişmeye çalışırken, yol üzerindeki herhangi bir referansın null veya undefined olup olmadığını kontrol etmenizi sağlar. Eğer null veya undefined ise, ifade hemen undefined döndürür ve hata fırlatmaz.
• Nullish Coalescing (??): Bir ifadenin null veya undefined olması durumunda varsayılan bir değer sağlamak için kullanılır. Boş string ("") veya 0 gibi "falsy" değerleri null veya undefined'dan ayırır.

interface KullaniciProfil {
  ad: string;
  iletisim?: {
    email?: string;
    telefon?: string;
  };
  ayarlar?: {
    dil?: string;
  };
}

const kullanici: KullaniciProfil = {
  ad: "Zeynep",
  iletisim: {
    email: "zeynep@example.com"
  }
};

// Opsiyonel Zincirleme örneği
const kullaniciEmail = kullanici.iletisim?.email; // "zeynep@example.com"
const kullaniciTelefon = kullanici.iletisim?.telefon; // undefined
const kullaniciDil = kullanici.ayarlar?.dil; // undefined

console.log(kullaniciEmail);
console.log(kullaniciTelefon);
console.log(kullaniciDil);

// Nullish Coalescing örneği
const varsayilanDil = kullanici.ayarlar?.dil ?? "tr"; // "tr" (çünkü kullanici.ayarlar?.dil undefined)
const kullaniciAd = kullanici.ad ?? "Misafir"; // "Zeynep" (çünkü kullanici.ad ne null ne de undefined)
const sifirDeger = 0 ?? 10; // 0 (çünkü 0 ne null ne de undefined)
const bosString = "" ?? "Varsayılan"; // "" (çünkü "" ne null ne de undefined)

console.log("Varsayılan Dil:", varsayilanDil);
console.log("Kullanıcı Adı:", kullaniciAd);
console.log("Sıfır Değer:", sifirDeger);
console.log("Boş String:", bosString);

Bu alışkanlıklar, özellikle büyük ve karmaşık veri yapılarıyla çalışırken kodunuzu daha kısa, daha güvenli ve daha okunaklı hale getirir.

Sonuç

TypeScript, JavaScript geliştiricileri için sadece bir dil değil, aynı zamanda daha iyi kod yazma felsefesini temsil eden güçlü bir araçtır. Bu makalede ele aldığımız 10 alışkanlığı benimseyerek, JavaScript projelerinizde tip güvenliğini artırabilir, hata ayıklama süresini azaltabilir ve daha bakımı kolay, ölçeklenebilir uygulamalar geliştirebilirsiniz. TypeScript'i sadece bir araç olarak değil, aynı zamanda geliştirme sürecinizi zenginleştiren bir yol arkadaşı olarak görmeye başladığınızda, kod kalitenizdeki ve üretkenliğinizdeki artışı net bir şekilde fark edeceksiniz. Unutmayın, iyi alışkanlıklar zamanla inşa edilir; TypeScript'i günlük kodlama pratiğinizin ayrılmaz bir parçası haline getirin ve projelerinizin gücüne güç katın!

SSS (Sık Sorulan Sorular)

TypeScript öğrenmek için JavaScript'i çok iyi bilmek gerekiyor mu?

Evet, TypeScript JavaScript'in bir üst kümesi olduğu için, sağlam bir JavaScript bilgisine sahip olmak TypeScript'i öğrenmeyi ve etkili bir şekilde kullanmayı çok daha kolaylaştıracaktır. JavaScript'in temellerini anladıktan sonra TypeScript'e geçiş yapmak en mantıklı yaklaşımdır.

any kullanmaktan neden kaçınmalıyım?

any tipi, TypeScript'in tip denetimini tamamen devre dışı bırakır. Bu, TypeScript kullanmanın temel amacını ortadan kaldırır ve çalışma zamanında ortaya çıkabilecek tip hatalarını derleme zamanında yakalama yeteneğinizi kaybedersiniz. Mümkün olduğunca unknown veya daha spesifik tipler kullanmaya çalışın.

interface ve type arasındaki fark nedir? Ne zaman hangisini kullanmalıyım?

Her ikisi de tipleri tanımlamak için kullanılsa da, bazı farklılıkları vardır:

• interface'ler genellikle nesne şekillerini tanımlamak için kullanılır ve deklarasyon birleştirmeyi (declaration merging) destekler. Yani aynı isimde birden fazla interface tanımlayabilir ve TypeScript bunları otomatik olarak birleştirir.
• type alias'lar daha esnektir; sadece nesne şekillerini değil, aynı zamanda union tipleri, intersection tipleri, primitive tipleri ve tuple tiplerini de tanımlayabilir. Deklarasyon birleştirmeyi desteklemezler.

Genel bir kural olarak, nesne şekillerini tanımlarken interface kullanmak, diğer tüm tip tanımları için type alias kullanmak iyi bir yaklaşımdır.

tsconfig.json dosyasındaki hangi ayarlar en önemlidir?