TypeScript Academy · Ders

Yapılandırılmış Dizeleri Modelleme

Etkinlik adları ve rota yolları gibi biçimleri zorunlu kılın.

Yapılandırılmış Dizeleri Modelleme, CoddyKit'te ücretsiz bir TypeScript Academy dersidir. Bu, 4 dersinin 2. 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.

Dize Biçimlerini Zorunlu Kılma

Gerçek uygulamalardaki birçok dize bir yapıyı izler: olay işleyicisi adları, API yol değerleri ve CSS değişkenleri. Şablon değişmez türleri, derleyicinin bu biçimleri zorunlu kılması için onları modellemenizi sağlar.

Olay İşleyicisi Adlarını Modelleme

Bir işleyici adı çoğu zaman on ile büyük harfle başlayan bir olayın birleşimine benzer. Şablon içinde yerleşik Capitalize yardımcısını kullanarak 'click' olayı, 'onClick' işleyici adına dönüştürülür.

type Event = "click" | "focus"
// template: on followed by Capitalize of Event
// => "onClick" | "onFocus"
const h: "onClick" | "onFocus" = "onClick"
console.log(h)

Capitalize Neden Önemlidir

Capitalize olmadan şablon 'onclick' sonucunu üretirdi. Yerleşik tür, değişmezin ilk karakterini büyük harfe dönüştürerek alışılmış camelCase işleyici adlarını oluşturur.

type E = "scroll"
type Cap = Capitalize<E> // "Scroll"
const c: "Scroll" = "Scroll"
console.log(c)

İşleyiciler Eşlemesi Oluşturma

İşleyicilerden oluşan bir nesne türü oluşturmak için şablon değişmez anahtarlarını eşlenmiş bir türle birleştirin. Her olay için, doğru büyük-küçük harf kullanımına sahip türlendirilmiş bir işlev elde edilir.

type Events = "click" | "hover"
type Handlers = {
  [E in Events as "on" extends string ? "on" : never]?: () => void
}
// In practice the key uses a template: on + Capitalize<E>
const h: { onClick?: () => void } = {}
console.log(h)

Yol Değerlerini Modelleme

API yolları; başta eğik çizgi, ardından kaynak ve kimlik bölümü gibi ortak bir biçime sahiptir. Sabit metni bir yer tutucuyla birleştiren bir şablon, geçerli yolları yakalar.

type Resource = "users" | "posts"
// template: /api/ followed by Resource
// => "/api/users" | "/api/posts"
const path: "/api/users" | "/api/posts" = "/api/users"
console.log(path)

Parametreli Yollar

Dinamik bir kimlik için yer tutucu ekleyin. Eğik çizgi, kaynak, eğik çizgi ve ardından jenerik bir kimlik bölümünden oluşan bir şablon, kaynak yolunun ardından sayısal bir kimlik gelen yolları modeller.

type Id = number
// template: /users/ followed by Id-like segment
function userPath(id: number): string {
  return "/users/" + id
}
console.log(userPath(42)) // /users/42

Biçimleri Derleme Zamanında Zorunlu Kılma

Bir parametreyi şablon değişmez türü olarak türlendirerek yapıya uymayan her dizeyi reddedersiniz. Bu, hatalı yol veya anahtarlara karşı bir güvenlik önlemidir.

type Method = "GET" | "POST"
function call(endpoint: "GET /users" | "POST /users") {
  return endpoint
}
console.log(call("GET /users"))
// call("DELETE /users") // Error
console.log("ok")

CSS Değişken Adlarını Oluşturma

CSS özel özellikleri bir adlandırma şemasını izler. İki baştaki tireyi bir belirteç yer tutucusuyla birleştiren bir şablon, renk belirteci değişkeni gibi adları modeller.

type Token = "primary" | "accent"
// template: --color- followed by Token
// => "--color-primary" | "--color-accent"
const v: "--color-primary" | "--color-accent" = "--color-accent"
console.log(v)

Çıkarımla Parçalama

Şablon değişmez türleri ayrıştırma da yapabilir: koşullu türler ve infer ile yapılandırılmış bir dizenin parçalarını tür düzeyinde çıkarabilirsiniz. Örneğin, bir uç nokta dizesindeki yöntemi alabilirsiniz.

type ExtractMethod<S> = S extends "GET /users" ? "GET" : "OTHER"
type M = ExtractMethod<"GET /users"> // "GET"
const m: "GET" = "GET"
console.log(m)

Gerçek Dünya Faydası

Yapılandırılmış dize türleri, birçok hata sınıfını yakalar: yanlış yazılmış bir işleyici adı, bilinmeyen bir yol veya yanlış bir CSS belirteci. Bunların tümü sessiz çalışma zamanı hataları yerine derleme hatalarına dönüşür.

type Tab = "home" | "profile"
// template: tab- followed by Tab => "tab-home" | "tab-profile"
function selectTab(id: "tab-home" | "tab-profile") { return id }
console.log(selectTab("tab-home"))

Okunabilirliği Koruyun

Güçlü olsalar da derin biçimde iç içe geçmiş şablon türleri okunabilirliği azaltır. Yapının sonraki okuyucu için açık kalması amacıyla ara tür takma adlarını adlandırın.

type Entity = "user" | "order"
// type EventName = on + Capitalize<Entity> + Created
// e.g. "onUserCreated" | "onOrderCreated"
const e: "onUserCreated" | "onOrderCreated" = "onUserCreated"
console.log(e)

Kısa Bir Kontrol

Yapılandırılmış dizeleri modelleme hakkındaki anlayışınızı sınayın.

Özet

Şablon değişmez türleri, işleyici adları (on + bir olayın Capitalize sonucu), yol değerleri ve CSS değişkenleri gibi yapılandırılmış dizeleri modeller ve bu biçimleri derleme zamanında zorunlu kılar. Eşlenmiş türlerle birleştirildiğinde işleyici eşlemeleri oluşturur; koşullu türler ve infer ile birleştirildiğinde dizeleri ayrıştırır. Karmaşık desenlerin okunabilir kalması için ara takma adları adlandırın.

Sıkça Sorulan Sorular

“Yapılandırılmış Dizeleri Modelleme” dersi ücretsiz mi?

Evet — “Yapılandırılmış Dizeleri Modelleme” 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.

“Yapılandırılmış Dizeleri Modelleme” dersinde ne öğreneceğim?

Etkinlik adları ve rota yolları gibi biçimleri zorunlu kılın. 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 2. dersidir.

“Yapılandırılmış Dizeleri Modelleme” 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