PricingLoginStart free
Frontend Academy · Pelajaran

Mengkompilasi TS dan tsconfig.json

Jalankan tsc untuk mengkompilasi TypeScript, konfigurasikan pengkompil dengan pilihan tsconfig.json seperti strict, target dan outDir.

Pelajaran 4 daripada 413 langkah

Mengkompilasi TS dan tsconfig.json ialah pelajaran Frontend Academy percuma di CoddyKit. Ini ialah pelajaran 4 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Frontend Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Frontend Academy merangkumi sejumlah 4 pelajaran.

Memasang Penyusun TypeScript

Pasang TypeScript sebagai kebergantungan pembangunan. Antara muka baris perintah CLI tsc menyusun fail TypeScript. Dengan Vite atau Next.js, pengumpul mengendalikan penyusunan — tetapi tsc masih digunakan untuk pemeriksaan jenis.

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

Memulakan tsconfig.json

Jalankan npx tsc --init untuk menjana tsconfig.json dengan semua pilihan dikomen dan nilai lalai yang munasabah. Fail ini ialah konfigurasi tunggal untuk penyusun TypeScript.

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

Struktur tsconfig.json

Bahagian utama: compilerOptions (tingkah laku penyusun), include (fail yang hendak disusun), exclude (fail yang hendak dilangkau).

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

Sasaran — Versi JavaScript Keluaran

target menentukan versi JavaScript yang dikeluarkan oleh tsc. ES2022 atau ESNext untuk persekitaran moden. ES5 untuk keserasian maksimum (biasanya dikendalikan oleh Babel).

Modul — Sistem Modul

module mengawal format modul keluaran. CommonJS untuk Node.js. ESNext atau ES2022 untuk pengumpul (Vite, webpack). NodeNext untuk Node.js moden dengan jenis modul dalam package.json.

Ketat — Bendera Ketegasan

"strict": true mengaktifkan sekumpulan pemeriksaan ketat: strictNullChecks, noImplicitAny, strictFunctionTypes dan banyak lagi. Sentiasa aktifkannya untuk projek baharu — ciri ini mengesan paling banyak pepijat.

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

Pemeriksaan Nil Ketat — Menghapuskan Ralat Nil

Dengan strictNullChecks diaktifkan, null dan undefined tidak boleh diberikan kepada jenis lain melainkan disertakan secara eksplisit dalam kesatuan. Ini memaksa anda mengendalikan kes null.

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

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

Direktori Keluaran dan Direktori Akar

outDir menentukan tempat fail JS yang disusun diletakkan. rootDir menetapkan akar fail TypeScript sumber. Bersama-sama, kedua-duanya mencerminkan struktur sumber di bawah dist/.

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

Laluan — Alias Modul

Konfigurasikan alias laluan dengan pilihan paths (dan baseUrl). Ini membolehkan anda mengimport @/components/Button dan bukannya ../../components/Button.

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

Mod Pantau dan Semakan Jenis Sahaja

tsc --watch menyusun semula apabila terdapat perubahan pada fail. tsc --noEmit menjalankan pemeriksaan jenis tanpa menghasilkan fail — berguna dalam CI untuk mengesahkan jenis tanpa menduplikasi tugas pengumpul.

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

# Watch and recompile:
npx tsc --watch

Melanjutkan tsconfig.json

Gunakan extends untuk mewarisi daripada konfigurasi asas. Konfigurasi asas dikongsi (seperti @tsconfig/strictest) menyediakan amalan terbaik komuniti.

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

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

Semakan Pantas

Pilihan tsconfig manakah yang mengaktifkan keseluruhan set pemeriksaan jenis ketat?

Jawab dalam pelajaran interaktif

Imbas Kembali: tsconfig.json

tsc menyusun TypeScript kepada JavaScript. tsconfig.json mengawal sasaran (versi ES keluaran), modul (sistem modul), direktori keluaran, ketegasan dan laluan. Ketegasan yang diaktifkan menangkap paling banyak pepijat. Gunakan --noEmit dalam CI untuk pemeriksaan jenis semata-mata. Lanjutkan konfigurasi asas komuniti untuk amalan terbaik.

Percuma untuk bermula

Pelajari HTML dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus
41
Pelajaran
163
Mula belajar secara percumaLihat kursus penuh

Soalan Lazim

Adakah pelajaran “Mengkompilasi TS dan tsconfig.json” percuma?

Ya — teks penuh “Mengkompilasi TS dan tsconfig.json” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus Frontend Academy, tingkat taraf kepada CoddyKit PRO. Kursus Frontend Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Mengkompilasi TS dan tsconfig.json”?

Jalankan tsc untuk mengkompilasi TypeScript, konfigurasikan pengkompil dengan pilihan tsconfig.json seperti strict, target dan outDir. Anda berlatih Frontend Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Frontend Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Frontend Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 4 daripada 4.

Berapa lamakah pelajaran “Mengkompilasi TS dan tsconfig.json” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Frontend Academy ini?

Ya. Setiap pelajaran Frontend Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

  1. Mengapa TypeScript: Jenis Mengesan Pepijat Semasa Kompilasi
  2. Jenis Primitif, Union dan Alias Jenis
  3. Interface dan Jenis Objek
  4. Mengkompilasi TS dan tsconfig.json
← Kembali ke Frontend Academy