TypeScript Literal Tipler ve as const, Örneklerle

Literal tip, tam olarak tek bir değeri olan bir tiptir: "up" tek üyesi "up" string'i olan bir tiptir, 404 ise tek üyesi 404 sayısı olan bir tiptir. Tek başlarına pek kullanışlı değildirler. Bir union'da birleştirildiklerinde, sabit bir değer kümesini kabul eden ve başka hiçbir şeyi kabul etmeyen bir değişken elde edersiniz.

type Direction = "up" | "down" | "left" | "right";

function move(dir: Direction, steps: number) {
  console.log(`moving ${dir} by ${steps}`);
}

move("up", 3);
move("left", 1);

// @ts-expect-error: Argument of type '"north"' is not assignable to parameter of type 'Direction'.
move("north", 1);

@ts-expect-error yorumu olmadan son çağrı bir derleme zamanı hatasıdır (TS2345). Yorumla birlikte program derlenir ve çağrı yine çalışıp moving north by 1 yazdırır: literal tipler yalnızca derleyici için vardır, çalışma zamanında değer sıradan bir string'dir.

String, Number ve Boolean Literal'leri

Her string, number, bigint veya boolean değeri bir tip olarak yazılabilir. Derleyici bu durumda yalnızca o tam değeri kabul eder.

let method: "GET" = "GET";
let code: 404 = 404;
let ok: true = true;
let big: 10n = 10n;

type Port = 80 | 443 | 8080;
const port: Port = 443;

boolean tipinin kendisi yalnızca true | false union'ıdır; bir boolean değerini if (flag) ile daralttığınızda else dalında false kalmasının nedeni budur.

Literal Union'ları

Yaygın kullanım, izin verilen her değeri listeleyen bir union'dır. Fonksiyonun içinde derleyici siz kontrol ettikçe union'ı daraltır, böylece her dal elindeki değerin tam olarak ne olduğunu bilir.

type Size = "sm" | "md" | "lg";

function padding(size: Size): number {
  if (size === "sm") return 4;
  if (size === "md") return 8;
  return 16; // size is "lg" here
}

const sizes: Size[] = ["sm", "md", "lg"];
console.log(sizes.map(padding)); // [ 4, 8, 16 ]

String literal union'ı, TypeScript'te enum'a karşı alışılmış alternatiftir. Çalışma zamanında hiçbir maliyeti yoktur, değerler loglayabileceğiniz ve JSON ile gönderebileceğiniz düz string'lerdir ve bir yazım hatası derleme hatası olur. Artıları ve eksileri enum'lar sayfasında.

Genişleme: let ile const

TypeScript bir literal'den tip çıkarırken değerin değişip değişemeyeceğine bakar. Bir const değişkeni asla yeniden atanamaz, bu yüzden literal tipini korur. Bir let değişkeni atanabilir, bu yüzden tipi genel tipe genişletilir.

const a = "hello"; // type: "hello"
let b = "hello";   // type: string
b = "bye";         // fine, b is a string

const n = 42;      // type: 42
let m = 42;        // type: number

let c = a;         // type: string (copying a literal into a let widens it)

console.log(a, b, n, m, c); // hello bye 42 42 hello

Çıkarılan tipi görmek için editörde her adın üzerine gelin. Yalnızca belirli değerleri tutan bir let istiyorsanız ona notasyon yazın: let mode: "light" | "dark" = "light".

Nesne Özellikleri Neden Genişler

Bir nesne literal'inin özellikleri değiştirilebilir, bu yüzden nesne bir const içinde saklansa bile onlar da genişler. Literal tiplerle kazara karşılaşmanın en yaygın yolu budur:

// This does not compile: req.method is string, not "GET" | "POST"
function send(url: string, method: "GET" | "POST") {
  console.log(method, url);
}

const req = { url: "/users", method: "GET" };
send(req.url, req.method);

Derleyici şunu bildirir:

index.ts(7,15): error TS2345: Argument of type 'string' is not assignable to parameter of type '"GET" | "POST"'.

req, { url: string; method: string } olarak çıkarılır, çünkü daha sonraki bir kod req.method = "DELETE" çalıştırabilir. Üç çözüm var:

type Method = "GET" | "POST";

function send(url: string, method: Method) {
  console.log(method, url);
}

