0Pricing
TypeScript Academy · บทเรียน

การส่งออกของ tsc เทียบกับ noEmit และตัวรวมแพ็กเกจ

เปรียบเทียบผลลัพธ์จาก tsc ปกติกับโหมด --noEmit เมื่อใช้ตัวรวมแพ็กเกจอย่าง Vite หรือ webpack

การส่งออกของ tsc เทียบกับ noEmit และตัวรวมแพ็กเกจ เป็นบทเรียน TypeScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 3 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน TypeScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส TypeScript Academy มีบทเรียนทั้งหมด 3 บทเรียน

บทนำ

เป้าหมาย: เรียนรู้วิธีที่ tsc สร้าง JS ทำความเข้าใจว่า --noEmit ทำอะไร และเหตุใดเครื่องมือรวมโค้ดจึงมักเข้ามาแทนที่การสร้างผลลัพธ์

การสร้างผลลัพธ์ด้วย tsc

โดยค่าเริ่มต้น tsc จะสร้างไฟล์ JS ที่คอมไพล์แล้ว (และอาจสร้าง .d.ts ด้วย) ไปยัง outDir

// tsconfig.json
{
  "compilerOptions": {
    "outDir": "dist"
  }
}

// Command
npx tsc

// Produces JS + .d.ts in dist

noEmit

โหมด --noEmit จะตรวจสอบชนิดข้อมูลแต่ไม่เขียนไฟล์ เหมาะอย่างยิ่งสำหรับโครงการที่ให้เครื่องมือรวมโค้ดจัดการ JS

// tsconfig.json
{
  "compilerOptions": {
    "noEmit": true
  }
}

// Command
npx tsc --noEmit

// Only type-checks, no JS output

เครื่องมือรวมโค้ด

เครื่องมือรวมชุด (webpack, Vite, esbuild, SWC) แปลง TS→JS และจัดการทรัพยากร เครื่องมือเหล่านี้ไม่จำเป็นต้องใช้ tsc เพื่อสร้าง JS

การตั้งค่า CI

รูปแบบที่ใช้กันทั่วไปคือเรียกใช้ tsc --noEmit ใน CI หรือระหว่างพัฒนา และใช้เครื่องมือรวมชุดสำหรับการสร้างจริง

// package.json scripts
{
  "scripts": {
    "typecheck": "tsc --noEmit",
    "dev": "vite"
  }
}

โหมดผสม

สร้างไฟล์ประกาศด้วย --emitDeclarationOnly ขณะที่เครื่องมือรวมชุดสร้าง JS ซึ่งรวมข้อดีของทั้งสองแนวทางไว้ด้วยกัน

// Sometimes use both
npx tsc --emitDeclarationOnly # for .d.ts
npx vite build # for bundles

คำถาม

ตรวจสอบอย่างรวดเร็ว: เหตุใดจึงเรียกใช้ tsc --noEmit เมื่อใช้เครื่องมือรวมชุด

สรุปทบทวน

สรุปทบทวน: การสร้างผลลัพธ์ด้วย tsc จะเขียน JS ส่วน --noEmit จะตรวจสอบชนิดข้อมูลเท่านั้น ในสแต็กสมัยใหม่ เครื่องมือรวมชุด (Vite, webpack) จะสร้างผลลัพธ์ JS

คำถามที่พบบ่อย

บทเรียน “การส่งออกของ tsc เทียบกับ noEmit และตัวรวมแพ็กเกจ” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การส่งออกของ tsc เทียบกับ noEmit และตัวรวมแพ็กเกจ” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส TypeScript Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส TypeScript Academy มีบทเรียนทั้งหมด 3 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การส่งออกของ tsc เทียบกับ noEmit และตัวรวมแพ็กเกจ”

เปรียบเทียบผลลัพธ์จาก tsc ปกติกับโหมด --noEmit เมื่อใช้ตัวรวมแพ็กเกจอย่าง Vite หรือ webpack คุณปฏิบัติ TypeScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน TypeScript Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน TypeScript Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 3 บทเรียน

บทเรียน “การส่งออกของ tsc เทียบกับ noEmit และตัวรวมแพ็กเกจ” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน TypeScript Academy นี้ได้ไหม

ได้ บทเรียน TypeScript Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. การส่งออกของ tsc เทียบกับ noEmit และตัวรวมแพ็กเกจ
  2. พื้นฐาน Vite / esbuild / SWC / Rollup
  3. การประกาศ ซอร์ซแมป และการส่งออกชนิดข้อมูล
← กลับไปที่ TypeScript Academy