TypeScript typeof: Type Guard'lar ve typeof Tip Operatörü

typeof TypeScript'te iki anlama gelir. Bir ifadede JavaScript operatörüdür: çalışır, "string" veya "number" gibi bir string döndürür ve siz o string'i karşılaştırdığınızda TypeScript değişkeni daraltır. Bir tip konumunda ise bir tip sorgusudur: typeof config, config değişkeninin statik tipini verir.

// 1. The runtime operator: a check that narrows
function double(value: string | number): string | number {
  if (typeof value === "string") {
    return value.repeat(2); // value: string
  }
  return value * 2;         // value: number
}
console.log(double("ab"), double(21)); // abab 42

// 2. The type query: reuse the type of an existing value
const defaults = { retries: 3, verbose: false };
type Options = typeof defaults; // { retries: number; verbose: boolean }

const custom: Options = { retries: 5, verbose: true };
console.log(typeof custom, custom); // object { retries: 5, verbose: true }

Son satır farkı gösteriyor: bir console.log içindeki typeof custom çalışma zamanı operatörüdür ve object yazdırır; type Options = sonrasındaki typeof defaults ise derleme zamanı sorgusudur ve JavaScript'e hiç ulaşmaz.

Bir Bakışta İki Anlam

TypeScript onları konuma göre ayırt eder, bu yüzden aynı anahtar kelime hiçbir zaman aynı anda ikisini birden ifade etmez.

Çalışma Zamanında typeof Sonuçları

Çalışma zamanı operatörü sekiz string'den birini döndürür. Yaygın değerlerin ne verdiğini görmek için bunu çalıştırın:

const samples: [string, unknown][] = [
  ['"hi"', "hi"],
  ["42", 42],
  ["NaN", NaN],
  ["10n", 10n],
  ["true", true],
  ["undefined", undefined],
  ["null", null],
  ["{}", {}],
  ["[]", []],
  ["new Date(0)", new Date(0)],
  ['new String("x")', new String("x")],
  ["() => 1", () => 1],
  ["class A {}", class A {}],
  ['Symbol("id")', Symbol("id")],
];

for (const [label, value] of samples) {
  console.log(label.padEnd(16), typeof value);
}

Düz JavaScript'te hiç bildirilmemiş bir değişken üzerinde typeof hata fırlatmak yerine "undefined" döndürür. TypeScript'te bu kod derlenmez: Cannot find name 'notDeclared'. (TS2304).

typeof ile Daraltmak

Bir if, bir switch, bir ternary içinde ya da && sonrasındaki bir typeof karşılaştırması, değişkeni her dalda daraltır. Primitive'lerden oluşan bir union'ı ele almanın standart yolu ve unknown üzerinde başvurulacak ilk kontroldür.

function format(value: unknown): string {
  switch (typeof value) {
    case "string":
      return `"${value}"`;                 // value: string
    case "number":
    case "bigint":
      return value.toLocaleString("en-US"); // value: number | bigint
    case "boolean":
      return value ? "yes" : "no";         // value: boolean
    case "function":
      return `function ${value.name}()`;   // value: Function
    default:
      return String(value);
  }
}

console.log(format("hi"));          // "hi"
console.log(format(1234567.891));   // 1,234,567.891
console.log(format(2n ** 64n));     // 18,446,744,073,709,551,616
console.log(format(true));          // yes
console.log(format(Math.max));      // function max()
console.log(format(undefined));     // undefined

typeof x !== "string" diğer yöne, yani string dışındaki her şeye daraltır. Ayrıca derleyici olası sekiz string'i bildiği için karşılaştırmadaki bir yazım hatası, sessizce hep false olan bir kontrol yerine bir derleme hatasıdır:

// This does not compile: "strnig" is not a possible typeof result.
function kind(value: string | number): string {
  if (typeof value === "strnig") {
    return "text";
  }
  return "number";
}

console.log(kind("hey"));

Derleyici index.ts(3,7): error TS2367: This comparison appears to be unintentional because the types '"bigint" | "boolean" | "function" | "number" | "object" | "string" | "symbol" | "undefined"' and '"strnig"' have no overlap. yazdırır. Düz JavaScript'te bu yazım hatası her string'i sessizce number yoluna gönderirdi. Yazımı düzeltin, text yazdırır.

typeof null Tuzağı

typeof null sonucu "object" olduğu için TypeScript typeof x === "object" ifadesini object değil, object | null tipine daraltır. Bir null kontrolü ekleyin, yoksa bir özellik okumak hatadır (TS18047 'x' is possibly 'null'.).

function hasId(value: unknown): boolean {
  // typeof alone leaves value as object | null
  if (typeof value === "object" && value !== null) {
    // value: object
    return "id" in value;
  }
  return false;
}

console.log(hasId({ id: 7 }));  // true
console.log(hasId(null));       // false
console.log(hasId([1, 2]));     // false (arrays pass the typeof check but have no id)
console.log(hasId("id"));       // false

