TypeScript Academy · Ders

Şablon Değişmez Türlerinin Temelleri

Birleşimlerden ve yer tutuculardan dize türleri oluşturun.

Şablon Değişmez Türlerinin Temelleri, CoddyKit'te ücretsiz bir TypeScript Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, TypeScript Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. TypeScript Academy kursu toplamda 4 dersten oluşur.

Tür Düzeyinde Dizeler

Şablon değişmez türleri, diğer dize türlerini birleştirerek yeni dize değişmez türleri oluşturur. Çalışma zamanındaki şablon dizeleriyle aynı ters tırnak ve yer tutucu söz dizimini kullanırlar, ancak yalnızca türler üzerinde çalışırlar.

Basit Bir Şablon Değişmez Türü

Greeting adlı bir tür takma adının, Hello, metnini ve ardından Name türü için bir yer tutucuyu içeren bir şablon değişmezi olarak tanımlandığını düşünün. Name değişmezi 'Ada' ise Greeting, 'Hello, Ada' değişmez türü olur.

type Name = "Ada"
// type Greeting = template literal: Hello, then Name
// Greeting is the string literal type "Hello, Ada"
const g: "Hello, Ada" = "Hello, Ada"
console.log(g)

Yer Tutucular Diğer Türleri İçerir

Yer tutucunun içine dize benzeri herhangi bir türü koyabilirsiniz: bir değişmez, bir tür parametresi veya bir birleşim. TypeScript, yeni bir değişmez türü oluşturmak için bu türü çevresindeki metne yerleştirir.

type World = "World"
// A template literal type with text Hello,  and placeholder World
// yields the literal "Hello, World"
const hw: "Hello, World" = "Hello, World"
console.log(hw)

Birleşimleri Birleştirmek Çeşitleri Çoğaltır

Bir yer tutucu bir birleşim içerdiğinde, şablon birleşimin her üyesi için genişler. 'a' | 'b' ile sabit bir son eki birleştiren şablon, her birleşimden oluşan bir değer birleşimi üretir.

type Side = "left" | "right"
// template: Side followed by -margin
// expands to "left-margin" | "right-margin"
const m: "left-margin" | "right-margin" = "left-margin"
console.log(m)

Birden Çok Yer Tutucu Birlikte Çoğalır

İki birleşim yer tutucusu bir kartezyen çarpım oluşturur. 'sm' | 'lg' boyutlarını 'red' | 'blue' renkleriyle bir ayraç üzerinden birleştirmek, dört değişmez türü oluşturur.

type Size = "sm" | "lg"
type Color = "red" | "blue"
// template Size-Color expands to 4 combinations
const c: "sm-red" | "sm-blue" | "lg-red" | "lg-blue" = "lg-blue"
console.log(c)

Bu Neden Yararlıdır

Şablon değişmez türleri, dize ailelerini kesin biçimde tanımlamanızı sağlar: CSS sınıf adları, olay adları ve yol değerleri. Böylece derleyici, hatalı dizeleri çalışma zamanından önce reddeder.

type Prefix = "btn"
type Variant = "primary" | "ghost"
// template Prefix--Variant => "btn--primary" | "btn--ghost"
const cls: "btn--primary" | "btn--ghost" = "btn--primary"
console.log(cls)

Sayılar ve Mantıksal Değerler Dönüştürülür

Şablon değişmez türüne yerleştirilen dize olmayan türler, dize biçimine dönüştürülür. 42 sayı değişmezi, ortaya çıkan dize türü içinde 42 metnine dönüşür.

type Id = 42
// template id- followed by Id => "id-42"
const x: "id-42" = "id-42"
console.log(x)

Jenerik Bir Yer Tutucu Kullanma

Jenerik bir işlev, bağımsız değişkeninin değişmez türünden bir şablon değişmez dönüş türü oluşturabilir. Böylece her çağrı noktasında kesin dize bilinir.

function prefixed<T extends string>(s: T) {
  return ("app-" + s) as "app-" extends string ? string : never
}
console.log(prefixed("home")) // app-home

Girdileri Kısıtlama

Bir değerin şablon değişmez türüyle eşleşmesini zorunlu kılabilirsiniz. Yalnızca açıklanan desene uyan dizeler kabul edilir; yazım hataları derleme zamanında yakalanır.

type Pixel = "left" | "right"
function setSide(s: Pixel) { return s }
console.log(setSide("left"))
// setSide("top") // Error: not assignable

Geniş Dize Deseni Bozar

Bir yer tutucu değişmez yerine geniş string türündeyse, şablonun tamamı string türüne dönüşür. Özgüllük için genellikle as const aracılığıyla değişmez girdiler gerekir.

const dynamic: string = "anything"
// a template using dynamic yields just string, not a precise literal
const result: string = "prefix-" + dynamic
console.log(result)

Nerelerde Kullanılmalı

Şablon değişmez türleri, dizelerin bir yapıyı izlediği her yerde idealdir: CSS yardımcı sınıfları, ön ekli tanımlayıcılar, sorgu anahtarları ve olay adları. Dize kurallarını derleyici tarafından denetlenen sözleşmelere dönüştürürler.

type Theme = "light" | "dark"
// template theme- followed by Theme => "theme-light" | "theme-dark"
const t: "theme-light" | "theme-dark" = "theme-dark"
console.log(t)

Kısa Bir Kontrol

Şablon değişmez türlerinin temelleri hakkındaki anlayışınızı sınayın.

Özet

Şablon değişmez türleri, yer tutucuları çevreleyen metne yerleştirerek dize değişmez türleri oluşturur. Birleşim yer tutucuları her birleşimi genişletir ve birden çok birleşim bir kartezyen çarpım oluşturur. Dize olmayan değişmezler metin biçimine dönüştürülür. Geniş bir string yer tutucusu sonucu string türüne dönüştürür; bu nedenle kesin türler için genellikle as const aracılığıyla değişmez girdiler gerekir. Böylece dize kuralları derleyici tarafından denetlenebilir hâle gelir.

Sıkça Sorulan Sorular

“Şablon Değişmez Türlerinin Temelleri” dersi ücretsiz mi?

Evet — “Şablon Değişmez Türlerinin Temelleri” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve TypeScript Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. TypeScript Academy kursu toplamda 4 dersten oluşur.

“Şablon Değişmez Türlerinin Temelleri” dersinde ne öğreneceğim?

Birleşimlerden ve yer tutuculardan dize türleri oluşturun. TypeScript Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

TypeScript Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te TypeScript Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.

“Şablon Değişmez Türlerinin Temelleri” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu TypeScript Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her TypeScript Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← TypeScript Academy Sayfasına Dön