TypeScript Tip Sistemi ve Daraltma

Başlangıç 10 dk Sık karşılaşılır

30 saniyede özet

as yazmak derleyiciye 'bana güven, sus' demektir; tip daraltma ise ona bir kontrolle kanıt sunar. Ama tip doğru diye mantık da doğru olmaz: !count kontrolü sıfırı da eler.

Kapıdaki görevli kimliğine baktıktan sonra seni içeri alır. Baktıktan sonra artık kim olduğunu bilir ve sana ona göre davranır.

TypeScript de böyle: yaptığın her kontrolü takip eder ve tipi kendiliğinden daraltmaDerleyicinin, yazdığın kontrole bakarak bir değerin tipini daha dar bir tipe indirmesi. `if (!user) return;` sonrası `user` artık null olamaz.Sözlükte gör →.

Bayt: Derleyici itiraz edince araya bir as yazdım, hata kayboldu!
Sen: Sorun çözüldü mü yani?
Bayt: Canlıda bir null geldi ve sayfa çöktü...
Bayt: Kapıdaki görevli kimliğe bakmadan herkesi içeri alırsa ne olur?

Her kontrol bir olasılığı eler. Durdur Oynat

Adım adım oku

Değer string, number ya da null olabilir; derleyici üçünü de hesaba katar.
null kontrolünden sonra derleyici null ihtimalini eler.
typeof ile string elenince geriye yalnızca number kalır ve cast gerekmez.
as ise hiçbir şeyi kontrol etmez; yanlış değer de içeri girer ve program çalışırken çöker.

1
function format(value: string | number | null): string {
2
  if (value === null) return "yok";
3
  // value: string | number
4

5
  if (typeof value === "string") return value.toUpperCase();
6
  // value: number
7

8
  return value.toFixed(2);
9
}

Hiçbir yerde as yok. Her kontrol birleşimden bir olasılık eledi.

Kendin izle

Simülatör satır satır ilerliyor; sağdaki panel derleyicinin o anda ne bildiğini gösteriyor.

TypeScript tip daraltma — derleyici satır satır ne biliyor

Tohum 1

1function format(value: string | number | null): string {
2 if (value === null) {
3 return "yok";
4 }
5
6 if (typeof value === "string") {
7 return value.toUpperCase();
8 }
9
10 return value.toFixed(2);
11}

Derleyicinin bildiği tipler

— henüz bir şey yok —

Hız

Adım 0

Şu an ne oldu?

Derleyici henüz bir şey bilmiyor

Oynat veya adımla. Her satırdan sonra derleyicinin o değişken hakkında ne bildiği sağda güncellenecek.

Aklında kalsın: Daraltma (narrowing), derleyicinin kontrol akışını takip ederek bir birleşim tipini küçültmesidir. Cast yazmanı gereksiz kılan şey budur.

Senaryo

Olay günlüğü (0)

Henüz olay yok. Oynat veya adımla.

Dört senaryoyu da çalıştır — son ikisi kasten bozuk kodu gösteriyor:

Union daraltma — tipin her kontrolde küçüldüğünü izle.
Ayrımlı birleşim — default dalında shape nasıl never oluyor.
any ile unknown — aynı satır, birinde derleme hatası, diğerinde çalışma zamanı çökmesi.
Truthy tuzağı — derlenen, tip kontrolünden geçen ve yine de yanlış olan kod.

Kafam karıştı, daha basit anlat

Daraltma, derleyiciye “bak, kontrol ettim” demektir. if ile bir şeyi kontrol ettiğinde, derleyici o bloğun içinde tipin ne olduğunu artık bilir.

Hızlı kontrolBaşlangıç

`interface` ile `type` arasındaki pratik fark nedir?

BiliyorumTahmin edeceğimÖnce birini seç. Tekrar zamanlaması buna göre ayarlanıyor.

`interface` declaration merging destekler ve genelde nesne şekilleri için kullanılır; `type` birleşim ve kesişim gibi her şeyi ifade edebilir
`interface` daha hızlı derlenir, başka fark yoktur
`type` çalışma zamanında var olur, `interface` olmaz
`interface` yalnızca sınıflarla kullanılabilir

`as` ile daraltmanın farkı

API'den gelen data aslında bir hata nesnesi. Kodda const user = data as User yazıyor. Derleyici bir uyarı verir mi? Cevabı göster

Hayır. as, derleyiciye “ben biliyorum” demektir ve hiçbir şey kontrol edilmez. Hata, user.email ilk okunduğunda çalışma anında çıkar.

1
// Cast: derleyiciye "sus, ben biliyorum" demek. Hiçbir şey doğrulanmaz.
2
const user = data as User;
3

