Frontend Academy · บทเรียน

การคอมไพล์ TS และ tsconfig.json

เรียกใช้ tsc เพื่อคอมไพล์ TypeScript และกำหนดค่าคอมไพเลอร์ด้วยตัวเลือกใน tsconfig.json เช่น strict, target และ outDir

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

การติดตั้งคอมไพเลอร์ TypeScript

ติดตั้ง TypeScript เป็นสิ่งที่ต้องใช้สำหรับการพัฒนา เครื่องมือบรรทัดคำสั่ง tsc ใช้คอมไพล์ไฟล์ TypeScript เมื่อใช้ Vite หรือ Next.js ตัวรวมชุดโปรแกรมจะจัดการการคอมไพล์ให้ แต่ยังคงใช้ tsc สำหรับตรวจสอบชนิดข้อมูล

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

การเริ่มต้น tsconfig.json

เรียกใช้ npx tsc --init เพื่อสร้าง tsconfig.json ที่มีตัวเลือกทั้งหมดใส่คำอธิบายกำกับไว้และมีค่าเริ่มต้นที่เหมาะสม ไฟล์นี้เป็นการกำหนดค่าเพียงแห่งเดียวสำหรับคอมไพเลอร์ TypeScript

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

โครงสร้างของ tsconfig.json

ส่วนหลักประกอบด้วย compilerOptions (พฤติกรรมของคอมไพเลอร์), include (ไฟล์ที่จะคอมไพล์) และ exclude (ไฟล์ที่จะข้าม)

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

target — เวอร์ชัน JavaScript ที่ส่งออก

target ระบุเวอร์ชัน JavaScript ที่ tsc จะส่งออก ใช้ ES2022 หรือ ESNext สำหรับสภาพแวดล้อมสมัยใหม่ และใช้ ES5 เพื่อความเข้ากันได้สูงสุด ซึ่งโดยปกติจะจัดการด้วย Babel แทน

module — ระบบโมดูล

module ควบคุมรูปแบบโมดูลของผลลัพธ์ ใช้ CommonJS สำหรับ Node.js ใช้ ESNext หรือ ES2022 สำหรับตัวรวมชุดโปรแกรม เช่น ไวต์และเว็บแพ็ก และใช้ NodeNext สำหรับ Node.js สมัยใหม่ที่กำหนด type:module ใน package.json

strict — ตัวเลือกความเข้มงวด

"strict": true เปิดใช้การตรวจสอบแบบเข้มงวดหลายรายการ เช่น strictNullChecks, noImplicitAny, strictFunctionTypes และรายการอื่น ๆ ควรเปิดใช้เสมอสำหรับโครงการใหม่ เพราะช่วยตรวจจับข้อผิดพลาดได้มากที่สุด

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

strictNullChecks — กำจัดข้อผิดพลาดจากค่า null

เมื่อเปิดใช้ strictNullChecks ค่า null และ undefined จะไม่สามารถกำหนดให้กับชนิดข้อมูลอื่นได้ เว้นแต่จะระบุรวมไว้ในยูเนียนอย่างชัดเจน วิธีนี้บังคับให้คุณจัดการกรณีที่เป็น null

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

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

outDir และ rootDir

outDir ระบุตำแหน่งที่จัดเก็บไฟล์ JS ที่คอมไพล์แล้ว ส่วน rootDir กำหนดโฟลเดอร์รากของไฟล์ TypeScript ต้นฉบับ เมื่อนำมาใช้ร่วมกัน ทั้งสองตัวเลือกจะจำลองโครงสร้างต้นฉบับไว้ภายใต้ dist/

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

paths — นามแฝงโมดูล

กำหนดนามแฝงเส้นทางด้วยตัวเลือก paths และ baseUrl ทำให้สามารถนำเข้า @/components/Button แทน ../../components/Button ได้

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

โหมดเฝ้าดูและตรวจสอบชนิดข้อมูลเท่านั้น

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

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

# Watch and recompile:
npx tsc --watch

การขยาย tsconfig.json

ใช้ extends เพื่อรับช่วงการตั้งค่าจากการกำหนดค่าพื้นฐาน การกำหนดค่าพื้นฐานที่ใช้ร่วมกัน เช่น @tsconfig/strictest จะมีแนวทางปฏิบัติที่ดีจากชุมชนให้ใช้

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

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

ตรวจสอบอย่างรวดเร็ว

ตัวเลือกใดใน tsconfig ที่เปิดใช้การตรวจสอบชนิดข้อมูลแบบเข้มงวดครบชุด

ทบทวน: tsconfig.json

tsc ใช้คอมไพล์ TypeScript เป็น JavaScript ส่วน tsconfig.json ควบคุม target (เวอร์ชัน ES ที่ส่งออก), module (ระบบโมดูล), outDir, strict และ paths การตั้งค่า strict: true ช่วยตรวจจับข้อผิดพลาดได้มากที่สุด ใช้ --noEmit ใน CI เพื่อตรวจสอบชนิดข้อมูลเพียงอย่างเดียว และขยายการกำหนดค่าพื้นฐานจากชุมชนเพื่อใช้แนวทางปฏิบัติที่ดี

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

บทเรียน “การคอมไพล์ TS และ tsconfig.json” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “การคอมไพล์ TS และ tsconfig.json”

เรียกใช้ tsc เพื่อคอมไพล์ TypeScript และกำหนดค่าคอมไพเลอร์ด้วยตัวเลือกใน tsconfig.json เช่น strict, target และ outDir คุณปฏิบัติ Frontend Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

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

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

บทเรียน “การคอมไพล์ TS และ tsconfig.json” ใช้เวลานานแค่ไหน

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

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

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

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

← กลับไปที่ Frontend Academy