Softonic

Generator tsconfig.json

Langkah 1 / 2
Hasil

tsconfig.json punya lebih dari seratus opsi compiler dan setiap tutorial TypeScript menampilkan kombinasi yang berbeda. Generator ini berfokus pada opsi yang penting untuk kebanyakan proyek: target, module, moduleResolution, jsx, flag boolean yang umum (strict, esModuleInterop, skipLibCheck, dan kawan-kawan), serta folder outDir/rootDir. Pratinjau tsconfig.json diperbarui langsung setiap kali opsi berubah; salin ke root proyek Anda dan Anda mendapat config bersih tanpa opsi mati yang biasa dibawa boilerplate.

Cara config dibangun

  1. 1

    Pilih target dan module

    Versi JavaScript yang dihasilkan tsc (ES2015 sampai ES2023, atau ESNext) dan sistem module (CommonJS, ES2015/ES2020/ES2022, ESNext, Node16, NodeNext).

  2. 2

    Tentukan moduleResolution dan JSX

    bundler untuk proyek Vite/webpack, node16/nodenext untuk Node modern, node atau classic untuk setup lawas. Set jsx ke react-jsx untuk React modern, atau biarkan none agar kuncinya tidak ditulis.

  3. 3

    Nyalakan atau matikan flag

    strict, esModuleInterop, skipLibCheck, resolveJsonModule, allowJs, declaration, sourceMap, dan forceConsistentCasingInFileNames sebagai kotak centang sederhana.

  4. 4

    Atur folder

    outDir dan rootDir, terisi awal ./dist dan ./src. include dan exclude tetap pada src/**/* plus node_modules dan dist.

  5. 5

    Salin tsconfig yang dihasilkan

    Pratinjau JSON diperbarui langsung; sekali klik menyalinnya, siap diletakkan di root proyek sebagai tsconfig.json.

Opsi yang ditulis generator ini

Opsi Default di sini Fungsinya
target ES2022 Versi JavaScript dari kode yang dihasilkan. ES2022 aman untuk browser dan Node saat ini; pilih target lebih lama hanya untuk lingkungan lawas.
module ESNext Sintaks module pada output. Pakai NodeNext/Node16 untuk proyek Node dengan ESM, CommonJS untuk Node lawas.
moduleResolution node Cara import ditemukan. Utamakan bundler dengan Vite/webpack/esbuild dan node16/nodenext dengan Node modern; node (node10) adalah perilaku lama.
jsx tidak ditulis Hanya ditulis saat Anda memilih mode. react-jsx untuk React 17+, preserve bila bundler yang mentransformasi JSX.
strict true Mengaktifkan seluruh keluarga pemeriksaan strict. Biarkan aktif untuk proyek baru.
esModuleInterop true Memperbaiki default import dari paket CommonJS.
skipLibCheck true Melewati pemeriksaan tipe file .d.ts; kompilasi jauh lebih cepat, jarang menyembunyikan bug nyata.
forceConsistentCasingInFileNames true Menolak import yang huruf besar-kecilnya beda dari file di disk (masalah klasik pindah dari macOS ke Linux).
resolveJsonModule true Mengizinkan import data from "./data.json".
allowJs false Mengizinkan file .js ikut dikompilasi; berguna di tengah migrasi.
declaration false Menghasilkan file .d.ts; aktifkan saat menerbitkan library.
sourceMap false Menghasilkan file .js.map untuk debugging.
outDir / rootDir ./dist / ./src Ke mana hasil kompilasi ditulis dan di mana source berada.
baseUrl "." Selalu ditulis, sehingga blok paths yang Anda tambahkan manual diresolusi dari root proyek.

Output default persisnya

Biarkan semua kontrol apa adanya dan inilah file yang Anda dapatkan:

{
    "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"
    ]
}

Pilih mode jsx selain none dan entri "jsx" akan ditambahkan ke compilerOptions.

Mode strict: apa yang sebenarnya diaktifkan

