TypeScript: tiplerle güvenli kod

Ders 38'in sonunda API'n çalışıyordu, ama yolda karşılaştığın hataların çoğu kod çalışırken ortaya çıktı: metin olarak gelen sayılar, küçük harfe dönen alan adları, null gelen sütunlar. Bu derste JavaScript'e tip ekleyen TypeScript'i öğreniyorsun. Kodu yazarken her değerin ne olabileceğini söyleyeceksin; TypeScript da program daha çalışmadan bu sözü bozan satırları gösterecek. Dersin sonunda .ts dosyalarını Node ile çalıştırabilecek, tsc ile denetleyebilecek ve tip hata mesajlarını okuyup düzeltebileceksin.

#Neden tip: hatayı çalıştırmadan görmek

Isınmadaki dört hatanın ortak yanı ne? Hiçbiri kodu yazdığın anda görünmedi. Kod çalıştı, bir gün belli bir veriyle karşılaştı ve ya yanlış sonuç verdi ya da çöktü. Bir hatayı ne zaman fark ettiğin, onu ne kadar pahalıya ödediğini belirler.

Bu derste yeni bir klasörde çalışacaksın. Terminalde cd C:\kod ile kod klasörüne geç, mkdir tipler ile klasörü oluştur ve code tipler ile VS Code'da aç (Ders 6'daki gibi). Yeni pencerede terminali aç ve seri.js adında bir dosya oluştur:

1const jinx = { isim: "Jinx", seri: 0 }2 3for (let i = 1; i <= 5; i++) {4    jinx.seri = jinx.seri + 15    if (jinx.seri === 5) {6        console.log(jinx.isim.toUppercase() + ": PENTAKILL!")7    } else {8        console.log(jinx.isim + " seri: " + jinx.seri)9    }10}

Jinx seri: 1Jinx seri: 2Jinx seri: 3Jinx seri: 4C:\kod\tipler\seri.js:6        console.log(jinx.isim.toUppercase() + ": PENTAKILL!")                              ^ TypeError: jinx.isim.toUppercase is not a function    at Object.<anonymous> (C:\kod\tipler\seri.js:6:31)    ... Node.js v24.20.0

Program dört turu sorunsuz geçti, beşincide çöktü: toUpperCase yerine toUppercase yazılmış (küçük c). Hata 6. satırda, dosyayı yazdığın andan beri vardı. Ama JavaScript bir satırı ancak çalıştırırken okur; o satıra da yalnız seri 5'e ulaşınca gelinir. Pentakill nadir olur: böyle bir kod haftalarca çalışıp ilk pentakill'de bir oyuncunun önünde patlayabilir.

Şimdi VS Code'un dosya listesinde seri.js'e sağ tıkla, Rename'i seç ve adını seri.ts yap. İçeriğe dokunma. .ts, TypeScript dosyalarının uzantısıdır. VS Code TypeScript'i kendi içinde taşır; uzantıyı değiştirdiğin anda dosyayı denetlemeye başlar:

1const jinx = { isim: "Jinx", seri: 0 }2 3for (let i = 1; i <= 5; i++) {4    jinx.seri = jinx.seri + 15    if (jinx.seri === 5) {6        console.log(jinx.isim.toUppercase() + ": PENTAKILL!")7    } else {8        console.log(jinx.isim + " seri: " + jinx.seri)9    }10}

seri.ts  1  Property 'toUppercase' does not exist on type 'string'.    Did you mean 'toUpperCase'? ts(2551) [Ln 6, Col 31]

Program hiç çalışmadı, ama hata ortada. Mesaj İngilizce: Property 'toUppercase' does not exist on type 'string'. Did you mean 'toUpperCase'? Yani "string tipinde toUppercase diye bir alan yok; toUpperCase'i mi demek istedin?" Property, Ders 4'te öğrendiğin alan demek; tip mesajlarında metotlar da bu sözcükle anılır. Fareyi kırmızı çizginin üstüne getirirsen aynı mesaj küçük bir kutuda da görünür.

TypeScript bunu nereden bildi? isim alanına "Jinx" koydun; demek ki jinx.isim bir metin. Metinlerin hangi metotları olduğu da belli: listede toUpperCase var, toUppercase yok. TypeScript bunu kodu çalıştırmadan, yalnız okuyarak çıkardı. Tek bir tip bile yazmadığına dikkat et.

TypeScript her hatayı yakalamaz. Can hesabında - yerine + yazarsan iki satır da tip olarak doğrudur; mantık hatalarını yine sen yakalarsın. Bir de tipler yalnız senin kodunu bilir: internetten ya da veritabanından gelen verinin ne olduğu ancak çalışırken belli olur. Bunun çaresini dersin ilerisinde, unknown bölümünde göreceksin.

#TypeScript'i projeye kurmak

VS Code'un denetimi yalnız açık dosyalara bakar ve VS Code'un içindeki TypeScript sürümüyle çalışır. Gerçek projelerde TypeScript'i projenin kendisine kurarsın: böylece bütün dosyaları terminalden tek komutla denetler, ayarları bir dosyada tutar, ekipteki herkesle ve sunucuyla aynı sürümü kullanırsın. Terminal C:\kod\tipler'deyken:

PS C:\kod\tipler> npm init -yWrote to C:\kod\tipler\package.json:...PS C:\kod\tipler> npm pkg set type=modulePS C:\kod\tipler> npm install -D typescript @types/node@24 added 4 packages, and audited 5 packages in 2s found 0 vulnerabilitiesPS C:\kod\tipler> npx tsc --versionVersion 7.0.2

• npm pkg set type=module: Ders 14'teki "type": "module" ayarı. .ts dosyaların da ES modülü sayılır.
• -D: paketleri package.json'da dependencies yerine devDependencies altına yazar. Uzun yazılışı --save-dev.
• typescript: TypeScript'in kendisi. İçinden tsc komutu çıkar.
• @types/node@24: Node 24'ün tip tanımları. process, Buffer gibi Node'a özgü adların tiplerini TypeScript buradan öğrenir. @24 yazmazsan daha yeni bir Node sürümünün tanımları gelir.
• npx tsc --version: npx önce projenin node_modules klasörüne bakar; komut oradaysa onu çalıştırır. Ders 18'deki npx serve'de paket projede yoktu ve npx onu indirmeden önce sormuştu; TypeScript ise artık projede kurulu, bir şey inmez. Bu ders TypeScript 7.0.2 ile denendi; sende daha yeni bir sürüm görünebilir.

TypeScript'e nasıl denetleyeceğini bir ayar dosyası söyler. Klasörde yeni bir dosya aç, adını tam olarak tsconfig.json koy ve yaz:

1{2    "compilerOptions": {3        "target": "esnext",4        "module": "nodenext",5        "types": ["node"],6        "strict": true,7        "noEmit": true,8        "skipLibCheck": true9    }10}

• "compilerOptions": bütün ayarlar bu objenin içinde. Adındaki compiler (derleyici) sözcüğünü birazdan açıklıyoruz.
• "target": "esnext" ve "module": "nodenext": en yeni JavaScript özelliklerini tanı, dosyaları Node'un modül kurallarıyla oku (import, export, "type": "module").
• "types": ["node"]: az önce kurduğun Node tiplerini kullan. Yazmazsan process gibi adları tanımaz.
• "strict": true: en sıkı denetim. Bu derste göreceğin "tipi belirsiz parametre" ve "undefined olabilir" hatalarını açan ayar budur. TypeScript 6'dan beri zaten varsayılan, ama açıkça yazmak dosyayı okuyan herkese niyetini söyler.
• "noEmit": true: "yalnız denetle, dosya üretme". tsc istersen her .ts'nin yanına bir .js yazabilir; bize gerekmiyor, çünkü Node .ts'yi doğrudan çalıştırıyor. Komutta da --noEmit yazacağız; ayar dosyasında olduğu için şart değil, ama komutu okuyan herkes ne yaptığını hemen anlasın.
• "skipLibCheck": true: node_modules içindeki hazır tip dosyalarını yeniden denetleme; zaman kazandırır.

