ProgramlamaFrontend Geliştirici

TypeScript'te tipli şablon dize türleri (Template Literal Types) mekanizması nasıl çalışır ve ne için kullanılır?

Hintsage yapay zeka asistanı ile mülakatları geçin

Cevap.

Soru Geçmişi

TypeScript uzun bir süre boyunca belirli dize veya sayısal değerler için literal türleri tanımlamaya izin verdi, ancak şablon dizelerinin ortaya çıkmasıyla, belirli dize şablonlarının tiplenmesine ihtiyaç doğdu. Şablon Dize Türleri, dize değerlerinin yapısının statik doğrulamasını sağlamak için dize birleştirmeleri temelinde türler tanımlama imkanı sunar.

Sorun

Bir dizeyi belirli bir formata (örneğin, 'kullanıcı_42') uyup uymadığını kontrol etmek, normal string türleriyle mümkün değildir — bunlar çok genel. Şablon türleri olmadan, derleyici bir dize'nin belirli bir desenle uyumlu olup olmadığını garanti edemez.

Çözüm

Şablon Dize Türleri, derleme aşamasında karmaşık dize türleri oluşturmayı ve bunların belirli şablonlarla uyumunu sağlamayı mümkün kılar.

Kod örneği:

type UserId = `kullanıcı_${number}`; function loadUser(id: UserId) { // ... } loadUser('kullanıcı_123'); // doğru loadUser('admin_123'); // derleme hatası

Anahtar özellikler:

  • Literal birleşimleri temelinde dize türleri oluşturma
  • Nesne anahtarları ile kombinasyonlar, iç içe geçmeler ve manipülasyonları destekleme
  • Dize kimlikleri, URL'ler ve diğer yapıların tür güvenliğini artırma

Kandırmaca Soruları.

Şablon Dize Türlerini yalnızca number/literal ile kullanabilir miyiz? Kendi dize literal'larımızı şablonda kullanabilir miyiz?

Herhangi bir literal türü — dizeler, sayılar, birleşimler — kullanılabilir:

type EventType = `etkinlik_${'tıkla' | 'üzerine gel'}`; // etkinlik_tıkla | etkinlik_üzerine gel

Fonksiyon bir Şablon Dize türü beklerken normal bir dize geçebilir miyiz?

Hayır, eğer tür açıkça bir şablon literal'sini bekliyorsa, normal string geçerli olmaz:

function handler(type: `btn_${string}`) {} handler('btn_click'); // tamam handler('buton'); // derleme hatası

Şablon dize türleri, mapped types ve keyof ile çalışıyor mu?

Evet, Şablon Dize Türleri mapped types ve nesne anahtarlarıyla mükemmel şekilde birleştirilebilir:

const colors = {kırmızı: 1, mavi: 2}; type ColorKey = keyof typeof colors; type ColorClass = `renk-${ColorKey}`; // renk-kırmızı | renk-mavi

Tipik hatalar ve anti-paternler

  • Herhangi bir string için uygun olan yerlerde şablon türü kullanımı
  • Esneklik bırakmayan aşırı agresif şablon türleri
  • Derleyici tarafından kontrol edilmeyen runtime değerlerine türlerin bağlanması

Hayatın içinden bir örnek

Olumsuz vaka

API, 'kullanıcı_XXX' biçiminde kimlikleri kabul eder, fonksiyon tiplenmemiştir — her türlü dize gönderilebilir, sunucuda hata oluştuğunda hatalar ortaya çıkar.

Artılar:

  • Değer üzerinde kısıtlama yok

Eksiler:

  • Ekip, yanlış dizeleri girerek hata yapıyor; testler yüzeyseldir.

Olumlu vaka

UserId = kullanıcı_${number} tipi kullanılır, derlemeden önce fonksiyon argümanlarının doğruluğu garanti edilir ve sunucuya güvenli istekler yapılır.

Artılar:

  • Hata sayısında azalma, sıkı tür doğrulaması
  • Otomatik tamamlama ve kod okunabilirliğinde iyileşme

Eksiler:

  • Veri şemasındaki değişikliklerde şablon türlerinin güncellenmesi gerekmektedir.