typeof dizileri, tarihleri, map'leri ve düz nesneleri birbirinden ayıramaz: hepsi "object" olur. Diziler için Array.isArray(x), sınıf örnekleri için x instanceof Date kullanın. Interface'ler silindiği için ne typeof ne de başka bir şey bir değerin bir interface ile eşleşip eşleşmediğini çalışma zamanında kontrol edebilir; bunun için özellikleri kontrol eden bir type guard fonksiyonu yazın.

Tip Konumlarında typeof

Bir tipte typeof someVariable, TypeScript'in o değişken için çıkardığı (ya da sizin bildirdiğiniz) tipi kopyalar. Zaten var olan bir değer için tipi elle yazmaktan kurtarır ve ikisini senkron tutar.

const theme = {
  primary: "#3178c6",
  spacing: 8,
  dark: false,
};

type Theme = typeof theme;
// { primary: string; spacing: number; dark: boolean }

function withSpacing(t: Theme, factor: number): Theme {
  return { ...t, spacing: t.spacing * factor };
}

console.log(withSpacing(theme, 2)); // { primary: '#3178c6', spacing: 16, dark: false }

let userName = "Ada";
const fixed = "Ada";
type A = typeof userName; // string
type B = typeof fixed;    // "Ada" (a const keeps its literal type)

Sonuç, değişkenin nasıl bildirildiğine bağlıdır: bir let ya da bir nesne özelliği genişletilir (string, number), bir const primitive ise literal tipini korur. Bir nesneye veya diziye as const ekleyin, typeof en alt seviyeye kadar readonly literal tipler verir. typeof özellik erişimini de kabul eder, typeof theme.spacing sonucu number olur; ama keyfi ifadeleri kabul etmez: type T = typeof getTheme(); bir sözdizimi hatasıdır (';' expected., TS1005). Bir çağrının döndürdüğü tip için ReturnType<typeof getTheme> kullanın.

keyof typeof: Bir Nesnenin Anahtarları Tip Olarak

keyof typeof obj en yaygın birleşimdir. typeof nesneyi bir tipe çevirir, keyof anahtarlarını alır ve nesne değiştikçe doğru kalan, özellik adlarından oluşan bir union elde edersiniz.

const prices = { apple: 1.2, pear: 0.8, kiwi: 0.5 };

type Fruit = keyof typeof prices; // "apple" | "pear" | "kiwi"

function priceOf(fruit: Fruit, quantity: number): string {
  return (prices[fruit] * quantity).toFixed(2);
}

console.log(priceOf("pear", 3)); // 2.40

// @ts-expect-error: Argument of type '"mango"' is not assignable to parameter of type '"apple" | "kiwi" | "pear"'.
priceOf("mango", 1);

Aynı numara sabit bir dizi üzerinde değerlerinin bir union'ını verir: const roles = ["admin", "editor"] as const ile (typeof roles)[number] tipi "admin" | "editor" olur. as const olmadan yalnızca string olurdu. keyof tek başına keyof sayfasında anlatılıyor.

ReturnType<typeof fn> ve Sınıflarda typeof

ReturnType ve Parameters gibi utility tipler bir fonksiyon tipi alır. Bir fonksiyon adı bir değerdir, bu yüzden onu önce typeof üzerinden geçirin:

function createUser(name: string, admin = false) {
  return { id: name.toLowerCase(), name, admin };
}

type User = ReturnType<typeof createUser>;
// { id: string; name: string; admin: boolean }
type CreateArgs = Parameters<typeof createUser>;
// [name: string, admin?: boolean | undefined]

const args: CreateArgs = ["Grace", true];
const user: User = createUser(...args);
console.log(user); // { id: 'grace', name: 'Grace', admin: true }

ReturnType<createUser> yazmak 'createUser' refers to a value, but is being used as a type here. Did you mean 'typeof createUser'? (TS2749) ile başarısız olur; derleyici tam olarak bunu istiyor.

Sınıflar, bir adın hem değer hem tip olduğu tek durumdur. Tip olarak User sınıfın bir örneği anlamına gelir; typeof User ise statik üyeleri dahil sınıfın kendisi, yani constructor anlamına gelir:

class Point {
  static origin = new Point(0, 0);
  constructor(public x: number, public y: number) {}
}

const p: Point = new Point(1, 2);        // an instance
const Ctor: typeof Point = Point;        // the class (constructor + statics)
const q = new Ctor(3, 4);                // q: Point
type Instance = InstanceType<typeof Point>; // Point

typeof, instanceof ve Type Guard

İşe uyan en dar aracı seçin. Sınıf örnekleri için instanceof sayfasına bakın; bir interface ile tanımlanmış biçimler için kullanılabilen tek çalışma zamanı kontrolü bir type guard fonksiyonudur.