Şimdi bütün projeyi denetle:

PS C:\kod\tipler> npx tsc --noEmitseri.ts:6:31 - error TS2551: Property 'toUppercase' does not exist on type 'string'. Did you mean 'toUpperCase'? 6         console.log(jinx.isim.toUppercase() + ": PENTAKILL!")                                ~~~~~~~~~~~   node_modules/@typescript/typescript-win32-x64/lib/lib.es5.d.ts:506:5 - 'toUpperCase' is declared here.    506     toUpperCase(): string;            ~~~~~~~~~~~~~~~~~~~~~~  Found 1 error in seri.ts:6

VS Code'daki hatanın aynısı, bu kez terminalde. İlk satır yeri (seri.ts:6:31: dosya, satır, sütun), hata kodunu (TS2551) ve mesajı verir. Altında satırın kopyası durur; ~~~ işaretleri sorunlu kısmın altını çizer. Girintili ek satır, önerilen toUpperCase'in tanımlandığı yeri gösteriyor: TypeScript'in kendi tip dosyası. Bu tür ek satırları şimdilik geçebilirsin. Mesajları nasıl okuyacağını dersin sonunda ayrıntılı göreceksin.

6. satırı düzelt (toUpperCase, büyük C) ve iki komutu sırayla çalıştır:

1const jinx = { isim: "Jinx", seri: 0 }2 3for (let i = 1; i <= 5; i++) {4    jinx.seri = jinx.seri + 15    if (jinx.seri === 5) {6        console.log(jinx.isim.toUpperCase() + ": PENTAKILL!")7    } else {8        console.log(jinx.isim + " seri: " + jinx.seri)9    }10}

PS C:\kod\tipler> npx tsc --noEmitPS C:\kod\tipler> node seri.tsJinx seri: 1Jinx seri: 2Jinx seri: 3Jinx seri: 4JINX: PENTAKILL!

Bundan sonra iş akışın hep bu: önce npx tsc --noEmit ile denetle, sonra node dosya.ts ile çalıştır. Node'un tipleri nasıl ele aldığını dersin ilerisinde göreceksin; şimdilik şunu bil: Node tipleri denetlemez. Tipi hatalı bir dosyayı da çalıştırır.

#Temel tipler

Bir değişkenin tipini, adından sonra iki nokta koyup yazarsın. temel.ts dosyasını oluştur:

1let isim: string = "Ahri"2let hp: number = 1003let canli: boolean = true4 5hp = hp - 306console.log(isim, hp, canli)

Ahri 70 true

isim: string, "isim bir metin olacak" demek. Bu eklere tip notu denir. Temel tipler, Ders 1'den beri kullandığın değerlerin adlarıdır; en sık ilk üçünü yazarsın:

Tip adları küçük harfle yazılır: string, number, boolean. Ders 33'te Postgres sütunlarına veri tipi vermiştin; fikir aynı, kutular farklı. Bir fark var: Postgres'te integer ile numeric ayrıydı, TypeScript'te tam sayı da ondalıklı sayı da number.

1let isim: string = "Ahri"2let hp: number = 1003let canli: boolean = true4 5hp = "yetmiş"6console.log(isim, hp, canli)

Ahri yetmiş true

PS C:\kod\tipler> npx tsc --noEmittemel.ts:5:1 - error TS2322: Type 'string' is not assignable to type 'number'. 5 hp = "yetmiş"  ~~  Found 1 error in temel.ts:5

#Tip çıkarımı: her yere tip yazmazsın

Her değişkene tip yazmak yorucu olurdu ve çoğu zaman gerek de yok. cikarim.ts'yi hiç tip notu kullanmadan yaz:

1let altin = 3002const koridor = "orta"3 4altin = altin + 1505altin = "bin"6console.log(altin, koridor)

bin orta

PS C:\kod\tipler> npx tsc --noEmitcikarim.ts:5:1 - error TS2322: Type 'string' is not assignable to type 'number'. 5 altin = "bin"  ~~~~~  Found 1 error in cikarim.ts:5

Dosyada tek bir tip notu yok, ama TypeScript altin'ın number olduğunu biliyor: ilk değeri 300'dü. Buna tip çıkarımı denir. VS Code'da fareyi 1. satırdaki altin'ın üstüne getir: küçük kutuda let altin: number yazar. koridor'un üstüne getirince const koridor: "orta" görürsün. const asla değişmeyeceği için tipi "herhangi bir metin" değil, tam olarak "orta"; bunun ne işe yaradığını birleşim tiplerinde göreceksin. 5. satırı sil, dosya temizlensin.

Peki ne zaman tip yazarsın?

• Fonksiyon parametrelerine her zaman. TypeScript bir parametreye hangi değerin geleceğini bilemez. Bir sonraki bölümün konusu bu.
• Değeri sonradan verilecek değişkene: let kazanan: string yazıp değeri ileride koyacaksan.
• İzin verilen değerleri daraltmak istediğinde: "bu alan yalnız şu beş koridordan biri olabilir" gibi. Birleşim tipleri bölümünde.
• Geri kalan her yerde (let altin = 300 gibi) işi TypeScript'e bırak. Gereksiz tip notları kodu yalnız kalabalıklaştırır.

#Fonksiyonlara tip vermek

Fonksiyonlar TypeScript'in en çok işe yaradığı yerdir. Bir fonksiyonu yazdığın an ile çağırdığın an arasında günler geçebilir; çağıran kişi başkası bile olabilir. Parametrelerin ve dönüş değerinin tipi, fonksiyonun kullananlara verdiği sözdür. hasar.ts:

1function hasarVer(hp: number, hasar: number): number {2    return Math.max(hp - hasar, 0)3}4 5function iyiles(hp: number, miktar: number): number {6    return hp + miktar7}8 9console.log(hasarVer(100, 30))10console.log(hasarVer(20, 50))11console.log(iyiles(70, 20))

70090

Kalıp şu: her parametrenin adından sonra tipi (hp: number), parantezden sonra da dönüş tipi (): number). hasarVer "iki sayı alırım, bir sayı döndürürüm" diyor. Math.max(…, 0) (Ders 9) canın eksiye düşmesini engelliyor; ikinci satırdaki 0 bu yüzden.

5function iyiles(hp, miktar) {6    return hp + miktar7}