4
// Daraltma: derleyiciye kanıt sunmak.
5
if (typeof data === "object" && data !== null && "email" in data) {
6
  // data burada gerçekten o alana sahip
7
}

as bir çalışma zamanı kontrolü değildir — derlendikten sonra ortada hiçbir şey kalmaz. Yanlışsa program çöker.

Kafam karıştı, daha basit anlat

as derleyiciye “sus, ben biliyorum” demektir, hiçbir şey kontrol edilmez. Daraltma ise kanıt göstermektir. Kanıt her zaman susturmaktan güvenlidir.

Hızlı kontrolOrta

Bu kod ne yazdırır?

BiliyorumTahmin edeceğimÖnce birini seç. Tekrar zamanlaması buna göre ayarlanıyor.

daraltma.ts

1function selamla(user: { ad: string } | null) {

2 if (!user) return "misafir";

4 const yazdir = () => user.ad;

6 return yazdir();

7}

9console.log(selamla({ ad: "Ayse" }));

10console.log(selamla(null));

TypeScriptUTF-8LF

Ayse / misafir
Derleme hatası — closure içinde daraltma kaybolur
Ayse / null
undefined / misafir

Daraltmanın araçları

Araç	Ne için
`typeof x === "string"`	İlkel tipler
`x instanceof Date`	Sınıflar
`"email" in obj`	Alan varlığı
`x.kind === "circle"`	Ayrımlı birleşimler
`Array.isArray(x)`	Diziler
`x !== null`	null / undefined eleme
`function isUser(x): x is User`	Kendi tip koruyucun

Son satır, kendi kontrolünü derleyiciye tanıtma yoludur:

1
function isUser(value: unknown): value is User {
2
  return typeof value === "object" && value !== null && "email" in value;
3
}
4

5
if (isUser(data)) {
6
  data.email;   // derleyici artık biliyor
7
}

Dikkat: value is User bir söztür. Fonksiyonun gövdesi yanlış yazılmışsa derleyici seni yine yanıltır — tip koruyucusu`value is User` imzalı, true dönünce derleyiciye tipi daraltmasını söyleyen fonksiyon. Kontrolü sen yazarsın — gövde yanlışsa derleyici seni durduramaz.Sözlükte gör →lar as’a göre daha iyidir ama sihirli değildir.

Hızlı kontrolBaşlangıç

Her ifadeyi derleyiciye kanıt sunup sunmadığına göre yerleştir.

BiliyorumTahmin edeceğimÖnce birini seç. Tekrar zamanlaması buna göre ayarlanıyor.

Sınıflandırılmamış

Daraltma — kanıt sunar

Derleyici kontrol akışını takip eder

İddia — kanıt sunmaz

Derleyiciye susmasını söyler

Eksik durum kalmasın: `never`

1
type Shape =
2
  | { kind: "circle"; r: number }
3
  | { kind: "square"; side: number };
4

5
function area(shape: Shape): number {
6
  switch (shape.kind) {
7
    case "circle":
8
      return Math.PI * shape.r ** 2;
9
    case "square":
10
      return shape.side ** 2;
11
    default:
12
      // Tüm varyantlar ele alındıysa shape burada `never` olur.
13
      const exhaustive: never = shape;
14
      return exhaustive;
15
  }
16
}

Union’a üçüncü bir varyant eklediğin an, o varyantı ele almayı unuttuğun her switch derleme hatası verir. Bu bir test değil, derleyici garantisidir — ve büyük kod tabanlarında TypeScript’in en değerli özelliklerinden biridir.

Aynı fikir bir banka uygulamasında da işine yarar. Para gönderdikten sonra sunucu üç cevaptan birini döner; bak derleyici hiçbirini unutturmuyor.

Derinleş · Havale sonucu: kanıtla daralt, hiçbir durumu unutma 4 dosya · ~72 satır · ilk okumada atlayabilirsin

src/features/transfer/ transfer.ts Havale sonucu, status alanıyla ayrılan üç durumlu bir birleşim.

1
export type RejectReason = 'INSUFFICIENT_FUNDS' | 'DAILY_LIMIT_EXCEEDED' | 'FRAUD_HOLD';
2

3
// One status field decides which other fields exist.
4
export type TransferResult =
5
  | { status: 'completed'; referenceNo: string; feeKurus: number }
6
  | { status: 'queued'; sendAt: string } // EFT outside working hours
7
  | { status: 'rejected'; reason: RejectReason };

src/features/transfer/ parseTransferResult.ts Sunucudan gelen cevap unknown başlar ve alan alan kontrol edilerek daralır.

