PricingLoginStart free
Frontend Academy · Ders

TS Derleme ve tsconfig.json

TypeScript'i derlemek için tsc çalıştırın; derleyiciyi strict, target ve outDir gibi tsconfig.json seçenekleriyle yapılandırın.

4. ders / 413 adım

TS Derleme ve tsconfig.json, CoddyKit'te ücretsiz bir Frontend Academy dersidir. Bu, 4 dersinin 4. 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.

TypeScript Derleyicisini Yükleme

TypeScript'i geliştirme bağımlılığı olarak yükleyin. tsc CLI, TypeScript dosyalarını derler. Vite veya Next.js ile paketleyici derlemeyi yönetir — ancak tür denetimi için yine de TypeScript derleyicisi kullanılır.

npm install --save-dev typescript
npx tsc --version  # verify installation
npx tsc app.ts     # compile a single file

tsconfig.json Dosyasını Başlatma

Tüm seçenekleri yorum satırına alınmış ve makul varsayılanlara sahip bir tsconfig.json oluşturmak için npx tsc --init komutunu çalıştırın. Bu dosya, TypeScript derleyicisinin tek yapılandırma dosyasıdır.

npx tsc --init
# Creates tsconfig.json with ~100 commented-out options

tsconfig.json Yapısı

Ana bölümler şunlardır: compilerOptions (derleyici davranışı), include (derlenecek dosyalar) ve exclude (atlanacak dosyalar).

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "outDir": "./dist",
    "strict": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

Hedef — JavaScript Çıktı Sürümü

target, tsc'nin hangi JavaScript sürümünü çıktı olarak üreteceğini belirtir. Modern ortamlar için ES2022 veya ESNext kullanın. En yüksek uyumluluk için ES5 kullanılabilir (genellikle bunun yerine Babel tarafından yönetilir).

Modül — Modül Sistemi

module, çıktının modül biçimini denetler. Node.js için CommonJS kullanın. Paketleyiciler (Vite, webpack) için ESNext veya ES2022 kullanın. package.json içindeki modül türü ayarıyla modern Node.js için NodeNext kullanın.

Katılık — Katılık Bayrağı

"strict": true, katı denetimlerden oluşan bir kümeyi etkinleştirir: strictNullChecks, noImplicitAny, strictFunctionTypes ve daha fazlası. Yeni projelerde bunu her zaman etkinleştirin — en fazla hatayı yakalar.

{
  "compilerOptions": {
    "strict": true  // enables all strict checks
    // or individually:
    // "strictNullChecks": true,
    // "noImplicitAny": true
  }
}

strictNullChecks — Null Hatalarını Ortadan Kaldırma

strictNullChecks etkinleştirildiğinde null ve undefined, bir birleşime açıkça eklenmedikçe başka türlere atanamaz. Bu, null durumlarını ele almanızı zorunlu kılar.

// Without strictNullChecks:
const name: string = null; // allowed

// With strictNullChecks:
const name: string = null; // Error!
const name2: string | null = null; // OK

outDir ve rootDir

outDir, derlenmiş JS dosyalarının nereye yerleştirileceğini belirtir. rootDir, kaynak TypeScript dosyalarının kökünü belirler. Birlikte, kaynak yapısını dist/ altında yansıtırlar.

// src/utils.ts → dist/utils.js
{
  "compilerOptions": {
    "rootDir": "./src",
    "outDir": "./dist"
  }
}

Yollar — Modül Takma Adları

paths seçeneğiyle (ve baseUrl ile) yol takma adlarını yapılandırın. @/components/Button içeri aktarımını ../../components/Button yerine kullanmanıza olanak tanır.

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "@components/*": ["src/components/*"]
    }
  }
}

İzleme Kipi ve Yalnızca Tür Denetimi

tsc --watch, dosya değişikliklerinde yeniden derleme yapar. tsc --noEmit, dosya çıktısı oluşturmadan tür denetimi yapar — paketleyicinin işini tekrarlamadan türleri doğrulamak için CI'da kullanışlıdır.

# Type check only (no output):
npx tsc --noEmit

# Watch and recompile:
npx tsc --watch

tsconfig.json'ı Genişletme

Bir temel yapılandırmadan miras almak için extends kullanın. Paylaşılan temel yapılandırmalar (örneğin @tsconfig/strictest) topluluk tarafından kabul edilen en iyi uygulamaları sağlar.

// Install:
npm install -D @tsconfig/strictest

// tsconfig.json:
{
  "extends": "@tsconfig/strictest",
  "compilerOptions": {
    "outDir": "./dist"
  }
}

Kısa Kontrol

Hangi tsconfig seçeneği katı tür denetimlerinin tamamını etkinleştirir?

İnteraktif derste cevapla

Özet: tsconfig.json

tsc, TypeScript'i JavaScript'e derler. tsconfig.json; hedefi (çıktı ES sürümü), modülü (modül sistemi), outDir'ı, katılığı ve yolları denetler. strict: true en fazla hatayı yakalar. Yalnızca tür denetimi yapmak için CI'da --noEmit kullanın. En iyi uygulamalar için topluluk temel yapılandırmalarını genişletin.

Başlamak ücretsiz

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
Ücretsiz öğrenmeye başlaTüm kursu görüntüle

Sıkça Sorulan Sorular

“TS Derleme ve tsconfig.json” dersi ücretsiz mi?

Evet — “TS Derleme ve tsconfig.json” 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.

“TS Derleme ve tsconfig.json” dersinde ne öğreneceğim?

TypeScript'i derlemek için tsc çalıştırın; derleyiciyi strict, target ve outDir gibi tsconfig.json seçenekleriyle yapılandırın. 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 4. dersidir.

“TS Derleme ve tsconfig.json” 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. TypeScript Neden Kullanılır: Türler Derleme Zamanında Hataları Yakalar
  2. İlkel Türler, Birleşimler ve Tür Takma Adları
  3. Arayüzler ve Nesne Türleri
  4. TS Derleme ve tsconfig.json
← Frontend Academy Sayfasına Dön