// 1. Annotate the object (or the property)
const r1: { url: string; method: Method } = { url: "/users", method: "GET" };

// 2. as const on the whole object: every property becomes readonly and literal
const r2 = { url: "/posts", method: "POST" } as const;

// 3. as const on one property only
const r3 = { url: "/tags", method: "GET" as const };

send(r1.url, r1.method);
send(r2.url, r2.method);
send(r3.url, r3.method);

Dördüncü seçenek satisfies kullanmaktır; nesneyi bir tipe karşı kontrol ederken literal özellik tiplerini korur.

as const

as const bir const assertion'dır. Bir ifadenin sonuna koyun, derleyici çıkarabileceği en dar tipi çıkarır:

• string, number ve boolean değerleri literal tiplerini korur
• nesne özellikleri readonly olur
• dizi literal'leri sabit uzunluklu readonly tuple'lara dönüşür

const config = {
  env: "production",
  retries: 3,
  hosts: ["a.example.com", "b.example.com"],
} as const;
// type: { readonly env: "production"; readonly retries: 3;
//         readonly hosts: readonly ["a.example.com", "b.example.com"] }

// @ts-expect-error: Cannot assign to 'env' because it is a read-only property.
config.env = "staging";

const point = [3, 4] as const; // type: readonly [3, 4]
const [x, y] = point;
console.log(config.retries, x + y); // 3 7

Assertion yalnızca derleme zamanında geçerlidir. Üretilen JavaScript, as const kaldırılmış aynı nesne literal'idir; bu yüzden başka bir kodun onu çalışma zamanında değiştirmesini hiçbir şey engellemez. Çalışma zamanı garantisine ihtiyacınız varsa Object.freeze de çağırın.

as const Bir Diziden Union Tip

Sık görülen bir kalıp, izin verilen değerleri çalışma zamanında üzerinde dolaşabileceğiniz tek bir dizide tutmak ve union tipini ondan türetmektir. (typeof arr)[number], "arr dizisinin herhangi bir elemanının tipi" anlamına gelir.

const ROLES = ["admin", "editor", "viewer"] as const;
type Role = (typeof ROLES)[number]; // "admin" | "editor" | "viewer"

function isRole(value: string): value is Role {
  return (ROLES as readonly string[]).includes(value);
}

for (const input of ["editor", "owner"]) {
  console.log(input, isRole(input)); // editor true, then owner false
}

as const olmadan ROLES bir string[] olurdu ve Role düz string olurdu. isRole içindeki readonly string[] dönüşümü gereklidir, çünkü literal'lerden oluşan bir tuple üzerindeki includes yalnızca o literal'leri kabul eder ve fonksiyonun amacı onlardan biri olmayabilecek bir string'i test etmektir. Aynı kalıp anahtar/değer eşlemeleri için nesnelerle de çalışır: const Status = { Active: "active", Banned: "banned" } as const, ardından type Status = (typeof Status)[keyof typeof Status].

const Tip Parametreleri

Generic bir fonksiyon normalde ona verdiğiniz literal'leri genişletir. TypeScript 5.0'dan beri bir tip parametresini const olarak işaretleyebilirsiniz; bu, derleyicinin argümanı çağırana yazdırmadan, üzerinde as const varmış gibi çıkarmasını sağlar.

function plain<T>(value: T) {
  return value;
}

function exact<const T>(value: T) {
  return value;
}

const a = plain({ kind: "circle", sizes: [1, 2] });
// type: { kind: string; sizes: number[] }

const b = exact({ kind: "circle", sizes: [1, 2] });
// type: { readonly kind: "circle"; readonly sizes: readonly [1, 2] }

console.log(a.kind === b.kind); // true

Bu çoğunlukla kütüphane yazarları için bir araçtır: route tanımları, builder'lar ve şema yardımcıları onu kullanır, böylece çağıranlar düz literal'lerden kesin tipler elde eder.

const'un Anlamları

const anahtar kelimesi TypeScript kodunda dört farklı yerde karşınıza çıkar:

Hiçbiri bir nesneyi çalışma zamanında dondurmaz. const obj = { a: 1 } yine de obj.a = 2 yapılmasına izin verir; yalnızca obj değişkeninin kendisini yeniden atamak hatadır.