1
import type { RejectReason, TransferResult } from './transfer';
2

3
const REASONS: readonly RejectReason[] = ['INSUFFICIENT_FUNDS', 'DAILY_LIMIT_EXCEEDED', 'FRAUD_HOLD'];
4

5
function isRejectReason(value: unknown): value is RejectReason {
6
  return REASONS.some((reason) => reason === value);
7
}
8

9
// The API response stays unknown until each field has been checked.
10
export function parseTransferResult(body: unknown): TransferResult | null {
11
  if (typeof body !== 'object' || body === null || !('status' in body)) return null;
12

13
  if (body.status === 'completed' && 'referenceNo' in body && 'feeKurus' in body) {
14
    const { referenceNo, feeKurus } = body;
15
    if (typeof referenceNo === 'string' && typeof feeKurus === 'number' && Number.isInteger(feeKurus)) {
16
      return { status: 'completed', referenceNo, feeKurus };
17
    }
18
  }
19
  if (body.status === 'queued' && 'sendAt' in body && typeof body.sendAt === 'string') {
20
    return { status: 'queued', sendAt: body.sendAt };
21
  }
22
  if (body.status === 'rejected' && 'reason' in body && isRejectReason(body.reason)) {
23
    return { status: 'rejected', reason: body.reason };
24
  }
25
  return null;
26
}

src/features/transfer/ transferMessage.ts Her durum için bir mesaj; dördüncü bir durum eklenince derleme durur.

1
import type { RejectReason, TransferResult } from './transfer';
2

3
// A Record over the union is exhaustive too: a new reason without a text will not compile.
4
const REJECT_TEXT: Record<RejectReason, string> = {
5
  INSUFFICIENT_FUNDS: 'Bakiye yetersiz.',
6
  DAILY_LIMIT_EXCEEDED: 'Günlük transfer limitin doldu.',
7
  FRAUD_HOLD: 'Güvenlik kontrolü için bekletiliyor, seni arayacağız.',
8
};
9

10
export function transferMessage(result: TransferResult): string {
11
  switch (result.status) {
12
    case 'completed':
13
      // === 0, not !feeKurus: a free FAST transfer really has a fee of 0.
14
      return result.feeKurus === 0
15
        ? `Gönderildi, ücret alınmadı. Ref: ${result.referenceNo}`
16
        : `Gönderildi. Ref: ${result.referenceNo}`;
17
    case 'queued':
18
      return `EFT sıraya alındı, ${result.sendAt} saatinde gönderilecek.`;
19
    case 'rejected':
20
      return REJECT_TEXT[result.reason];
21
    default: {
22
      // Add a fourth status and this line stops compiling.
23
      const exhaustive: never = result;
24
      return exhaustive;
25
    }
26
  }
27
}

src/features/transfer/ transferMessage.alternative.ts Şöyle de yazılabilirdi: as ile kısa yoldan. Bak, ücretsiz bir FAST işlemi ücret bilgisi yok gibi görünüyor.

1
// Another way to write it: shorter, and the compiler stays quiet.
2
export function transferMessage(body: unknown): string {
3
  const result = body as { status: string; referenceNo?: string; feeKurus?: number };
4

5
  if (result.status === 'completed') {
6
    // A free FAST transfer sends feeKurus: 0, and !0 is true.
7
    if (!result.feeKurus) return 'Ücret bilgisi alınamadı.';
8
    return `Gönderildi. Ref: ${result.referenceNo}`;
9
  }
10
  // 'queued' lands here too, and so will any status added next year.
11
  return 'İşlem reddedildi.';
12
}

Kafam karıştı, daha basit anlat

never “buraya hiçbir zaman gelinmemeli” demektir. Yeni bir şekil ekleyip onu unuttuğunda, derleyici tam o satırı gösterir.

Hızlı kontrolBaşlangıç

`strictNullChecks` kapalıyken ne kaybedersin?

BiliyorumTahmin edeceğimÖnce birini seç. Tekrar zamanlaması buna göre ayarlanıyor.

`null` ve `undefined` her tipe atanabilir hâle gelir; derleyici eksik kontrolleri hiç görmez
Yalnızca `any` kullanımı artar
Opsiyonel alanlar çalışmaz
Derleme süresi artar

Tuzaklar: `any` yerine `unknown`

1
const fromApi: any = JSON.parse(raw);
2
fromApi.user.name;        // derlenir → user yoksa çalışma zamanında çöker
3

4
const safe: unknown = JSON.parse(raw);
5
safe.user;                // DERLENMEZ — önce daraltmalısın

