TypeScript Academy · Pelajaran

Menyusun TypeScript kepada JavaScript

Fahami pengompil TypeScript dan outputnya.

Pelajaran 3 daripada 413 langkah

Menyusun TypeScript kepada JavaScript ialah pelajaran TypeScript Academy percuma di CoddyKit. Ini ialah pelajaran 3 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 TypeScript Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus TypeScript Academy merangkumi sejumlah 4 pelajaran.

Selamat Datang

TypeScript tidak boleh dijalankan secara terus dalam Node.js atau pelayar. Ia mesti dikompil kepada JavaScript terlebih dahulu. Dalam pelajaran ini, anda akan mempelajari cara penyusun TypeScript berfungsi.

Memasang Penyusun TypeScript

Pasang TypeScript sebagai kebergantungan pembangunan dalam projek anda. Perintah `tsc` tersedia dalam skrip setempat anda selepas pemasangan.
npm install --save-dev typescript
npx tsc --version

Kompilasi tsc Pertama Anda

Jalankan `tsc hello.ts` untuk mengkompil satu fail. Perintah ini menghasilkan `hello.js` dalam direktori yang sama, dengan semua jenis dibuang.
// hello.ts
function greet(name: string): string {
  return 'Hello, ' + name;
}
console.log(greet('World'));

// Compile: npx tsc hello.ts
// Output: hello.js (no types)

tsconfig.json: Konfigurasi Projek

Untuk projek sebenar, anda memerlukan `tsconfig.json`. Jalankan `tsc --init` untuk menjana satu fail. Fail ini mengawal sasaran, format modul, ketegasan, direktori output dan banyak lagi.
npx tsc --init
// Creates tsconfig.json with defaults and comments

Pilihan Utama tsconfig

Medan tsconfig yang paling penting ialah sasaran (output versi ES), modul (sistem modul), outDir (folder output) dan ketat (mendayakan semua semakan ketat).
{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "outDir": "./dist",
    "strict": true
  }
}

Mod Pantau dengan tsc --watch

Jalankan `tsc --watch` untuk mengkompil semula secara automatik setiap kali anda menyimpan fail TypeScript. Ini mempercepat kitaran pembangunan.
npx tsc --watch
// Watches for changes and recompiles on save

noEmit: Semak Jenis Tanpa Menghasilkan Fail

Bendera `noEmit` menjalankan penyemak jenis tanpa menulis sebarang fail output. Ini berguna dalam saluran paip CI yang menggunakan penggabung seperti Vite atau esbuild untuk kompilasi sebenar.
// tsconfig.json
{ "compilerOptions": { "noEmit": true } }

// Then run:
npx tsc --noEmit

Alternatif Lebih Pantas: ts-node dan tsx

Untuk pembangunan, anda boleh menjalankan TypeScript secara terus tanpa langkah kompilasi berasingan menggunakan `ts-node` atau alat `tsx` yang lebih pantas.
# Run TS directly with ts-node
npx ts-node src/index.ts

# Or faster with tsx
npx tsx src/index.ts

Peta Sumber untuk Penyahpepijatan

Dayakan `sourceMap: true` supaya alat pembangunan pelayar dan penyahpepijat Node.js dapat memetakan baris JS yang dikompil kembali kepada sumber TypeScript asal anda.
{ "compilerOptions": { "sourceMap": true } }

Fail Pengisytiharan (.d.ts)

Dengan `declaration: true`, penyusun turut menghasilkan fail `.d.ts`. Fail ini membolehkan projek TypeScript lain menggunakan pustaka anda dengan maklumat jenis yang lengkap.
{ "compilerOptions": { "declaration": true } }
// Outputs: dist/index.js AND dist/index.d.ts

Ralat Penyusun Menyekat Output Secara Lalai

Secara lalai, jika TypeScript anda mempunyai ralat jenis, `tsc` masih menghasilkan JavaScript tetapi keluar dengan kod bukan sifar. Gunakan `noEmitOnError: true` untuk menghentikan output apabila berlaku ralat.
{ "compilerOptions": { "noEmitOnError": true } }

Semakan Pantas

Apakah hasil menjalankan `tsc --noEmit`?

Imbas Kembali

Penyusun TypeScript mengubah fail .ts menjadi JavaScript. Konfigurasikannya dengan tsconfig.json, gunakan --watch untuk pembangunan, --noEmit untuk semakan jenis sahaja dan ts-node/tsx untuk menjalankan TypeScript secara terus.
Percuma untuk bermula

Pelajari TypeScript 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
101
Pelajaran
352

Soalan Lazim

Adakah pelajaran “Menyusun TypeScript kepada JavaScript” percuma?

Ya — teks penuh “Menyusun TypeScript kepada JavaScript” 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 TypeScript Academy, tingkat taraf kepada CoddyKit PRO. Kursus TypeScript Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Menyusun TypeScript kepada JavaScript”?

Fahami pengompil TypeScript dan outputnya. Anda berlatih TypeScript 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 TypeScript Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran TypeScript 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 3 daripada 4.

Berapa lamakah pelajaran “Menyusun TypeScript kepada JavaScript” 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 TypeScript Academy ini?

Ya. Setiap pelajaran TypeScript 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. Titik Sukar JavaScript: Ralat Masa Jalan
  2. Penambahan TypeScript pada JavaScript
  3. Menyusun TypeScript kepada JavaScript
  4. Masa untuk Menggunakan TypeScript dalam Projek Anda
← Kembali ke TypeScript Academy