TypeScript Academy · Ders

Dize Birleşimleri ve Otomatik Tamamlama

Bilinen dize değerleri için düzenleyici otomatik tamamlamasından yararlanın.

Dize Birleşimleri ve Otomatik Tamamlama, CoddyKit'te ücretsiz bir TypeScript Academy dersidir. Bu, 4 dersinin 3. 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.

Birleşimler Otomatik Tamamlamayı Yönlendirir

Dize değişmezlerinden oluşan bir birleşim iki işe yarar: izin verilen değerleri kısıtlar ve düzenleyicinizin otomatik tamamlama özelliğini besler. Ancak bazen hem öneriler hem de herhangi bir dizeyi aktarma özgürlüğü istersiniz; bunu sağlayan akıllıca bir yöntem vardır.

Temel Bir Dize Değişmezi Birleşimi

İzin verilen dizelerden oluşan bir birleşim tanımlayın. Düzenleyici tam olarak bu seçenekleri sunar ve geçersiz değerler derleme hatasına neden olur.

type Variant = "primary" | "secondary" | "danger"
const v: Variant = "primary"
console.log(v)
// const bad: Variant = "warning" // Error

Düzenleyicide Otomatik Tamamlama

Bir parametre dize değişmezleri birleşimi olduğunda, çağrı içinde yazarken tam üyeler açılır. Bu, TypeScript'in en çok beğenilen kullanım kolaylıklarından biridir.

type Color = "red" | "green" | "blue"
function paint(c: Color) { return c }
console.log(paint("green")) // editor suggests red/green/blue

Sınırlama

Katı bir birleşim, listedeki değerlerin dışındaki her değeri yasaklar. Bazen yaygın değerleri önermek, aynı zamanda isteğe bağlı özel dizelere izin vermek istersiniz; düz bir birleşim ikisini birden yapamaz.

type Color = "red" | "green"
// You cannot pass "#ff8800" — it is not in the union
function paint(c: Color) { return c }
console.log(paint("red"))

Genişletme Önerileri Kaybettirir

Yalnızca string kullanırsanız her değer çalışır, ancak otomatik tamamlama tamamen ortadan kalkar. Tüm ipuçlarını tam esneklikle değiştirmiş olursunuz; bu ideal değildir.

function paint(c: string) { return c }
console.log(paint("#ff8800")) // works, but no suggestions

string ve Literal-Union Yöntemi

Yöntem şudur: değişmezlerinizi string & {} ile birleştirin. Değişmezler otomatik tamamlamada görünmeye devam ederken string & {}, birleşimi tek bir türe dönüştürmeden diğer tüm dizelere izin verir.

type Color = "red" | "green" | (string & {})
const a: Color = "red"        // suggested
const b: Color = "#ff8800"    // also allowed
console.log(a, b)

string ve Boş Nesne Neden Çalışır

Normalde 'red' | string yalnızca string türüne sadeleşir ve değişmezleri siler. {} ile kesişim almak, TypeScript'in ayrı tuttuğu biraz farklı bir tür oluşturur. Böylece değişmezler tamamlama için korunurken her dize hâlâ uyumlu olur.

type A = "red" | string          // collapses to string — no hints
type B = "red" | (string & {})   // keeps "red" as a suggestion
const x: B = "red"
console.log(x)

Yeniden Kullanılabilir Bir Yardımcı

Niyetin açık ve kod tabanınızın farklı yerlerinde yeniden kullanılabilir olması için yöntemi jenerik bir takma adla sarın.

type LiteralUnion<T extends string> = T | (string & {})
type Size = LiteralUnion<"sm" | "md" | "lg">
const s: Size = "custom-size"
console.log(s)

Bir İşleve Uygulama

Yaygın girdiler için çağıranlara öneriler sunarken özel değerleri de kabul etmek amacıyla yardımcınızı bir API'de kullanın.

type LiteralUnion<T extends string> = T | (string & {})
function setIcon(name: LiteralUnion<"home" | "search">) { return name }
console.log(setIcon("home"))     // suggested
console.log(setIcon("my-icon")) // allowed

Bu Yöntem Ne Zaman Kullanılmalı

Bir API'nin iyi bilinen değerleri olduğunda ancak açık kalması gerektiğinde bu yönteme başvurun: simge adları, CSS birimleri, tema belirteçleri ve çerçeve ön ayarları. Kapalı kümeler için tam güvenlik sağlayan katı bir birleşimi tercih edin.

type LiteralUnion<T extends string> = T | (string & {})
type Unit = LiteralUnion<"px" | "rem" | "%">
const u: Unit = "vh"
console.log(u)

Ödünleşimler

Bu yöntem önerileri korur, ancak güvenliği gevşetir; özel dizelerdeki yazım hataları artık yakalanmaz. Açıklığın bir özellik olduğu yerlerde bilinçli olarak kullanın, varsayılan olarak değil.

type LiteralUnion<T extends string> = T | (string & {})
type Status = LiteralUnion<"active" | "inactive">
const s: Status = "actvie" // typo NOT caught — the cost of openness
console.log(s)

Kısa Bir Kontrol

Otomatik tamamlama yöntemi hakkındaki anlayışınızı sınayın.

Özet

Dize değişmezi birleşimleri düzenleyicide otomatik tamamlamayı güçlendirir ve değerleri kısıtlar; ancak katı bir birleşim özel dizeleri yasaklarken düz string tüm ipuçlarını kaybettirir. T | (string & {}) yöntemi, değişmezleri öneri olarak korurken her dizeyi kabul eder. Bunu LiteralUnion<T> yardımcısı olarak sarın ve yalnızca açıklığın amaçlandığı yerlerde kullanın; yazım hatalarını yakalama güvenliğinden ödün verir.

Sıkça Sorulan Sorular

“Dize Birleşimleri ve Otomatik Tamamlama” dersi ücretsiz mi?

Evet — “Dize Birleşimleri ve Otomatik Tamamlama” 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.

“Dize Birleşimleri ve Otomatik Tamamlama” dersinde ne öğreneceğim?

Bilinen dize değerleri için düzenleyici otomatik tamamlamasından yararlanı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 3. dersidir.

“Dize Birleşimleri ve Otomatik Tamamlama” 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