strict: true adalah flag payung yang menyalakan seluruh keluarga strict, termasuk noImplicitAny, strictNullChecks, strictFunctionTypes, strictBindCallApply, strictPropertyInitialization, noImplicitThis, useUnknownInCatchVariables, dan alwaysStrict. Proyek baru sebaiknya mulai dengan semuanya aktif: menambahkan strictness belakangan itu menyakitkan.

Kesalahan umum

  • Mengatur module: "CommonJS" untuk proyek Node ESM. Jika package.json Anda berisi "type": "module", gunakan NodeNext untuk module sekaligus moduleResolution.
  • Memakai tsc sebagai bundler. tsc adalah compiler dan pemeriksa tipe. Gunakan Vite/esbuild/SWC untuk build dan tsc --noEmit untuk pemeriksaan tipe.
  • Mengompilasi semuanya. Tanpa daftar include, TypeScript mengambil setiap file .ts yang terlihat. Config yang dihasilkan selalu menulis include: ["src/**/*"] dan mengecualikan node_modules serta dist, jadi Anda aman.
  • Butuh lebih dari yang disediakan config. Generator ini sengaja tetap minimal. Opsi seperti lib, paths, isolatedModules, atau noEmit mudah ditambahkan manual setelah file dasarnya ada.

Pertanyaan yang Sering Diajukan

Untuk monorepo dan proyek multi-paket, ya: satu file dasar dengan opsi bersama dan tiap paket meng-extend-nya lewat “extends”. Untuk repo satu proyek, satu tsconfig.json seperti hasil generator ini lebih sederhana.

Diperkenalkan di TypeScript 5.0 untuk proyek yang dibangun dengan Vite, webpack, atau esbuild. Ia meniru cara bundler benar-benar meresolusi import, tanpa aturan ekstensi file ESM milik node16/nodenext. Untuk kode yang dijalankan langsung oleh Node, pilih node16 atau nodenext.

Tidak ada kontrol khususnya. Namun file yang dihasilkan selalu mengeset baseUrl ke “.”, jadi Anda bisa menempel blok paths tepat di bawahnya, misalnya “@/*”: [“src/*”], dan ia akan diresolusi dari root proyek.

Biasanya tidak, dan karena itu generator ini tidak menulisnya: target sudah menyiratkan kumpulan tipe library yang sesuai. Timpa lib secara manual hanya untuk kasus khusus, misalnya API DOM di proyek Node atau tipe WebWorker.

Tidak perlu mendaftar dan tidak ada yang disimpan. Pilihan Anda hanya dipakai untuk merender pratinjau config, dan pada tampilan langkah demi langkah pilihan itu juga ikut di URL halaman, sehingga config yang sudah jadi mudah di-bookmark atau dibagikan.

Alat Terkait

Referensi Tabel ASCII

Tabel ASCII lengkap dari 0 sampai 127 dengan desimal, heksadesimal, oktal, biner, dan referensi karakter numerik HTML untuk setiap karakter, termasuk kode kontrol seperti NUL, LF, dan DEL.

Referensi Karakter HTML

Daftar entitas HTML yang dapat dicari, beserta kode bernama dan kode numeriknya, serta fitur salin dengan satu klik untuk karakter khusus dan simbol.

Referensi pintasan papan ketik

Cari pintasan bawaan terdokumentasi untuk VS Code, Chrome, dan Bash dengan GNU Readline di macOS, Windows, dan Linux.

JSON ke YAML

Konversi JSON ke YAML dengan penjelajaran yang tepat, penutupan string yang aman, skalar blok berbaris ganda, serta kunci yang tersortir untuk konfigurasi yang lebih rapi.

Konverter Ukuran File

Konversi antara byte, KB, MB, GB, TB, dan satuan biner IEC (KiB, MiB, GiB, TiB) dengan kombinasi desimal dan biner apa pun yang Anda inginkan.

Decoder JWT

Dekode header dan payload JWT, tampilkan klaim beserta pemeriksaan masa kedaluwarsa dan algoritma tanda tangan, lalu verifikasi menggunakan rahasia bersama atau kunci publik.

Alat ini tersedia dalam bahasa lain