tsconfig.json

tsconfig.json

{
	"compilerOptions": {
		"target": "ESNext",  // ตั้งค่าเป้าหมาย JavaScript version
		"module": "ESNext",  // รูปแบบ module ที่ใช้ในโค้ดที่ compile แล้ว
		"moduleResolution": "bundler",  // วิธีการ resolve modules
		"strict": true,  // เปิดใช้งานการตรวจสอบ type อย่างเข้มงวด
		"noImplicitAny": false,  // อนุญาตให้ใช้ implicit any types
		"noEmit": true,  // ไม่สร้างไฟล์ JavaScript output
		"resolveJsonModule": true,  // อนุญาตให้ import ไฟล์ JSON
		"sourceMap": true,  // สร้าง source maps
		"esModuleInterop": true,  // ช่วยให้ import CommonJS modules แบบ ES modules
		"skipLibCheck": true,  // ข้ามการตรวจสอบไฟล์ใน declaration files
		"types": ["@types/bun", "vite/client", "node"],  // type definitions ที่ต้องการ
		"forceConsistentCasingInFileNames": true,  // ตรวจสอบความสม่ำเสมอของชื่อไฟล์
		"isolatedModules": true,  // ทำให้แน่ใจว่าแต่ละไฟล์สามารถ compile แยกกันได้
		"verbatimModuleSyntax": true  // รักษารูปแบบการ import/export ตามต้นฉบับ
	},
	"exclude": ["node_modules", ".vitepress/dist", ".vitepress/cache", "dist"]  // ไฟล์และโฟลเดอร์ที่ไม่ต้องการให้ TypeScript ตรวจสอบ
}

extends

ขยายการตั้งค่าจากไฟล์ tsconfig อื่น

ใช้สำหรับกรณีที่ต้องการแชร์การตั้งค่าพื้นฐานหลาย ๆ โปรเจกต์ เช่น ใน monorepo หรือองค์กร

ขยายการตั้งค่าจากไฟล์ tsconfig อื่น

{
  "extends": "./tsconfig.base.json"
}

compilerOptions

ตั้งค่าต่าง ๆ สำหรับการคอมไพล์ TypeScript

ส่วนนี้เป็นหัวใจหลักของ tsconfig.json โดยจะควบคุมพฤติกรรมของ TypeScript ทั้งหมด เช่น version ของ JS ที่จะได้, การตรวจสอบ type, การ import/export ฯลฯ

ตั้งค่าสำหรับการคอมไพล์ TypeScript

include

ระบุไฟล์หรือโฟลเดอร์ที่ต้องการให้ TypeScript ตรวจสอบและคอมไพล์

มักใช้กับ src, tests หรือ paths ที่เกี่ยวข้องกับโค้ดจริง ๆ

ระบุไฟล์ที่ต้องการให้ TypeScript คอมไพล์ สนับสนุนการใช้ glob pattern

{
  "include": ["src/**/*", "tests/**/*"]
}

exclude

ระบุไฟล์หรือโฟลเดอร์ที่ไม่ต้องการให้ TypeScript คอมไพล์

เช่น node_modules, ไฟล์ build, หรือไฟล์ที่ไม่เกี่ยวข้องกับโค้ดหลัก

ระบุไฟล์ที่ไม่ต้องการให้ TypeScript คอมไพล์

{
  "exclude": ["node_modules", ".vitepress/dist", ".vitepress/cache", "dist"]
}

target

กำหนดเวอร์ชัน JavaScript ที่ต้องการให้ TypeScript แปลงออกมา

ควรใช้ ESNext ถ้าใช้กับเครื่องมือสมัยใหม่ (Vite, Bun, Next.js)

กำหนดเวอร์ชันของ JavaScript ที่จะคอมไพล์ออกมา ค่าที่เป็นไปได้: ES3, ES5, ES6/ES2015, ES2016, ES2017, ES2018, ES2019, ES2020, ESNext

{
  "target": "ESNext"
}

moduleResolution

กำหนดวิธีการค้นหาและ resolve module ที่ import เข้ามา

"bundler" เหมาะกับ Vite, Bun, หรือ toolchain สมัยใหม่

กำหนดวิธีการที่ TypeScript ใช้ในการค้นหาไฟล์ที่ถูก import

{
  "moduleResolution": "bundler"
}

strict

เปิดโหมดตรวจสอบ type อย่างเข้มงวด

แนะนำให้เปิดเสมอเพื่อความปลอดภัยของโค้ด

Enable all strict type-checking options for robust type safety.

{
  "strict": true
}

isolatedModules

บังคับให้แต่ละไฟล์สามารถ compile แยกกันได้

จำเป็นสำหรับ ESM หรือกรณีใช้ bundler

Ensures each file can be transpiled independently (required for ESM/bundlers).

{
  "isolatedModules": true
}

useDefineForClassFields

ตั้งค่าให้การประกาศฟิลด์ใน class ตรงตามมาตรฐาน JavaScript

ควรเปิดสำหรับโปรเจกต์ใหม่ ๆ

Aligns class field initialization with JavaScript standard (recommended for modern projects).

{
  "useDefineForClassFields": true
}

importsNotUsedAsValues

จัดการ import ที่ไม่ได้ใช้เป็นค่า (value)

ใช้ "remove" เพื่อให้โค้ดสะอาดและไม่มี import เกินจำเป็นใน output

Controls how unused imports are handled. "remove" is recommended for clean output.

{
  "importsNotUsedAsValues": "remove"
}

composite & references

ใช้สำหรับโปรเจกต์ขนาดใหญ่หรือ monorepo ที่ต้องการ build แบบ incremental

ทำให้ build เร็วขึ้นและแยก module ได้ดี

For monorepo or multi-project setups, use composite and references for incremental builds.

{
  "compilerOptions": {
    "composite": true
  },
  "references": [
    { "path": "../shared" },
    { "path": "../utils" }
  ]
}