any tip kontrolünü o değer için kapatır. unknown ise “değer var ama tipini bilmiyorum” der ve kullanmadan önce kanıt ister.

Kural: dışarıdan gelen her veri unknown’dır. JSON.parse, API cevabı, localStorage, form girdisi. Sınırda bir kez doğrula (Zod gibi bir şema doğrulayıcı en pratik yol), içeride tiplerle çalış.

Tip güvenliği ≠ mantık doğruluğu. Bu bölüm dersin en önemli kısmı olabilir.

1
function label(count: number | undefined): string {
2
  if (!count) return "belirtilmedi";   // count === 0 de buraya düşer
3
  return `${count} adet`;
4
}
5

6
label(0);   // "belirtilmedi"  ← hata

0 falsy’dir. Derleyici itiraz etmez çünkü kod tip açısından tamamen geçerlidir; yanlış olan iş mantığıdır.

1
function label(count: number | undefined): string {
2
  if (count === undefined) return "belirtilmedi";
3
  return `${count} adet`;
4
}

Aynı tuzak metinlerde boş string ("") ile kurulur. ?? (nullish coalescing) ile || arasındaki fark da tam burada:

1
const a = 0 || 10;    // 10  — 0 falsy sayıldı
2
const b = 0 ?? 10;    // 0   — yalnızca null/undefined elenir

Günlük kullanımda birkaç utility type.

Tip	Ne yapar
`Partial<T>`	Tüm alanlar opsiyonel — güncelleme DTO’ları
`Required<T>`	Tüm alanlar zorunlu
`Pick<T, K>` / `Omit<T, K>`	Alan seçme / çıkarma
`Readonly<T>`	Değiştirilemez hâle getirir
`Record<K, V>`	Anahtar-değer eşlemesi
`ReturnType<F>`	Bir fonksiyonun dönüş tipi

Bu bir simülasyon, JVM değil

Buradaki sayılar ve zamanlamalar öğretmek için kurulmuş deterministik bir modelden gelir. Gerçek bir sistemde ölçüm yapmadan hiçbir performans iddiasında bulunma.

Gerçek ölçüm araçları: tsc --noEmit ile CI kontrolü, typescript-eslint (no-explicit-any, no-unnecessary-condition), Zod veya Valibot ile çalışma zamanı şema doğrulama, ts-reset, TypeScript Playground

Bu simülatör tipleri elle yazılmış bir izden okuyor — gerçek derleyici çok daha fazlasını çıkarır ve bazen beklenmedik şekilde daraltmayı kaybeder (örneğin bir callback içinde). Kendi kodunda derleyicinin ne bildiğini görmek için editörde değişkenin üzerine gelmek yeterli; emin olmadığın yerde const check: never = value yazıp derleyicinin ne dediğine bakmak en hızlı kontroldür.

Kendini sına

Şimşek turu1/5

as, değerin tipini çalışma anında kontrol eder.

Soru 1/3Başlangıç

Bu fonksiyon `label(0)` için ne döndürür?

BiliyorumTahmin edeceğimÖnce birini seç. Tekrar zamanlaması buna göre ayarlanıyor.

label.ts

1function label(count: number | undefined): string {

2 if (!count) {

3 return "belirtilmedi";

4 }

6 return `${count} adet`;

7}

9console.log(label(0));

TypeScriptUTF-8LF

"0 adet"
"belirtilmedi" — çünkü 0 falsy'dir
Derleme hatası verir
undefined

Aklında kalacak üç şey

1 as derleyiciye susmasını söyler ve hiçbir şeyi kontrol etmez; daraltma if ve typeof gibi kontrollerle kanıt üretir. Kodda çok sayıda as görmek daraltmanın yapılmadığının işaretidir.
2 any tip kontrolünü kapatır ve hatayı çalışma anına erteler. Dışarıdan gelen her veri unknown olmalıdır.
3 Tip doğru diye kod doğru olmaz: sayılarda 0, metinlerde boş string false sayılır. undefined kontrol edeceksen === undefined yaz.

Sonraki kapı console.log, setTimeout(0), Promise.then, console.log. Konsol hangi sırayla yazar? JavaScript Olay Döngüsü — setTimeout(0) Neden Sonra Yazıyor? · 9 dk

4 kart sonraki derste seni bekliyor

0/5 kart bu dersten toplandı

Kendin izle

as ile daraltmanın farkı

Daraltmanın araçları

Eksik durum kalmasın: never

Tuzaklar: any yerine unknown

Kendini sına

Aklında kalacak üç şey

`as` ile daraltmanın farkı

Eksik durum kalmasın: `never`

Tuzaklar: `any` yerine `unknown`