TypeScript null ve undefined: Kontroller, ?. ve ?? Operatörleri

strictNullChecks açıkken (strict kapsamındadır) null ve undefined kendi tipleridir. Bir string asla null olamaz; eksik olabilecek bir değer bunu string | null gibi tipinde belirtmek zorundadır ve TypeScript değeri kullanmadan önce bu durumu ele almanızı ister.

function initials(name: string | null | undefined): string {
  if (name == null) return "?"; // handles both null and undefined
  return name
    .split(" ")
    .map((part) => part[0])
    .join("");
}

console.log(initials("Ada Lovelace")); // AL
console.log(initials(null));           // ?
console.log(initials(undefined));      // ?

Kontrolden sonra derleyici name değerinin bir string olduğunu bilir, bu yüzden .split kullanılabilir. Bu sayfanın geri kalanı, bu kontrolü yapmanın yollarını ve onu kısaltan operatörleri anlatıyor.

strictNullChecks ve "Possibly Null" Hataları

Bir tip null veya undefined içerdiğinde TypeScript değeri her zaman oradaymış gibi kullanmayı reddeder:

// This does not compile: name may be null
function greet(name: string | null) {
  return "Hello, " + name.toUpperCase();
}

console.log(greet("ada"));

index.ts(3,22): error TS18047: 'name' is possibly 'null'.

undefined sürümü TS18048'dir, 'x' is possibly 'undefined'. strictNullChecks olmadan null ve undefined her tipte serbesttir; bu kod derlenir ve name ilk kez null olduğunda çalışma zamanında bir TypeError ile çöker. strict seçeneğini açık tutmanın asıl nedeni bu hata sınıfıdır.

Bu tiplerin günlük kodda nereden geldiği:

null ve undefined Kontrolü

Aşağıdaki her kontrol blok içinde tipi daraltır. Elemek istediğiniz şeye uyanı seçin.

function label(value: string | null | undefined): string {
  if (value === undefined) return "undefined";
  if (value === null) return "null";
  return value.toUpperCase(); // value is string here
}

function orNone(value: string | null | undefined): string {
  if (value == null) return "(none)"; // == null matches null AND undefined
  return `"${value}"`;
}

console.log(label(undefined), label(null), label("ok")); // undefined null OK
console.log(orNone(null), orNone(undefined), orNone("")); // (none) (none) ""

== null, gevşek eşitliğin alışılmış olduğu tek yerdir: yalnızca null ve undefined için true olur, başka hiçbir şey için değil. Bir truthiness kontrolü boş string'i eksik sayardı; bu da çoğu zaman bir hatadır.

Optional Chaining: ?.

a?.b, a değeri null veya undefined değilse b özelliğini okur, aksi halde durur ve undefined döndürür. Aynı operatör indeksler için a?.[i], çağrılar için fn?.() şeklinde çalışır.

interface User {
  name: string;
  address?: { city: string; zip?: string };
  tags?: string[];
  onLogin?: () => string;
}

const ada: User = { name: "Ada", address: { city: "London" }, onLogin: () => "welcome" };
const bob: User = { name: "Bob" };

console.log(ada.address?.city);        // London
console.log(bob.address?.city);        // undefined
console.log(ada.address?.zip?.length); // undefined
console.log(bob.tags?.[0]);            // undefined
console.log(ada.onLogin?.());          // welcome
console.log(bob.onLogin?.());          // undefined

bob.address?.city ifadesinin tipi string | undefined olur: optional chaining sonuca undefined ekler, bu yüzden onu genellikle ?? ile birlikte kullanırsınız. Çalışma zamanındaki davranış düz JavaScript'tir; kısa devrenin ayrıntıları için optional chaining sayfasına bakın.

Çift Soru İşareti: ??

a ?? b, a değeri null veya undefined değilse a, öyleyse b döndürür. 0, "", false ve NaN değerlerini de atan eski a || b kalıbının yerini alır:

