Softonic

tsconfig.json Üretici

Adım 1 / 2
Sonuçlar

tsconfig.json yüzü aşkın derleyici seçeneği içerir ve her TypeScript eğitimi farklı bir kombinasyon gösterir. Bu üretici, çoğu proje için önemli olanlara odaklanır: target, module, moduleResolution, jsx, yaygın mantıksal bayraklar (strict, esModuleInterop, skipLibCheck ve arkadaşları) ve outDir/rootDir klasörleri. tsconfig.json önizlemesi her değişiklikte anında güncellenir; onu projenizin köküne kopyalayın ve çoğu hazır şablonun taşıdığı ölü seçenekler olmadan temiz bir yapılandırmaya kavuşun.

Yapılandırma nasıl oluşturulur

  1. 1

    target ve module'ü seçin

    tsc'nin üreteceği JavaScript sürümü (ES2015'ten ES2023'e ya da ESNext) ve modül sistemi (CommonJS, ES2015/ES2020/ES2022, ESNext, Node16, NodeNext).

  2. 2

    moduleResolution ve JSX'i belirleyin

    Vite/webpack projeleri için bundler, modern Node için node16/nodenext, eski kurulumlar için node ya da classic. Modern React için jsx değerini react-jsx yapın ya da anahtarın hiç yazılmaması için none bırakın.

  3. 3

    Bayrakları açıp kapatın

    strict, esModuleInterop, skipLibCheck, resolveJsonModule, allowJs, declaration, sourceMap ve forceConsistentCasingInFileNames basit onay kutuları olarak.

  4. 4

    Klasörleri belirleyin

    outDir ve rootDir, ./dist ve ./src olarak önceden doldurulur. include ve exclude sabittir: src/**/* artı node_modules ve dist.

  5. 5

    Üretilen tsconfig'i kopyalayın

    JSON önizlemesi anında güncellenir; tek tıklama kopyalar, proje kökünüze tsconfig.json olarak koymaya hazırdır.

Bu üreticinin yazdığı seçenekler

Seçenek Buradaki varsayılan Ne yapar
target ES2022 Üretilen kodun JavaScript sürümü. ES2022, güncel tarayıcılar ve Node için güvenlidir; daha eski bir target yalnızca eski ortamlar için gerekir.
module ESNext Çıktının modül sözdizimi. ESM kullanan Node projeleri için NodeNext/Node16, eski Node için CommonJS.
moduleResolution node İçe aktarmaların nasıl bulunacağı. Vite/webpack/esbuild ile bundler, modern Node ile node16/nodenext tercih edin; node (node10) eski davranıştır.
jsx yazılmaz Yalnızca bir mod seçtiğinizde yazılır. React 17+ için react-jsx, JSX’i bir paketleyici dönüştürüyorsa preserve.
strict true Tüm strict kontrol ailesini açar. Yeni projelerde açık bırakın.
esModuleInterop true CommonJS paketlerinden varsayılan içe aktarmaları düzeltir.
skipLibCheck true .d.ts dosyalarının tür denetimini atlar; derleme çok hızlanır, gerçek hataları nadiren gizler.
forceConsistentCasingInFileNames true Diskteki dosyayla büyük/küçük harfi uyuşmayan içe aktarmaları reddeder (macOS’tan Linux’a geçişteki klasik kırılma).
resolveJsonModule true import data from "./data.json" yazmanıza izin verir.
allowJs false Derlemeye .js dosyalarını da alır; taşınma sürecinde işe yarar.
declaration false .d.ts dosyaları üretir; bir kitaplık yayımlarken açın.
sourceMap false Hata ayıklama için .js.map dosyaları üretir.
outDir / rootDir ./dist / ./src Derlenen kodun gideceği yer ve kaynakların bulunduğu yer.
baseUrl "." Her zaman yazılır; böylece elle eklediğiniz bir paths bloğu proje kökünden çözülür.

Birebir varsayılan çıktı

Hiçbir ayara dokunmazsanız alacağınız dosya tam olarak budur:

{
    "compilerOptions": {
        "target": "ES2022",
        "module": "ESNext",
        "moduleResolution": "node",
        "strict": true,
        "esModuleInterop": true,
        "skipLibCheck": true,
        "forceConsistentCasingInFileNames": true,
        "resolveJsonModule": true,
        "allowJs": false,
        "declaration": false,
        "sourceMap": false,
        "outDir": "./dist",
        "rootDir": "./src",
        "baseUrl": "."
    },
    "include": [
        "src/**/*"
    ],
    "exclude": [
        "node_modules",
        "dist"
    ]
}

