TypeScript Tip Daraltma (Narrowing): Kontrol Akışı Analizi

Tip daraltma (type narrowing), TypeScript'in kodun daha önce yaptığı kontrollere dayanarak kodun belirli bir noktasında bir değer için daha özel bir tip bulmasıdır. Bir string | number parametresi if (typeof x === "string") içinde string, else içinde number olur.

function pad(value: string | number): string {
  if (typeof value === "number") {
    // value: number
    return value.toFixed(2).padStart(8);
  }
  // value: string (number was handled above)
  return value.padStart(8);
}

console.log(`[${pad(3.14159)}]`); // [    3.14]
console.log(`[${pad("abc")}]`);   // [     abc]

Kontrolden önce value.toFixed(2) çağırmak bir derleme hatası olurdu, çünkü toFixed metodu string üzerinde yoktur. Kontrol sıradan JavaScript'tir ve çalışma zamanında çalışır; daraltma ise derleyicinin onu okuyup tipi ayarlamasıdır. Fazladan hiçbir şey üretilmez.

Kontrol Akışı Analizi

TypeScript bir fonksiyondaki her yolu izler: if/else, erken return ve throw, switch, döngüler ve kısa devre operatörleri &&, ||, ?? ve ?:. Her noktada bir değişkenin tipi, orada hâlâ mümkün olan şeydir.

function firstWord(text: string | null | undefined): string {
  if (text == null) return "(none)";   // removes null and undefined
  // text: string
  const trimmed = text.trim();
  const space = trimmed.indexOf(" ");
  return space === -1 ? trimmed : trimmed.slice(0, space);
}

function lengthOrZero(list?: string[]): number {
  return list && list.length > 0 ? list.length : 0; // list: string[] after &&
}

console.log(firstWord("  hello typed world")); // hello
console.log(firstWord(undefined));             // (none)
console.log(lengthOrZero(["a", "b"]), lengthOrZero()); // 2 0

Erken return stili ("guard clause'lar") daraltmanın en okunaklı yoludur: önce tuhaf durumları ele alın, fonksiyonun geri kalanı temiz tiple çalışsın.

Daraltmanın Tüm Yolları

Son üçü type guard'lar ve discriminated union'lar sayfalarında anlatılıyor. Geri kalanlar aşağıda.

Truthiness ile Daraltma

if (x), null ve undefined tiplerini (ve false, 0, "" literal tiplerini) çıkarır. Kısadır ve klasik bir tuzağı vardır: 0 ve "" falsy'dir, bu yüzden geçerli değerler eksikmiş gibi ele alınır.

function describeCount(count: number | undefined): string {
  if (!count) return "unknown";   // bug: 0 is falsy too
  return `${count} items`;
}

function describeCountFixed(count: number | undefined): string {
  if (count === undefined) return "unknown";
  return `${count} items`;
}

console.log(describeCount(0));      // unknown
console.log(describeCountFixed(0)); // 0 items

Sayılar ve string'ler için açıkça undefined veya null ile karşılaştırın (ya da ?? kullanın). Truthiness, hiçbir zaman falsy olmayan nesneler, diziler ve fonksiyonlar için uygundur.

Eşitlik ile Daraltma

===, !==, == ve != iki tarafı da daraltır. Bir literal ile karşılaştırmak o literal'e daraltır; == null (gevşek eşitlik) tek bir kontrolde hem null hem undefined ile eşleşir ve gevşek eşitliğin alışılmış olduğu tek yerdir.

type Status = "active" | "paused" | "deleted";

function label(status: Status, note: string | null | undefined): string {
  if (status === "deleted") return "gone";
  // status: "active" | "paused"
  const suffix = note != null ? ` (${note})` : ""; // note: string in the true branch
  return status.toUpperCase() + suffix;
}

console.log(label("paused", "until Monday")); // PAUSED (until Monday)
console.log(label("active", undefined));      // ACTIVE
console.log(label("deleted", null));          // gone

İki değişkeni karşılaştırmak ikisini de ortak olabilecekleri şeye daraltır: a: string | number ve b: string | boolean değerleri a === b kontrolünden geçerse if içinde ikisi de string olur.

in Operatörü

"key" in obj, nesne tiplerinden oluşan bir union'ı o özelliğe sahip olan (ya da sahip olabilecek) üyelere daraltır.

type Fish = { name: string; swim: () => string };
type Bird = { name: string; fly: () => string };

function move(pet: Fish | Bird): string {
  if ("swim" in pet) {
    return pet.swim(); // pet: Fish
  }
  return pet.fly();    // pet: Bird
}

console.log(move({ name: "Nemo", swim: () => "splash" })); // splash
console.log(move({ name: "Tweety", fly: () => "flap" }));  // flap

in, bir nesne olduğunu bildiğiniz anda unknown üzerinde de çalışır: typeof v === "object" && v !== null && "id" in v sonrasında TypeScript, v değerinin unknown tipinde bir id özelliğine sahip olduğunu bilir. Kendi tasarladığınız union'lar için ortak bir etiket özelliği (kind: "fish"), metotları yoklamaktan daha anlaşılırdır: bu kalıba discriminated union denir.

Atama ile Daraltma

Bir değişkenin bildirilmiş bir tipi ve atamalarını izleyen daraltılmış bir tipi vardır. Bir değer atamak, onu bildirilmiş tiple sınırlı olmak üzere o değerin tipine daraltır.

let id: string | number = "a-17";
console.log(id.toUpperCase()); // id: string here, so string methods work

id = 42;
console.log(id.toFixed(1));    // id: number now

// id = true; would be an error: the declared type is still string | number

Daraltmanın Kaybolduğu Yerler

Daraltma yereldir ve temkinlidir. Birkaç durum onu sıfırlar:

• Farklı bir ifade. obj.name kontrolü obj.name (ve obj["name"]) ifadesini daraltır, ama key bir literal değil de bir string değişkeni olduğunda obj[key] ifadesini ve kontrolden önce alınmış bir kopyayı daraltmaz.
• Callback'ler ve yeniden atama. Bir callback'in içinde, daraltılmış bir let yalnızca callback oluşturulduktan sonra yeniden atanmıyorsa daraltmasını korur. Bir const ya da hiç yeniden atanmayan bir parametre daraltılmış kalır.
• Yardımcılarda gizlenmiş kontroller. isString(x: unknown): boolean şeklindeki bir fonksiyon derleyiciye hiçbir şey söylemez. Ona x is string şeklinde bir type predicate dönüş tipi verin, çağrıları typeof gibi daraltır.

// This does not compile: x is reassigned after the callback, so the callback loses the narrowing.
function run(flag: boolean): void {
  let x: string | undefined = flag ? "ready" : undefined;
  if (x !== undefined) {
    [1, 2].forEach(() => console.log(x.length));
  }
  x = undefined;
}

run(true);

Derleyici index.ts(5,38): error TS18048: 'x' is possibly 'undefined'. bildirir. Callback daha sonra, x = undefined sonrasında çalışabilir. O son atamayı silin (ya da değeri if içinde bir const değişkenine kopyalayın), kod derlenir ve iki kez 5 yazdırır.

boolean döndüren bir yardımcı, neyi kanıtladığını bildirerek düzeltilebilir. Type guard budur:

function isString(value: unknown): value is string {
  return typeof value === "string";
}

TypeScript 5.5'ten beri derleyici basit arrow function'lar için bu tür predicate'leri çıkarır; list.filter((x) => x !== undefined) ifadesinin artık undefined içermeyen bir dizi döndürmesinin nedeni budur.