PS C:\kod\tipler> npx tsc --noEmithasar.ts:5:17 - error TS7006: Parameter 'hp' implicitly has an 'any' type. 5 function iyiles(hp, miktar) {                  ~~ hasar.ts:5:21 - error TS7006: Parameter 'miktar' implicitly has an 'any' type. 5 function iyiles(hp, miktar) {                      ~~~~~~  Found 2 errors in the same file, starting at: hasar.ts:5

13const iksir = "20"14console.log(iyiles(70, iksir))

PS C:\kod\tipler> npx tsc --noEmithasar.ts:14:24 - error TS2345: Argument of type 'string' is not assignable to parameter of type 'number'. 14 console.log(iyiles(70, iksir))                          ~~~~~  Found 1 error in hasar.ts:14

Argümanların sayısı da denetlenir. 12. satıra console.log(hasarVer(100)) yazıp denetlersen:

PS C:\kod\tipler> npx tsc --noEmithasar.ts:12:13 - error TS2554: Expected 2 arguments, but got 1. 12 console.log(hasarVer(100))               ~~~~~~~~   hasar.ts:1:31 - An argument for 'hasar' was not provided.    1 function hasarVer(hp: number, hasar: number): number {                                    ~~~~~~~~~~~~~  Found 1 error in hasar.ts:12

"2 argüman bekleniyordu, 1 geldi." Ek satır hangi parametrenin boş kaldığını da söylüyor: hasar. Node bu satırda NaN yazardı: hasar undefined kalır ve 100 - undefined bir sayı değildir. Satırı sil.

#Dönüş tipi bir sözdür

durum.ts:

1function durum(hp: number): string {2    if (hp > 0) {3        return "hayatta"4    } else if (hp === 0) {5        return "öldü"6    }7}8 9console.log(durum(50))10console.log(durum(-10))

hayattaundefined

PS C:\kod\tipler> npx tsc --noEmitdurum.ts:1:29 - error TS2366: Function lacks ending return statement and return type does not include 'undefined'. 1 function durum(hp: number): string {                              ~~~~~~  Found 1 error in durum.ts:1

: string, "bu fonksiyon her zaman metin döndürür" sözü. Ama can eksiyse iki koşul da tutmaz ve fonksiyon return'e uğramadan biter, yani undefined döner (Ders 6). Mesaj tam bunu söylüyor: "fonksiyonun sonunda return yok ve dönüş tipi undefined içermiyor". Sınır değerini senin yerine TypeScript düşündü. Sona bir return ekle:

1function durum(hp: number): string {2    if (hp > 0) {3        return "hayatta"4    } else if (hp === 0) {5        return "öldü"6    }7    return "geçersiz can"8}9 10console.log(durum(50))11console.log(durum(-10))

hayattageçersiz can

#Hiçbir şey döndürmeyen fonksiyon ve ok fonksiyonu

kritik.ts:

1const kritikVurus = (hasar: number, carpan: number = 2): number => hasar * carpan2 3function duyur(mesaj: string): void {4    console.log("[Duyuru] " + mesaj)5}6 7duyur("Kritik vuruş: " + kritikVurus(45))8duyur("Süper kritik: " + kritikVurus(45, 3))

[Duyuru] Kritik vuruş: 90[Duyuru] Süper kritik: 135

• Ok fonksiyonunda (Ders 10) tipler aynı yerlere yazılır: parametrelerin yanına ve parantezden sonra.
• carpan: number = 2: varsayılan değeri olan parametre. Burada : number yazmasan da olurdu; TypeScript tipi 2'den çıkarır. Çağıran bu argümanı vermeyebilir.
• void (boşluk): fonksiyon bir şey döndürmüyor. duyur yalnız ekrana yazıyor; sonucunu bir değişkene koymanın anlamı yok.

#type ve interface: objenin şekli

Fonksiyona tek tek sayı vermek kolay. Peki Ders 4'teki gibi bütün bir şampiyon objesi gelecekse? Bir objenin tipi, hangi alanları olduğu ve her alanın tipidir. Bu şekli bir kez tanımlar, ona bir ad verirsin. sampiyon.ts:

1type Sampiyon = {2    isim: string3    hp: number4    gold: number5}6 7const ahri: Sampiyon = { isim: "Ahri", hp: 100, gold: 300 }8 9function durumYaz(s: Sampiyon): string {10    return s.isim + ": " + s.hp + " can, " + s.gold + " altın"11}12 13console.log(durumYaz(ahri))

Ahri: 100 can, 300 altın

• type Sampiyon = { … }: "Sampiyon adında bir tip tanımlıyorum: isim metni, hp ve gold sayıları olan bir obje." type bir tipe ad verir.
• Tip adları büyük harfle başlar, Ders 16'daki sınıf adları gibi (PascalCase). Değişkenin adı ahri, tipininki Sampiyon.
• Alanların arasına virgül koymadık: her alan kendi satırındaysa gerekmez. Tek satırda yazarsan { isim: string; hp: number } diye noktalı virgülle ayırırsın.
• const ahri: Sampiyon, "bu obje Sampiyon şeklinde" sözü. durumYaz(s: Sampiyon) da "bana bu şekilde bir obje ver" diyor.

Şekle uymayan her obje yakalanır. sampiyon.ts'nin sonuna, bir satır boşluk bırakıp bilerek üç hatalı satır ekle:

15const lux: Sampiyon = { isim: "Lux", hp: 90 }16const jinx: Sampiyon = { isim: "Jinx", hp: 80, gold: 250, mana: 300 }17console.log(ahri.mana)

PS C:\kod\tipler> npx tsc --noEmitsampiyon.ts:15:7 - error TS2741: Property 'gold' is missing in type '{ isim: string; hp: number; }' but required in type 'Sampiyon'. 15 const lux: Sampiyon = { isim: "Lux", hp: 90 }         ~~~   sampiyon.ts:4:5 - 'gold' is declared here.    4     gold: number          ~~~~ sampiyon.ts:16:59 - error TS2353: Object literal may only specify known properties, and 'mana' does not exist in type 'Sampiyon'. 16 const jinx: Sampiyon = { isim: "Jinx", hp: 80, gold: 250, mana: 300 }                                                             ~~~~ sampiyon.ts:17:18 - error TS2339: Property 'mana' does not exist on type 'Sampiyon'. 17 console.log(ahri.mana)                    ~~~~  Found 3 errors in the same file, starting at: sampiyon.ts:15

• TS2741, Property 'gold' is missing…: "gold alanı eksik ama Sampiyon'da zorunlu". Ek satır zorunluluğun nereden geldiğini gösteriyor: tipin 4. satırı.
• TS2353, Object literal may only specify known properties…: "obje yalnız bilinen alanları içerebilir; mana Sampiyon'da yok". Fazla bir alan çoğu zaman yazım hatasıdır (gold yerine glod); TypeScript bu yüzden durdurur.
• TS2339: aşağıdaki kart.

#interface: aynı işin ikinci yolu

Obje şekli tanımlamanın ikinci yolu interface. esya.ts:

1interface Esya {2    ad: string3    fiyat: number4}5 6const kilic: Esya = { ad: "Uzun Kılıç", fiyat: 350 }7console.log(kilic.ad + " " + kilic.fiyat + " altın")

Uzun Kılıç 350 altın

Yazımdaki tek fark: interface Esya { … }, arada = yok. Obje şekli için ikisi aynı işi görür. Farkları şunlar:

Bu kursta type kullanacağız: hem objeler hem birleşimler için tek kalıp. Bazı ekipler obje şekillerinde interface'i tercih eder; iş ilanlarındaki projelerde ikisini de göreceksin, okuyabilmen yeter.

#İsteğe bağlı alan: ?

Her oyuncunun bir takımı yok. Bir alanın hiç olmayabileceğini, adından sonra soru işareti koyarak söylersin. oyuncu.ts:

1type Oyuncu = {2    kullaniciAdi: string3    rol: string4    takimAdi?: string5}6 7const arda: Oyuncu = { kullaniciAdi: "arda", rol: "orman", takimAdi: "Gece Kurtları" }8const deniz: Oyuncu = { kullaniciAdi: "deniz", rol: "orta" }9 10function kunye(o: Oyuncu): string {11    return o.kullaniciAdi + " [" + o.takimAdi.toLocaleUpperCase("tr") + "]"12}13 14console.log(kunye(arda))15console.log(kunye(deniz))

arda [GECE KURTLARI]file:///C:/kod/tipler/oyuncu.ts:11    return o.kullaniciAdi + " [" + o.takimAdi.toLocaleUpperCase("tr") + "]"                                              ^ TypeError: Cannot read properties of undefined (reading 'toLocaleUpperCase')    at kunye (file:///C:/kod/tipler/oyuncu.ts:11:47)    ... Node.js v24.20.0

deniz objesinde takimAdi hiç yok ve TypeScript buna itiraz etmedi, çünkü ? alanı isteğe bağlı yaptı. Ama kunye takım adının hep var olduğunu varsayıyor; Deniz'e gelince çöktü. Bu, ısınmadaki LEFT JOIN sorusunun kardeşi. tsc bunu çalıştırmadan söylerdi:

PS C:\kod\tipler> npx tsc --noEmitoyuncu.ts:11:36 - error TS18048: 'o.takimAdi' is possibly 'undefined'. 11     return o.kullaniciAdi + " [" + o.takimAdi.toLocaleUpperCase("tr") + "]"                                      ~~~~~~~~~~  Found 1 error in oyuncu.ts:11

kunye'yi yedek değerle düzelt ve sona bir satır ekle:

1type Oyuncu = {2    kullaniciAdi: string3    rol: string4    takimAdi?: string5}6 7const arda: Oyuncu = { kullaniciAdi: "arda", rol: "orman", takimAdi: "Gece Kurtları" }8const deniz: Oyuncu = { kullaniciAdi: "deniz", rol: "orta" }9 10function kunye(o: Oyuncu): string {11    const takim = o.takimAdi ?? "takımsız"12    return o.kullaniciAdi + " [" + takim.toLocaleUpperCase("tr") + "]"13}14 15console.log(kunye(arda))16console.log(kunye(deniz))17console.log(deniz)

arda [GECE KURTLARI]deniz [TAKIMSIZ]{ kullaniciAdi: 'deniz', rol: 'orta' }

Son satır isteğe bağlı alanın ne demek olduğunu gösteriyor: deniz objesinde takimAdi diye bir alan hiç yok. takim değişkenine tip yazmadık; ?? yüzünden hiçbir zaman undefined olamayacağını TypeScript kendisi çıkardı.

Isınmadaki ikinci soruyu hatırla: Ders 38'de takma ad tırnaksız yazıldığı için alanın adı kullaniciadi olmuştu ve kullaniciAdi'yi okuyan kod undefined almıştı. Aynı yanlış okumayı oyuncu.ts'nin 18. satırına yaz:

18console.log(deniz.kullaniciadi)

PS C:\kod\tipler> npx tsc --noEmitoyuncu.ts:18:19 - error TS2551: Property 'kullaniciadi' does not exist on type 'Oyuncu'. Did you mean 'kullaniciAdi'? 18 console.log(deniz.kullaniciadi)                     ~~~~~~~~~~~~   oyuncu.ts:2:5 - 'kullaniciAdi' is declared here.    2     kullaniciAdi: string          ~~~~~~~~~~~~  Found 1 error in oyuncu.ts:18

TS2339'un öneri getiren kardeşi TS2551: ad, tanımlı bir alana çok benzediği için "kullaniciAdi'yi mi demek istedin?" diye soruyor. Satırı sil.

#Dizi ve obje tipleri

Bir dizinin tipi, elemanlarının tipi ve arkasında köşeli parantezdir: string[] "metinlerden oluşan dizi", Sampiyon[] "Sampiyon objelerinden oluşan dizi". takim.ts:

1type Sampiyon = {2    isim: string3    hp: number4    koridor: string5}6 7const takim: Sampiyon[] = [8    { isim: "Garen", hp: 620, koridor: "ust" },9    { isim: "Ahri", hp: 0, koridor: "orta" },10    { isim: "Jinx", hp: 340, koridor: "alt" },11]12 13const isimler: string[] = takim.map((s) => s.isim)14const canlilar = takim.filter((s) => s.hp > 0)15 16console.log(isimler)17console.log(canlilar.length + " şampiyon ayakta")

[ 'Garen', 'Ahri', 'Jinx' ]2 şampiyon ayakta

• const takim: Sampiyon[]: dizinin her elemanı şekle uymalı. Birinde alan eksik ya da fazlaysa az önceki hataları alırsın.
• map((s) => s.isim) ve filter((s) => s.hp > 0): s'ye tip yazmadık ve TS7006 da almadık. TypeScript takim'ın Sampiyon[] olduğunu bildiği için, geri çağırma fonksiyonunun (Ders 10) parametresinin Sampiyon olduğunu çıkarır.
• canlilar'a da tip yazmadık: filter diziyi aynı tipte bıraktığı için o da Sampiyon[].
• string[] yerine Array<string> yazıldığını da görürsün; ikisi aynı şey.

find (Ders 11) aradığını bulamazsa undefined döndürür ve TypeScript bunu bilir. takim.ts'nin sonuna, bir satır boşluk bırakıp ekle:

19const lux = takim.find((s) => s.isim === "Lux")20console.log(lux.hp)

PS C:\kod\tipler> npx tsc --noEmittakim.ts:20:13 - error TS18048: 'lux' is possibly 'undefined'. 20 console.log(lux.hp)               ~~~  Found 1 error in takim.ts:20

lux'ın tipi Sampiyon | undefined: "ya bir şampiyon ya da hiçbir şey" (| işaretini birazdan ayrıntılı göreceksin). Takımda Lux yok; Node bu satırda TypeError: Cannot read properties of undefined (reading 'hp') ile dururdu. TS18048'in en sık geldiği yer burasıdır. Bulamama ihtimalini ele al:

19const lux = takim.find((s) => s.isim === "Lux")20if (lux) {21    console.log(lux.hp)22} else {23    console.log("Lux takımda yok")24}

Artık tsc susar ve son çıktı satırı Lux takımda yok olur. if bloğunun içinde lux'ın undefined olamayacağını TypeScript biliyor; bunun adını birazdan koyacağız.

#İç içe şekiller

Bir alanın tipi başka bir tip, hatta bir dizi olabilir; Ders 4'teki iç içe objeler gibi. envanter.ts:

1type Esya = {2    ad: string3    fiyat: number4}5 6type Sampiyon = {7    isim: string8    esyalar: Esya[]9    konum: { x: number; y: number }10}11 12const garen: Sampiyon = {13    isim: "Garen",14    esyalar: [15        { ad: "Uzun Kılıç", fiyat: 350 },16        { ad: "Kalkan", fiyat: 450 },17    ],18    konum: { x: 120, y: 80 },19}20 21const toplam = garen.esyalar.reduce((t, e) => t + e.fiyat, 0)22console.log(garen.isim + " envanteri: " + toplam + " altın")23console.log("Konum:", garen.konum.x, garen.konum.y)

Garen envanteri: 800 altınKonum: 120 80

• esyalar: Esya[]: Esya objelerinden bir dizi. Tipler birbirinin içinde kullanılır; Esya'yı başka tiplerde de kullanabilirsin.
• konum: { x: number; y: number }: yalnız burada gereken küçük bir şekli ad vermeden, alanın içine yazdık. Tek satırda olduğu için alanlar ; ile ayrıldı.
• reduce((t, e) => t + e.fiyat, 0) (Ders 11): t'nin tipi başlangıç değeri 0'dan, e'ninki diziden çıkarıldı.
• Bu dosyadaki Sampiyon, sampiyon.ts'dekinden farklı bir tip. Her dosya kendi tiplerini tanımlar; bir dosyadaki tipi başka dosyada kullanmak da mümkün, ilerideki derslerde göreceksin.

#Birleşim tipleri ve daraltma

koridor: string her metni kabul eder: "orta"'yı da, "Orta"'yı da, "mid"'i de, yazım hatalı "ortaa"'yı da. Bir alan yalnız belli değerleri alabiliyorsa onları tek tek sayarsın. koridor.ts:

1type Koridor = "ust" | "orta" | "alt" | "orman" | "destek"2 3type Sampiyon = {4    isim: string5    koridor: Koridor6}7 8const ahri: Sampiyon = { isim: "Ahri", koridor: "mid" }9console.log(ahri)

{ isim: 'Ahri', koridor: 'mid' }

PS C:\kod\tipler> npx tsc --noEmitkoridor.ts:8:40 - error TS2322: Type '"mid"' is not assignable to type 'Koridor'. 8 const ahri: Sampiyon = { isim: "Ahri", koridor: "mid" }                                         ~~~~~~~   koridor.ts:5:5 - The expected type comes from property 'koridor' which is declared here on type 'Sampiyon'    5     koridor: Koridor          ~~~~~~~  Found 1 error in koridor.ts:8

| işaretini "ya da" diye oku: Koridor, "ust ya da orta ya da alt ya da orman ya da destek". Her seçenek tek bir değerden oluşan bir tip: "orta" tipi yalnız "orta" metnini kabul eder.

Mesaj yine TS2322; verilen tip tam o değer ('"mid"'), beklenen 'Koridor'. Ek satır beklentinin nereden geldiğini gösteriyor: Sampiyon'un koridor alanı. "mid"'i "orta" yap; tsc susar, çıktı { isim: 'Ahri', koridor: 'orta' } olur. VS Code'da koridor: " yazıp tırnağı açınca beş seçenek bir liste olarak çıkar: yazmana bile gerek kalmaz.

#Daraltma: hangisi olduğunu sor

Bir değer birkaç tipten biri olabiliyorsa, onu kullanmadan önce hangisi olduğunu sorman gerekir. Bir oyuncu kimliği adresten metin olarak (" 42 "), veritabanından sayı olarak (7) gelebiliyor diyelim. id.ts:

1function idCoz(id: string | number): number {2    return Number(id.trim())3}4 5console.log(idCoz(" 42 "))6console.log(idCoz(7))

42file:///C:/kod/tipler/id.ts:2    return Number(id.trim())                     ^ TypeError: id.trim is not a function    at idCoz (file:///C:/kod/tipler/id.ts:2:22)    ... Node.js v24.20.0

PS C:\kod\tipler> npx tsc --noEmitid.ts:2:22 - error TS2339: Property 'trim' does not exist on type 'string | number'.  Property 'trim' does not exist on type 'number'. 2     return Number(id.trim())                       ~~~~  Found 1 error in id.ts:2

Metin için çalıştı, sayı gelince çöktü: sayıların trim metodu yok. tsc'nin mesajı iki satır: "string | number tipinde trim yok"; girintili alt satır da sebebini söylüyor: "çünkü number'da yok". Birleşimdeki her tip için geçerli olmayan bir şeyi kullanamazsın. Önce sor:

1function idCoz(id: string | number): number {2    if (typeof id === "string") {3        return Number(id.trim())4    }5    return id6}7 8console.log(idCoz(" 42 "))9console.log(idCoz(7))

427

typeof id === "string" (Ders 23) çalışırken değerin türünü sorar. TypeScript bu soruyu okur ve if bloğunun içinde id'yi yalnız string sayar; orada trim serbest.

Blok return ile biter (erken çıkış); demek ki aşağı inildiyse değer metin değildir: son satırda id artık number. Bu işe daraltma denir. takim.ts'deki if (lux) de bir daraltmaydı: blokta lux artık undefined olamaz.

#in ile daraltma

İki farklı şekilde obje gelebiliyorsa typeof işe yaramaz: ikisi için de "object" der. Bu kez hangi alanın olduğuna bakarsın. JavaScript'in in işareti "bu objede bu adda bir alan var mı?" diye sorar:

const teemo = { isim: "Teemo", hp: 80 }console.log("isim" in teemo)console.log("tur" in teemo)

truefalse

Ders 5'teki for...in ile karıştırma: burada in bir döngü değil, bir soru. Bir hedef ya şampiyon ya da minyon olabiliyor. hedef.ts:

1type Sampiyon = {2    isim: string3    hp: number4}5 6type Minyon = {7    tur: string8    hp: number9}10 11function hedefAdi(hedef: Sampiyon | Minyon): string {12    if ("isim" in hedef) {13        return hedef.isim14    }15    return hedef.tur + " minyonu"16}17 18console.log(hedefAdi({ isim: "Teemo", hp: 80 }))19console.log(hedefAdi({ tur: "Kuşatma", hp: 300 }))

TeemoKuşatma minyonu

"isim" in hedef doğruysa TypeScript bloğun içinde hedef'i Sampiyon sayar, çünkü isim alanı yalnız onda var. Bloğun altında kalan tek seçenek Minyon.

#Ayırt edici alan

En kullanışlı daraltma, bir alanın değerine bakmaktır. Bir maçta olan olayları tek bir dizide tutmak istiyorsun, ama her olay türünün alanları farklı. Her şekle, türünü söyleyen ortak bir tur alanı koy. olay.ts:

1type Olay =2    | { tur: "oldurme"; oldUren: string; olen: string }3    | { tur: "ejderha"; takim: "mavi" | "kirmizi" }4    | { tur: "kule"; koridor: string }5 6function olayYaz(olay: Olay): string {7    if (olay.tur === "oldurme") {8        return olay.oldUren + ", " + olay.olen + " adlı rakibi indirdi"9    } else if (olay.tur === "ejderha") {10        return olay.takim + " takım ejderhayı aldı"11    } else {12        return olay.koridor + " koridorunda kule yıkıldı"13    }14}15 16const mac: Olay[] = [17    { tur: "oldurme", oldUren: "Jinx", olen: "Garen" },18    { tur: "ejderha", takim: "mavi" },19    { tur: "kule", koridor: "alt" },20]21 22for (const olay of mac) {23    console.log(olayYaz(olay))24}

Jinx, Garen adlı rakibi indirdimavi takım ejderhayı aldıalt koridorunda kule yıkıldı

• type Olay = | {…} | {…} | {…}: üç şeklin birleşimi. Baştaki | yalnız hizalama içindir; okumayı kolaylaştırır.
• Her şekilde tur var ve her birinde değeri farklı bir sabit değer tipi. olay.tur === "oldurme" dediğin an TypeScript hangi şekilde olduğunu bilir: o blokta oldUren ve olen kullanılabilir, takim kullanılamaz.
• Son durumu else if (olay.tur === "kule") değil, düz else ile yazdık: ilk iki koşul tutmadıysa geriye kule kalır ve TypeScript bunu bilir. else if yazsaydın TS2366 alırdın ("üç koşul da tutmazsa ne döner?"); TypeScript if zincirlerinde bütün seçenekleri saydığını kendiliğinden anlamaz.

Asıl kazanç, kodu sonradan değiştirirken gelir. Oyuna Baron olayını ekle (5. satır) ve dosyanın sonunda yalnız bir Baron olayı yazdır:

1type Olay =2    | { tur: "oldurme"; oldUren: string; olen: string }3    | { tur: "ejderha"; takim: "mavi" | "kirmizi" }4    | { tur: "kule"; koridor: string }5    | { tur: "baron"; takim: "mavi" | "kirmizi" }6 7function olayYaz(olay: Olay): string {8    if (olay.tur === "oldurme") {9        return olay.oldUren + ", " + olay.olen + " adlı rakibi indirdi"10    } else if (olay.tur === "ejderha") {11        return olay.takim + " takım ejderhayı aldı"12    } else {13        return olay.koridor + " koridorunda kule yıkıldı"14    }15}16 17console.log(olayYaz({ tur: "baron", takim: "kirmizi" }))

undefined koridorunda kule yıkıldı

PS C:\kod\tipler> npx tsc --noEmitolay.ts:13:21 - error TS2339: Property 'koridor' does not exist on type '{ tur: "kule"; koridor: string; } | { tur: "baron"; takim: "kirmizi" | "mavi"; }'.  Property 'koridor' does not exist on type '{ tur: "baron"; takim: "kirmizi" | "mavi"; }'. 13         return olay.koridor + " koridorunda kule yıkıldı"                       ~~~~~~~  Found 1 error in olay.ts:13

Node sessizce saçma bir cümle kurdu. tsc ise else dalına artık iki şeklin düşebileceğini fark etti, kule ve baron; ikincisinde koridor yok. Gerçek bir projede olayYaz gibi onlarca fonksiyon olur; yeni bir olay türü eklediğinde güncellemeyi unuttuğun her yeri tsc tek tek listeler. Baron için bir dal ekle:

12    } else if (olay.tur === "baron") {13        return olay.takim + " takım Baron'u kesti"14    } else {15        return olay.koridor + " koridorunda kule yıkıldı"16    }

tsc susar, çıktı kirmizi takım Baron'u kesti olur.

#any neden kötü, unknown neden iyi

Şimdiye kadar her değerin tipini ya sen söyledin ya TypeScript çıkardı. Bazı değerler ise programın dışından gelir: bir dosyadan, bir API'den, bir formdan. TypeScript onlar için iki özel tip sunar. veri.ts:

1const metin = '{"isim": "Teemo", "hp": 80}'2const veri = JSON.parse(metin)3 4console.log(veri.isim)5console.log(veri.hpp.toFixed(1))

Teemofile:///C:/kod/tipler/veri.ts:5console.log(veri.hpp.toFixed(1))                     ^ TypeError: Cannot read properties of undefined (reading 'toFixed')    at file:///C:/kod/tipler/veri.ts:5:22    ... Node.js v24.20.0

JSON metni çift tırnak içerdiği için dıştaki tırnaklar tek (Ders 13'teki gibi). 5. satırda hp yerine hpp yazılmış ve program çöktü. Asıl sorun şu: npx tsc --noEmit bu dosya için hiçbir şey yazmaz. Fareyi veri'nin üstüne getir: const veri: any.

any üç sebeple kötüdür:

• Denetimi kapatır. veri.hpp.toFixed gibi bir yazım hatası bile geçer; tip denetiminin bütün faydası o değer için biter.
• Bulaşır. const hp = veri.hp yazarsan hp de any olur; onu döndüren fonksiyonun sonucu da. Tek bir any kodun içinde yayılır.
• Sessizdir. TS7006 gibi bir uyarı vermez; aramazsan any olduğunu fark etmezsin.

Kural basit: kendi kodunda any yazma. Bir değerin tipini bilmiyorsan unknown yaz. veri.ts'yi şöyle değiştir:

1const metin = '{"isim": "Teemo", "hp": 80}'2const veri: unknown = JSON.parse(metin)3 4console.log(veri.isim)

Teemo

PS C:\kod\tipler> npx tsc --noEmitveri.ts:4:13 - error TS18046: 'veri' is of type 'unknown'. 4 console.log(veri.isim)              ~~~~  Found 1 error in veri.ts:4

Node için hiçbir şey değişmedi, yine Teemo yazdı. TypeScript ise artık temkinli: "veri bilinmeyen tipte". İçini kullanmadan önce ne olduğunu kanıtlamanı istiyor.

Kanıt, daraltmanın ta kendisi. veri.ts'yi son kez değiştir; bu kez gelen veriyi denetleyip temiz bir Sampiyon'a çeviren bir fonksiyon yazıyorsun:

1type Sampiyon = {2    isim: string3    hp: number4}5 6function sampiyonOku(veri: unknown): Sampiyon | null {7    if (typeof veri !== "object" || veri === null) {8        return null9    }10    if (!("isim" in veri) || typeof veri.isim !== "string") {11        return null12    }13    if (!("hp" in veri) || typeof veri.hp !== "number") {14        return null15    }16    return { isim: veri.isim, hp: veri.hp }17}18 19console.log(sampiyonOku(JSON.parse('{"isim": "Teemo", "hp": 80}')))20console.log(sampiyonOku(JSON.parse('{"isim": "Teemo", "hpp": 80}')))21console.log(sampiyonOku(JSON.parse('{"isim": "Teemo", "hp": "80"}')))22console.log(sampiyonOku(JSON.parse("null")))

{ isim: 'Teemo', hp: 80 }nullnullnull

• typeof veri !== "object" || veri === null: önce, bu bir obje mi? null'a ayrıca bakıyoruz, çünkü JavaScript'in eski bir kusuru yüzünden typeof null da "object" verir.
• !("isim" in veri) || typeof veri.isim !== "string": isim alanı var mı, varsa metin mi? in denetiminden sonra TypeScript veri.isim'i okumana izin verir, ama tipi hâlâ unknown'dır; metin olduğunu typeof ile ayrıca kanıtlarız.
• Üç denetimden geçen veriden yeni ve temiz bir Sampiyon kurulur. Fazladan alanlar dışarıda kalır.
• Dört deneme: doğru veri, yanlış ad (hpp), metin olarak gelen sayı ("80", Ders 38'deki "2" gibi) ve null. Yalnız ilki geçti.

Uzun görünüyor, öyle. Gerçek projelerde bu denetimleri zod gibi kütüphanelerle kısaltırsın (Ders 44). Fikir aynı kalır: dışarıdan gelen veri unknown'dır ve denetimden geçmeden içeri girmez.

#Node'da .ts çalıştırmak ve tsc ile denetlemek

Dersin başından beri iki komut kullanıyorsun: node çalıştırıyor, tsc denetliyor. Neden Node ikisini birden yapmıyor? Çünkü Node TypeScript'i çalıştırırken tipleri okumaz bile: siler.

Node .ts dosyasını açınca tip notlarını bulur ve her birinin yerine aynı uzunlukta boşluk koyar. Geriye düz JavaScript kalır ve o çalışır. Boşlukla değiştirmenin güzel bir yanı var: satır ve sütunlar kaymaz. Bu dersteki çalışma zamanı hatalarında oyuncu.ts:11:47 gibi yerlerin senin dosyandaki yerlerle birebir tuttuğunu gördün.

Bundan çıkan üç sonuç:

• Node tipleri denetlemez. hp = "yetmiş" satırını gördün: Node çalıştırdı. Denetim tsc'nin işi.
• Node tsconfig.json'ı okumaz. O dosya yalnız tsc ve VS Code içindir.
• Node silinemeyen sözdizimini çalıştırmaz. Silindiğinde yerine JavaScript kodu yazılması gereken birkaç TypeScript özelliği var; en bilineni enum.

1enum Koridor {2    Ust,3    Orta,4    Alt,5}6 7console.log(Koridor.Orta)

PS C:\kod\tipler> node koridor-enum.tsnode:internal/modules/run_main:107    triggerUncaughtException(    ^ file:///C:/kod/tipler/koridor-enum.ts:1  > enum Koridor {        Ust,        Orta,        Alt,  > } SyntaxError [ERR_UNSUPPORTED_TYPESCRIPT_SYNTAX]: TypeScript enum is not supported in strip-only mode    at parseTypeScript (node:internal/modules/typescript:68:40)    ...    at ModuleLoader.getOrCreateModuleJob (node:internal/modules/esm/loader:617:12) {  code: 'ERR_UNSUPPORTED_TYPESCRIPT_SYNTAX'} Node.js v24.20.0

1{2    "compilerOptions": {3        "target": "esnext",4        "module": "nodenext",5        "types": ["node"],6        "strict": true,7        "erasableSyntaxOnly": true,8        "noEmit": true,9        "skipLibCheck": true10    }11}

PS C:\kod\tipler> npx tsc --noEmitkoridor-enum.ts:1:6 - error TS1294: This syntax is not allowed when 'erasableSyntaxOnly' is enabled. 1 enum Koridor {       ~~~~~~~  Found 1 error in koridor-enum.ts:1

#Günlük iş akışı

• Yazarken: VS Code açık dosyayı anında denetler. Kırmızı çizgiyi gördüğün an düzelt.
• Çalıştırmadan önce: npx tsc --noEmit bütün projeyi denetler. Sessizse temiz.
• Çalıştırırken: node dosya.ts.
• İstersen: npx tsc --noEmit --watch ile tsc'yi ikinci bir terminalde açık bırak; her kayıtta yeniden denetler. Ctrl+C ile durur.

VS Code kendi içinde bir TypeScript sürümü taşır: editördeki kırmızı çizgiler onun, terminaldeki denetim projendeki sürümün. Nadiren farklı sonuç verebilirler. İkisi çelişirse npx tsc --noEmit'e güven; ekip arkadaşların ve sunucular da onu çalıştırır.

#Tip hata mesajlarını okumak

Bu derste on kadar farklı tip hatası gördün. Hepsi aynı kalıpla yazılır; kalıbı bir kez çözersen yenilerini de okursun.

Mesajların gövdesi birkaç kalıptan birine uyar. İçinde iki tip geçiyorsa sıraları hep aynıdır: önce senin verdiğin, sonra oranın beklediği.

• Type A is not assignable to type B: A senin verdiğin, B oranın beklediği tip (TS2322).
• Argument of type A is not assignable to parameter of type B: aynısı, bu kez fonksiyon çağrısında (TS2345).
• Property x does not exist on type T: T tipinde x diye bir alan yok (TS2339; benzer bir ad varsa öneriyle birlikte TS2551).
• Parameter x implicitly has an 'any' type: x'e tip yazılmamış (TS7006).
• 'x' is possibly 'undefined': önce denetle (TS18048; null için TS18047).

#Zincirleme mesajlar

Tipler iç içe olunca mesaj birkaç satıra yayılır. Bir formdan gelen şampiyonu takıma eklemeye çalış, form.ts:

1type Sampiyon = {2    isim: string3    hp: number4    koridor: string5}6 7const takim: Sampiyon[] = []8 9const formdanGelen = { isim: "Lux", hp: "90", koridor: "orta" }10takim.push(formdanGelen)11console.log(takim)

PS C:\kod\tipler> npx tsc --noEmitform.ts:10:12 - error TS2345: Argument of type '{ isim: string; hp: string; koridor: string; }' is not assignable to parameter of type 'Sampiyon'.  Types of property 'hp' are incompatible.    Type 'string' is not assignable to type 'number'. 10 takim.push(formdanGelen)              ~~~~~~~~~~~~  Found 1 error in form.ts:10

İlk satır genel resmi verir: "bu obje Sampiyon parametresine verilemez". Her girintili satır bir adım daha yaklaşır: "hp alanlarının tipleri uyuşmuyor", sonra "metin, sayıya atanamaz". En içteki satır asıl sebeptir. Uzun bir mesajda kaybolursan en alttaki girintili satırdan başla.

Burada çare, formdan gelen değeri sayıya çevirmek: 10. satırı takim.push({ ...formdanGelen, hp: Number(formdanGelen.hp) }) yap (Ders 12'deki yayma). tsc susar, çıktı [ { isim: 'Lux', hp: 90, koridor: 'orta' } ] olur.

#Ek satırlar ve özet tablosu

Boşlukla girintili gelen ek bilgiler ('gold' is declared here., The expected type comes from property 'koridor'…) hatanın değil, beklentinin nerede tanımlandığını gösterir: "bu alan zorunlu, çünkü şurada böyle yazıyor". Bazen asıl düzeltilecek yer orasıdır: belki değer değil, tip yanlıştır.

Birden çok dosyada hata varsa tsc mesajların sonuna küçük bir tablo ekler. hasar.ts'de tipsiz parametreler ve oyuncu.ts'de denetlenmemiş takım adı aynı anda dursaydı:

PS C:\kod\tipler> npx tsc --noEmit...Found 3 errors in 2 files. Errors  Files     2  hasar.ts:5     1  oyuncu.ts:11

Node bir çalıştırmada yalnız ilk hatayı söylüyordu; tsc hepsini birden listeler. Yine de en üsttekinden başla: bir hata çoğu zaman altındakilere de yol açar.

#Sık hatalar

Tip hatalarının kartlarını bölümlerin içinde gördün. Bunlar araçla ilgili olanlar.

PS C:\kod\tipler> tsc --noEmittsc : The term 'tsc' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of the name, or if a path was included, verify that the path is correct and try again.At line:1 char:1+ tsc --noEmit+ ~~~    + CategoryInfo          : ObjectNotFound: (tsc:String) [], CommandNotFoundException    + FullyQualifiedErrorId : CommandNotFoundException

PS C:\kod> npx tsc --noEmitNeed to install the following packages:tsc@2.0.4Ok to proceed? (y)

                 This is not the tsc command you are looking for To get access to the TypeScript compiler, tsc, from the command line either: - Use npm install typescript to first add TypeScript to your project before using npx- Use yarn to avoid accidentally running code from un-installed packages

PS C:\kod\tipler> npx tsc --noEmitVersion 7.0.2tsc: The TypeScript Compiler - Version 7.0.2 COMMON COMMANDS   tsc  Compiles the current project (tsconfig.json in the working directory.)...

PS C:\kod\tipler> npx tsc --noEmit hasar.tserror TS5112: tsconfig.json is present but will not be loaded if files are specified on commandline. Use '--ignoreConfig' to skip this error.

1const oyuncu = process.argv[2] ?? "misafir"2console.log("Merhaba " + oyuncu)

PS C:\kod\tipler> npx tsc --noEmitselam.ts:1:16 - error TS2591: Cannot find name 'process'. Do you need to install type definitions for node? Try `npm i --save-dev @types/node` and then add 'node' to the types field in your tsconfig. 1 const oyuncu = process.argv[2] ?? "misafir"                 ~~~~~~~  Found 1 error in selam.ts:1

#Görevler

Görevleri C:\kod\tipler klasöründe, her birini kendi dosyasında yap. Her görevde iki denetim var: npx tsc --noEmit sessiz kalmalı, node dosya.ts beklenen çıktıyı vermeli. Önce kendin dene, takılırsan ipuçlarını sırayla aç.

Annie 4Annie 12Annie 36Annie 0Annie 0

1function kopyaSayisi(yildiz: number): number {2    if (yildiz === 1) {3        return 14    } else if (yildiz === 2) {5        return 36    } else if (yildiz === 3) {7        return 98    }9    return 010}11 12function satisDegeri(maliyet: number, yildiz: number): number {13    return maliyet * kopyaSayisi(yildiz)14}15 16const birim = "Annie"17const maliyet = 418 19console.log(birim, satisDegeri(maliyet, 1))20console.log(birim, satisDegeri(maliyet, 2))21console.log(birim, satisDegeri(maliyet, 3))22console.log(birim, satisDegeri(maliyet, 0))23console.log(birim, satisDegeri(maliyet, 4))

Annie 4Annie 12Annie 36Annie 0Annie 0

PS C:\kod\tipler> npx tsc --noEmitbirim.ts:24:28 - error TS2345: Argument of type 'string' is not assignable to parameter of type 'number'. 24 console.log(satisDegeri(4, "3"))                              ~~~  Found 1 error in birim.ts:24

1type Buyu = {2    ad: string3    bekleme: number4}5 6const sicrama: Buyu = { ad: "Sıçrama", bekleme: "300" }7const tutusturma: Buyu = { ad: "Tutuşturma", bekleme: 180 }8 9function hazirMi(buyu: Buyu, gecenSure) {10    return gecenSure >= buyu.sure11}12 13console.log(hazirMi(sicrama, 120))14console.log(hazirMi(tutusturma, 200))

falsefalse

PS C:\kod\tipler> npx tsc --noEmitbuyu.ts:6:40 - error TS2322: Type 'string' is not assignable to type 'number'. 6 const sicrama: Buyu = { ad: "Sıçrama", bekleme: "300" }                                         ~~~~~~~   buyu.ts:3:5 - The expected type comes from property 'bekleme' which is declared here on type 'Buyu'    3     bekleme: number          ~~~~~~~ buyu.ts:9:30 - error TS7006: Parameter 'gecenSure' implicitly has an 'any' type. 9 function hazirMi(buyu: Buyu, gecenSure) {                               ~~~~~~~~~ buyu.ts:10:30 - error TS2339: Property 'sure' does not exist on type 'Buyu'. 10     return gecenSure >= buyu.sure                                ~~~~  Found 3 errors in the same file, starting at: buyu.ts:6

falsetruetrue

1type Buyu = {2    ad: string3    bekleme: number4}5 6const sicrama: Buyu = { ad: "Sıçrama", bekleme: 300 }7const tutusturma: Buyu = { ad: "Tutuşturma", bekleme: 180 }8 9function hazirMi(buyu: Buyu, gecenSure: number): boolean {10    return gecenSure >= buyu.bekleme11}12 13console.log(hazirMi(sicrama, 120))14console.log(hazirMi(tutusturma, 200))15console.log(hazirMi(tutusturma, 180))

falsetruetrue

Jinx: KDA 8.00, 0.25 kill/dkLux: KDA Kusursuz, süre bilinmiyorGaren: KDA 0.80, süre bilinmiyor

1interface MacKaydi {2    sampiyon: string3    kill: number4    olum: number5    asist: number6    dakika?: number7}8 9function kda(mac: MacKaydi): string {10    if (mac.olum === 0) {11        return "Kusursuz"12    }13    return ((mac.kill + mac.asist) / mac.olum).toFixed(2)14}15 16function killHizi(mac: MacKaydi): string {17    if (!mac.dakika) {18        return "süre bilinmiyor"19    }20    return (mac.kill / mac.dakika).toFixed(2) + " kill/dk"21}22 23const maclar: MacKaydi[] = [24    { sampiyon: "Jinx", kill: 7, olum: 2, asist: 9, dakika: 28 },25    { sampiyon: "Lux", kill: 10, olum: 0, asist: 6 },26    { sampiyon: "Garen", kill: 3, olum: 5, asist: 1, dakika: 0 },27]28 29for (const mac of maclar) {30    console.log(`${mac.sampiyon}: KDA ${kda(mac)}, ${killHizi(mac)}`)31}

Jinx: KDA 8.00, 0.25 kill/dkLux: KDA Kusursuz, süre bilinmiyorGaren: KDA 0.80, süre bilinmiyor

3 altın2 yıldızlı Annieeşya: Uzun Kılıç5 altınToplam altın: 8Boş ganimet: 0Altınsız: 0

1type Odul =2    | { tur: "altin"; miktar: number }3    | { tur: "birim"; ad: string; yildiz: 1 | 2 | 3 }4    | { tur: "esya"; ad: string }5 6function odulYaz(odul: Odul): string {7    if (odul.tur === "altin") {8        return `${odul.miktar} altın`9    } else if (odul.tur === "birim") {10        return `${odul.yildiz} yıldızlı ${odul.ad}`11    } else {12        return `eşya: ${odul.ad}`13    }14}15 16function toplamAltin(oduller: Odul[]): number {17    let toplam = 018    for (const odul of oduller) {19        if (odul.tur === "altin") {20            toplam = toplam + odul.miktar21        }22    }23    return toplam24}25 26const ganimet: Odul[] = [27    { tur: "altin", miktar: 3 },28    { tur: "birim", ad: "Annie", yildiz: 2 },29    { tur: "esya", ad: "Uzun Kılıç" },30    { tur: "altin", miktar: 5 },31]32 33for (const odul of ganimet) {34    console.log(odulYaz(odul))35}36console.log("Toplam altın:", toplamAltin(ganimet))37console.log("Boş ganimet:", toplamAltin([]))38console.log("Altınsız:", toplamAltin([{ tur: "esya", ad: "Kalkan" }]))

3 altın2 yıldızlı Annieeşya: Uzun Kılıç5 altınToplam altın: 8Boş ganimet: 0Altınsız: 0

PS C:\kod\tipler> npx tsc --noEmitodul.ts:40:24 - error TS2820: Type '"altın"' is not assignable to type '"altin" | "birim" | "esya"'. Did you mean '"altin"'? 40 const bozuk1: Odul = { tur: "altın", miktar: 5 }                          ~~~   odul.ts:2:9 - The expected type comes from property 'tur' which is declared here on type 'Odul'    2     | { tur: "altin"; miktar: number }              ~~~ odul.ts:41:51 - error TS2322: Type '4' is not assignable to type '1 | 2 | 3'. 41 const bozuk2: Odul = { tur: "birim", ad: "Annie", yildiz: 4 }                                                     ~~~~~~  Found 2 errors in the same file, starting at: odul.ts:40

const kayit = '[{"oyuncu": "Deniz", "puan": 1200}, {"oyuncu": "Arda", "puan": "900"}, null, {"oyuncu": "Ece", "puan": 0, "rozet": "altın"}, 42]' console.log(skorlariOku(kayit))console.log(skorlariOku("[]"))console.log(skorlariOku('{"oyuncu": "Deniz", "puan": 1200}'))console.log(skorlariOku("bozuk"))

[ { oyuncu: 'Deniz', puan: 1200 }, { oyuncu: 'Ece', puan: 0 } ][][][]

1type Skor = {2    oyuncu: string3    puan: number4}5 6function skorOku(oge: unknown): Skor | null {7    if (typeof oge !== "object" || oge === null) {8        return null9    }10    if (!("oyuncu" in oge) || typeof oge.oyuncu !== "string") {11        return null12    }13    if (!("puan" in oge) || typeof oge.puan !== "number") {14        return null15    }16    return { oyuncu: oge.oyuncu, puan: oge.puan }17}18 19function skorlariOku(metin: string): Skor[] {20    let veri: unknown21    try {22        veri = JSON.parse(metin)23    } catch (hata) {24        return []25    }26    if (!Array.isArray(veri)) {27        return []28    }29    const skorlar: Skor[] = []30    for (const oge of veri) {31        const skor = skorOku(oge)32        if (skor !== null) {33            skorlar.push(skor)34        }35    }36    return skorlar37}38 39const kayit = '[{"oyuncu": "Deniz", "puan": 1200}, {"oyuncu": "Arda", "puan": "900"}, null, {"oyuncu": "Ece", "puan": 0, "rozet": "altın"}, 42]'40 41console.log(skorlariOku(kayit))42console.log(skorlariOku("[]"))43console.log(skorlariOku('{"oyuncu": "Deniz", "puan": 1200}'))44console.log(skorlariOku("bozuk"))

[ { oyuncu: 'Deniz', puan: 1200 }, { oyuncu: 'Ece', puan: 0 } ][][][]

#Kendini sına

let altin = 300const koridor = "orta"let canli = trueconst takim = ["Ahri", "Lux"]

function kalanMana(mana: number, bedel: number): number {    return mana - bedel} console.log(kalanMana(100, "30"))

kritik.ts:9:7 - error TS2345: Argument of type 'number' is not assignable to parameter of type 'string'. 9 duyur(90)        ~~

type Sampiyon = { isim: string; hp: number }type Minyon = { tur: string; hp: number } function hedefAdi(hedef: Sampiyon | Minyon): string {    if ("isim" in hedef) {        return hedef.isim    }    return hedef.tur + " minyonu"}

#Kayıt noktası

Commit'ten önce son bir denetim yap: npx tsc --noEmit sessiz kalmalı. Bilerek hatalı bıraktığın bir satır kaldıysa (örneğin form.ts'nin 10. satırı ya da takimsiz.ts'nin son satırı) bölümdeki düzeltmeyi uygula; görevlerde denemek için eklediğin satırları (birim.ts'deki satisDegeri(4, "3"), odul.ts'deki iki bozuk ödül) sil. Sonra klasörde .gitignore adlı bir dosya oluştur ve içine node_modules/ yaz (Ders 14); kurulu paketler Git'e girmez.

Sıradaki derste arayüze geçiyorsun: Vite ile bir React projesi açacak, JSX yazacak ve sayfayı küçük, yeniden kullanılabilir bileşenlere böleceksin.