0Pricing
Frontend Academy · Ders

Şablon Dize Türleri

Olay adları, CSS özellik dizeleri ve API yol kalıpları gibi türleri türetmek için dize sabiti türlerini şablon dize söz dizimiyle birleştirmeyi öğrenin.

Şablon Dize Türleri, CoddyKit'te ücretsiz bir Frontend 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, Frontend Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Frontend Academy kursu toplamda 4 dersten oluşur.

Şablon Değişmez Türleri Nedir?

TypeScript, tür düzeyinde şablon değişmezlerinden dize türleri oluşturabilir. Birleşim türleriyle birlikte kullanıldığında, her birini tek tek listelemeden binlerce geçerli dizeyi ifade edebilirsiniz.

Temel Şablon Değişmez Türü

Tür konumunda ters tırnaklarla çevrili dizeler kullanın; bu dizeler diğer türleri ara değer olarak kabul eder.

type Greeting = `Hello, ${string}!`;
const a: Greeting = 'Hello, Alice!';  // OK
const b: Greeting = 'Hi, Alice!';     // Error

Birleşimleri Birleştirme

Birleşimi ara değer olarak kullandığınızda TypeScript, tüm birleşimlerin çapraz çarpımını oluşturur.

type Direction = 'top' | 'right' | 'bottom' | 'left';
type Property = 'margin' | 'padding';

type Side = `${Property}-${Direction}`;
// 'margin-top' | 'margin-right' | ... | 'padding-left' (8 strings)

Olay Adı Çıkarımı

Olay adlarından olay işleyicisi adları türetin; bu, gerçek dünyada kullanılan klasik bir yöntemdir.

type EventName = 'click' | 'focus' | 'blur' | 'change';
type HandlerName = `on${Capitalize<EventName>}`;
// 'onClick' | 'onFocus' | 'onBlur' | 'onChange'

type Handlers = { [K in HandlerName]?: (e: Event) => void };
// { onClick?: ...; onFocus?: ...; onBlur?: ...; onChange?: ... }

Dize Değiştirme Yardımcı Türleri

TypeScript yerleşik yardımcılar sunar: Uppercase<T>, Lowercase<T>, Capitalize<T>, Uncapitalize<T>.

type Hi = Capitalize<'hello'>;    // 'Hello'
type Yell = Uppercase<'hello'>;   // 'HELLO'
type Quiet = Lowercase<'HELLO'>;  // 'hello'
type Lower = Uncapitalize<'Hi'>;  // 'hi'

CSS Özellik Türleri

CSS benzeri dize türlerini ifade edin: piksel değerleri, onaltılık renkler ve yüzdeler.

type Px = `${number}px`;
type Hex = `#${string}`;
type Pct = `${number}%`;

type Style = { padding: Px; color: Hex; width: Pct };

const s: Style = { padding: '8px', color: '#fff', width: '50%' }; // OK
const bad: Style = { padding: '8', color: 'white', width: '50' }; // Error

Şablon Değişmezleriyle Tür Çıkarma

infer anahtar sözcüğü bir dize türünün bölümlerini çıkarabilir; ayrıştırıcılar ve yol türleri için kullanışlıdır.

type ExtractName<T> = T extends `Hello, ${infer Name}!` ? Name : never;

type Result = ExtractName<'Hello, Alice!'>;  // 'Alice'

API Yol Türleri

Tür güvenli API yolları: bir dize kalıbından yol parametrelerini çıkarın.

type PathParams<T extends string> =
  T extends `${string}/:${infer Param}/${infer Rest}`
    ? { [K in Param | keyof PathParams<`/${Rest}`>]: string }
    : T extends `${string}/:${infer Param}`
    ? { [K in Param]: string }
    : {};

type P = PathParams<'/users/:userId/posts/:postId'>;
// { userId: string; postId: string }

Tailwind Sınıf Önerisi Türleri

Dize özelliklerini bilinen tasarım sistemi değerleriyle sınırlayın.

type Spacing = 0 | 1 | 2 | 4 | 8 | 16;
type Side = 't' | 'r' | 'b' | 'l';
type TwSpacing = `m${Side}-${Spacing}` | `p${Side}-${Spacing}`;
// 'mt-0' | 'mt-1' | ... | 'pl-16'

function Box(props: { className: TwSpacing }) { /* ... */ }

Sınırlar ve Derleyici Performansı

Şablon değişmezi çapraz çarpımları hızla büyüyebilir (50 × 50 birleşimi 2500 dize üretir). TypeScript derleme yapar ancak tür çıkarımı yavaşlar. Alfabeyi küçük tutun.

Dize Değişmezi Türlerini Ayırt Etme

Şablon değişmezlerini, daha anlamlı bir etiketleme biçimi olarak kullanın; hâlâ bir dizedir ancak kısıtlanmıştır.

Hızlı Kontrol

type X = `on${Capitalize<'click' | 'focus'>}` ifadesi hangi sonucu verir?

Özet: Şablon Değişmez Türleri

Ara değer olarak kullanılan birleşimlerle şablon değişmezlerinden dize türleri oluşturun. Çapraz çarpımlar hızla büyür; alfabeleri küçük tutun. Capitalize/Uppercase/Lowercase/Uncapitalize kullanın. Dize bölümlerini çıkarmak için infer ile birleştirin. Olay adları, CSS değerleri, yol parametreleri ve tasarım sistemi sınıf adları için idealdir.

Sıkça Sorulan Sorular

“Şablon Dize Türleri” dersi ücretsiz mi?

Evet — “Şablon Dize Türleri” 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 Frontend Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Frontend Academy kursu toplamda 4 dersten oluşur.

“Şablon Dize Türleri” dersinde ne öğreneceğim?

Olay adları, CSS özellik dizeleri ve API yol kalıpları gibi türleri türetmek için dize sabiti türlerini şablon dize söz dizimiyle birleştirmeyi öğrenin. Frontend 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.

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

Önceden deneyim gerekmez. CoddyKit'te Frontend 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 Dize Türleri” 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 Frontend Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Frontend 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

  1. Şablon Dize Türleri
  2. Dekoratörler ve Üstveriler
  3. React ile TypeScript: FC Genel Türleri ve Kancalar
  4. Katı Mod ve any Kullanımını Kaldırma
← Frontend Academy Sayfasına Dön