function pageSize(input: number | undefined): string {
  const withOr = input || 20;      // 0 is falsy, so it is replaced
  const withNullish = input ?? 20; // only undefined is replaced
  return `${withOr} vs ${withNullish}`;
}

console.log(pageSize(undefined)); // 20 vs 20
console.log(pageSize(0));         // 20 vs 0

const scores = new Map([["Ada", 90]]);
const score: number = scores.get("Linus") ?? 0; // number | undefined becomes number
console.log(score);                             // 0

Tipler açısından ??, sol taraftan null ve undefined tiplerini çıkarır ve kalanı sağ tarafla birleştirir (union); scores.get("Linus") ?? 0 ifadesinin bir number değişkenine atanabilmesinin nedeni budur.

Nullish Atama: ??=

a ??= b, b değerini a değişkenine yalnızca a değeri null veya undefined olduğunda atar. Kardeşleri ||= ve &&= ise sol taraf falsy veya truthy olduğunda atar.

interface Options {
  retries?: number;
  label?: string;
}

function withDefaults(opts: Options) {
  opts.retries ??= 3;   // assign only if null or undefined
  opts.label ||= "job"; // assign if falsy, so "" is replaced too
  return opts;
}

console.log(withDefaults({}));                       // { retries: 3, label: 'job' }
console.log(withDefaults({ retries: 0, label: "" })); // { retries: 0, label: 'job' }

retries: 0, ??= işleminden sağ çıkar; boş label ise ||= tarafından değiştirilir. opts.retries ??= 3 sonrasında TypeScript, fonksiyonun geri kalanında opts.retries değerini number tipine daraltır.

Opsiyonel Özellikler ve | undefined

nickname?: string ile nickname: string | undefined okunurken aynıdır, ama anahtarın var olması gerekip gerekmediğinde ayrılırlar:

interface WithOptional { nickname?: string }            // key may be missing
interface WithUndefined { nickname: string | undefined } // key must be present

const a: WithOptional = {};
const b: WithUndefined = { nickname: undefined };

// @ts-expect-error: Property 'nickname' is missing in type '{}' but required in type 'WithUndefined'.
const c: WithUndefined = {};

console.log("nickname" in a, "nickname" in b); // false true
console.log(a.nickname === b.nickname);        // true: both read as undefined

Çağıranlar özelliği atlayabilecekse ?, her çağıranın değeri undefined olsa bile onu açıkça vermesini istiyorsanız | undefined kullanın. exactOptionalPropertyTypes seçeneği (strict kapsamında değildir) ? işaretini daha da sıkılaştırır: nickname?: string o durumda { nickname: undefined } değerini reddeder ve yalnızca eksik bir anahtarı ya da bir string'i kabul eder. Opsiyonel fonksiyon parametreleri (x?: number) opsiyonel özellikler gibi davranır: fonksiyonun içinde x bir number | undefined olur.

null mı undefined mı: Hangisi Kullanılmalı

TypeScript bir seçim dayatmaz, ama bir kod tabanında ikisini karıştırmak her kontrolün iki durumu ele alması demektir. Yaygın bir gelenek:

• Kendi tiplerinizde "ayarlanmamış" için undefined (ve opsiyonel özellikler) kullanın. JavaScript'in varsayılan olarak ürettiği budur: olmayan özellikler, verilmeyen argümanlar, find ve Map.get ıskaları.
• Bir API size null veriyorsa onu kabul edin: JSON içinde undefined yoktur, String.prototype.match ve pek çok DOM metodu null döndürür.
• Bir değer ikisinden biri olabiliyorsa == null ile kontrol edin.

Dizi indeksleme tek boşluktur: users[5], indeks aralık dışında olsa bile eleman tipiyle tiplenir. noUncheckedIndexedAccess seçeneği (strict kapsamında değildir) her indeks erişimine | undefined ekler, böylece derleyici bunu da yakalar.