none dışında bir jsx modu seçerseniz compilerOptions içine bir "jsx" girdisi eklenir.

Strict modu gerçekte neleri açar

strict: true, tüm strict ailesini tek seferde açan bir şemsiye bayraktır; noImplicitAny, strictNullChecks, strictFunctionTypes, strictBindCallApply, strictPropertyInitialization, noImplicitThis, useUnknownInCatchVariables ve alwaysStrict bunlara dahildir. Yeni projeler hepsi açık başlamalıdır: katılığı sonradan eklemek sancılıdır.

Yaygın hatalar

  • ESM kullanan bir Node projesinde module: "CommonJS" ayarlamak. package.json dosyanızda "type": "module" varsa hem module hem moduleResolution için NodeNext kullanın.
  • tsc aracını paketleyici gibi kullanmak. O bir derleyici ve tür denetleyicisidir. Derlemeler için Vite/esbuild/SWC, tür kontrolü için tsc --noEmit kullanın.
  • Her şeyi derlemek. include listesi olmadan TypeScript gördüğü her .ts dosyasını alır. Üretilen yapılandırma her zaman include: ["src/**/*"] yazar ve node_modules ile dist klasörlerini dışlar; bu konuda güvendesiniz.
  • Yapılandırmanın sunduğundan fazlasına ihtiyaç duymak. Bu üretici bilerek minimal kalır. lib, paths, isolatedModules ya da noEmit gibi seçenekleri, temel dosya yerine oturduktan sonra elle eklemek kolaydır.

Sık Sorulan Sorular

Monorepo’lar ve çok paketli projeler için evet: ortak seçenekleri taşıyan tek bir temel dosya ve onu “extends” ile genişleten paketler. Tek projeli bir depo içinse üretilen gibi tek bir tsconfig.json daha basittir.

TypeScript 5.0’da Vite, webpack ya da esbuild ile derlenen projeler için tanıtıldı. node16/nodenext’in ESM dosya uzantısı kuralları olmadan, paketleyicilerin içe aktarmaları gerçekte nasıl çözdüğünü yansıtır. Doğrudan Node tarafından çalıştırılan kod için node16 ya da nodenext tercih edin.

Özel bir kontrol yok. Ancak üretilen dosya baseUrl değerini her zaman “.” yapar; hemen altına bir paths bloğu yapıştırabilirsiniz, örneğin “@/*”: [“src/*”], ve proje kökünden çözülür.

Genellikle hayır; bu üreticinin onu yazmamasının nedeni de bu: target, uyumlu kitaplık türleri kümesini kendiliğinden belirler. lib’i yalnızca özel durumlarda elle geçersiz kılın, örneğin bir Node projesinde DOM API’leri ya da WebWorker türleri gerekiyorsa.

Kayıt gerekmez ve hiçbir şey saklanmaz. Seçimleriniz yalnızca yapılandırma önizlemesini oluşturmak için kullanılır; adım adım görünümde sayfanın URL adresinde de taşınır, böylece bitmiş bir yapılandırmayı yer imlerine eklemek ya da paylaşmak kolaydır.

İlgili Araçlar

ASCII Tablosu Referansı

NUL, LF ve DEL dahil her kod için ondalık, onaltılık, sekizlik ve ikili değerlerle HTML sayısal karakter başvurusu gösterimini sunan tam ASCII tablosu.

HTML Karakter Referansı

HTML varlıklarının aranabilir listesi; adlandırılmış ve sayısal kodlarıyla birlikte özel karakter ve semboller için tek tıkla kopyalama.

Dosya Boyutu Dönüştürücü

Bayt, KB, MB, GB, TB ve ikili IEC birimleri (KiB, MiB, GiB, TiB) arasında, ondalık ve ikiliyi dilediğiniz gibi birleştirerek dönüşüm yapın.

CSS Fiyat Tablosu Oluşturucu

HTML + CSS ile tek bir fiyat kartı oluşturun: paket adı, fiyat ve marka vurgu rengi. Kodu açılış sayfanıza kopyalayın.

Klavye kısayolları başvurusu

macOS, Windows ve Linux’ta VS Code, Chrome ve GNU Readline kullanan Bash için belgelenmiş varsayılan kısayolları arayın.

Kodu görsele dönüştür

Kodu yapıştırın; tema, renkler, yazı boyutu, boşluk, başlık ve satır numaralarını ayarlayın, canvas önizlemesini kontrol edin ve PNG indirin. Sözdizimi vurgusu olmayan düz metin çizimi.

Araç diğer dillerde mevcuttur