İlkel Türler, Birleşimler ve Tür Takma Adları
Değişkenlere string, number, boolean ve dizi türleri için açıklamalar ekleyin. | ile birleşim türleri oluşturun ve type takma adlarıyla bunlara okunabilir adlar verin.
İlkel Türler, Birleşimler ve Tür Takma Adları, CoddyKit'te ücretsiz bir Frontend 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, 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.
Değişkenlere Açıklama Ekleme
Değişken adından sonra iki nokta kullanarak tür açıklamaları ekleyin. TypeScript mümkün olduğunda türleri çıkarır — çıkarımın belirsiz olduğu veya belgeleme gerektiği yerlerde açık açıklamalar ekleyin.
let score: number = 0;
const greeting: string = 'Hello';
let active: boolean = true;
let data: null = null;
let placeholder: undefined;
// Inferred (no annotation needed):
const pi = 3.14; // TypeScript knows this is numberİlkel Türler
TypeScript'in ilkel türleri, JavaScript'in ilkel değerleriyle eşleşir: string, number (tam sayı ile ondalık sayı arasında ayrım yoktur), boolean, null, undefined, symbol, bigint.
function greet(name: string): string {
return `Hello, ${name}`;
}
function double(n: number): number {
return n * 2;
}
function toggle(active: boolean): boolean {
return !active;
}Diziler
Bir dizinin türünü Type[] veya genel tür olan Array<Type> ile belirtin. İkisi de eşdeğerdir.
const names: string[] = ['Alice', 'Bob'];
const scores: number[] = [98, 87, 72];
const flags: boolean[] = [true, false, true];
// Generic syntax:
const items: Array<string> = ['a', 'b'];Birleşim Türleri: |
Birleşim türleri, bir değişkenin çeşitli türlerden birini taşımasına olanak tanır. Boru | işlecini kullanın. TypeScript, koşullu ifadelerin içinde türü daraltır.
function formatId(id: number | string): string {
if (typeof id === 'number') {
return `#${id.toString().padStart(6, '0')}`; // id is narrowed to number
}
return id.toUpperCase(); // id is narrowed to string
}Değişmez Değer Türleri
Dizge, sayı veya boolean türündeki değişmez değerleri tür olarak kullanabilirsiniz. Birleşimlerle birlikte kullanıldıklarında, numaralandırma türü gibi izin verilen değerlerden oluşan sabit bir küme oluştururlar.
type Direction = 'north' | 'south' | 'east' | 'west';
type Status = 'pending' | 'active' | 'cancelled';
type DiceRoll = 1 | 2 | 3 | 4 | 5 | 6;
function move(dir: Direction) { /* ... */ }
move('north'); // OK
move('up'); // Error: Argument not assignableTür Takma Adları: tür
type anahtar sözcüğü, herhangi bir tür için yeniden kullanılabilir bir ad olan tür takma adı oluşturur. Takma adlar ilkel türler, birleşimler, nesneler, demetler ve karmaşık birleştirilmiş türler için kullanılabilir.
type UserId = string | number;
type RGB = [number, number, number]; // tuple
type Callback = (event: MouseEvent) => void;
const userId: UserId = 42;
const red: RGB = [255, 0, 0];
const handler: Callback = (e) => console.log(e.type);type ile Nesne Türleri
Tür takma adlarıyla nesnelerin yapılarını açıklayın. Özellikleri ? ile isteğe bağlı, readonly ile salt okunur olarak işaretleyin.
type User = {
id: number;
name: string;
email: string;
role?: 'admin' | 'user'; // optional
readonly createdAt: Date; // can't reassign
};
const user: User = {
id: 1,
name: 'Alice',
email: 'alice@example.com',
createdAt: new Date()
};Kesişim Türleri: &
Birden fazla türü & işlecini kullanarak birleştirin. Ortaya çıkan tür, her iki türün de tüm özelliklerine sahip olur. Türleri genişletmek için kullanışlıdır.
type Timestamped = {
createdAt: Date;
updatedAt: Date;
};
type UserWithTimestamp = User & Timestamped;
// Has all User properties AND createdAt/updatedAtany Türü — Kaçış Yolu
any, bir değer için tür denetiminden çıkmanızı sağlar. Bulaşıcıdır — any'den türetilen değerler de any olur. Geçiş sırasında son çare olarak kullanın; uzun vadeli bir çözüm olarak kesinlikle kullanmayın.
let data: any = fetch('/api/data'); // no type checking
data.foo.bar.baz; // no error — and no protection
// Better: use 'unknown' and narrow it:
let raw: unknown = getExternalData();
if (typeof raw === 'string') {
console.log(raw.toUpperCase()); // narrowed
}unknown Türü — any için Güvenli Alternatif
unknown, any türünün tür güvenli karşılığıdır. Bir unknown değeri, önce türünü daraltmadan kullanamazsınız. Bu, haricî verileri doğrulamanızı zorunlu kılar.
Demetler — Sabit Uzunluklu Diziler
Demet, her konumunun bilinen bir türe sahip olduğu sabit uzunluklu bir dizidir.
type Point = [number, number];
const origin: Point = [0, 0];
const p: Point = [3, 4];
// React useState returns a tuple:
const [count, setCount] = useState<number>(0);Kısa Kontrol
Bir işlevin dize veya sayı kabul etmesini sağlayan TypeScript özelliği hangisidir?
Özet: İlkel Türler, Birleşimler, Takma Adlar
İlkel türler: dize, sayı, mantıksal, null, undefined. Diziler: Type[]. Birleşim türleri: A | B. Sabit değer kümeleri için değişmez değer türleri. Yeniden kullanılabilir tür adları için type takma adı. ? ile isteğe bağlı özellikler. Değişmez özellikler için readonly. Haricî verilerde any yerine unknown kullanmayı tercih edin.
Yapay zeka eğitmeniyle HTML öğren — ücretsiz
Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.
- Kurslar
- 41
- Dersler
- 163
Sıkça Sorulan Sorular
“İlkel Türler, Birleşimler ve Tür Takma Adları” dersi ücretsiz mi?
Evet — “İlkel Türler, Birleşimler ve Tür Takma Adları” 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.
“İlkel Türler, Birleşimler ve Tür Takma Adları” dersinde ne öğreneceğim?
Değişkenlere string, number, boolean ve dizi türleri için açıklamalar ekleyin. | ile birleşim türleri oluşturun ve type takma adlarıyla bunlara okunabilir adlar verin. 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 2. dersidir.
“İlkel Türler, Birleşimler ve Tür Takma Adları” 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
- TypeScript Neden Kullanılır: Türler Derleme Zamanında Hataları Yakalar
- İlkel Türler, Birleşimler ve Tür Takma Adları
- Arayüzler ve Nesne Türleri
- TS Derleme ve tsconfig.json