คำสั่งใน tsconfig.json

·

ในบทความนี้จะพาไปเรียนรู้เกี่ยวกับไฟล์ tsconfig.json ซึ่งเป็นไฟล์คอนฟิกสำคัญที่ใช้ในการตั้งค่าการคอมไพล์ในโปรเจกต์ TypeScript รุ่น 2022

ตารางคำสั่งใน tsconfig.json 2022

คำสั่งคำอธิบายตัวอย่าง
compilerOptionsตั้งค่าตัวเลือกสำหรับการคอมไพล์ไฟล์ TypeScript
outDirกำหนดโฟลเดอร์ที่ใช้เก็บไฟล์ที่คอมไพล์แล้ว"outDir": "./dist/out-tsc"
strictเปิดใช้งานตัวเลือกที่เข้มงวดทั้งหมด (เช่น noImplicitAny, strictNullChecks และอื่นๆ)"strict": true
noImplicitOverrideป้องกันการใช้ override โดยที่ไม่สามารถระบุประเภทได้"noImplicitOverride": true
noPropertyAccessFromIndexSignatureห้ามเข้าถึงคุณสมบัติของวัตถุจาก index signature ด้วยการใช้การเข้าถึงแบบจุด"noPropertyAccessFromIndexSignature": true
noImplicitReturnsป้องกันการคืนค่าจากฟังก์ชันที่ไม่มีค่า"noImplicitReturns": true
noFallthroughCasesInSwitchห้ามใช้ fallthrough ใน switch statement"noFallthroughCasesInSwitch": true
skipLibCheckข้ามการตรวจสอบไฟล์ไลบรารีที่มีขนาดใหญ่"skipLibCheck": true
isolatedModulesคอมไพล์ไฟล์แบบแยกโมดูลเพื่อรองรับการใช้งานในโมดูลเดี่ยว"isolatedModules": true
esModuleInteropเปิดการใช้งาน esModuleInterop สำหรับการนำเข้าหรือ import โมดูลจาก CommonJS"esModuleInterop": true
experimentalDecoratorsเปิดใช้งาน decorators ใน TypeScript"experimentalDecorators": true
moduleResolutionกำหนดวิธีการหามอดูล (เช่น node, classic, bundler)"moduleResolution": "bundler"
importHelpersใช้ helpers ของ TypeScript จากไลบรารี tslib"importHelpers": true
targetกำหนดเป้าหมายของการคอมไพล์ (เช่น ES2022, ES6, ES5)"target": "ES2022"
moduleกำหนดประเภทของโมดูล (เช่น ES2022, CommonJS)"module": "ES2022"
sourceMapเปิดการสร้างไฟล์แผนที่ที่ช่วยในการดีบัก"sourceMap": true
resolveJsonModuleอนุญาตให้นำเข้าไฟล์ JSON เป็นโมดูล"resolveJsonModule": true
baseUrlกำหนดโฟลเดอร์ฐานที่ใช้ในการค้นหามอดูล"baseUrl": "./src"
pathsตั้งค่า alias หรือเส้นทางแบบย่อสำหรับการนำเข้าโมดูล"paths": { "@components/*": ["components/*"], "@utils/*": ["utils/*"] }
libเพิ่มไลบรารีที่รองรับ API เช่น JavaScript, DOM, Web Worker"lib": ["ES2022", "DOM"]
forceConsistentCasingInFileNamesบังคับให้ชื่อไฟล์ในทุกที่ต้องตรงกันทั้งในระบบปฏิบัติการ Windows และ Linux"forceConsistentCasingInFileNames": true
includeระบุไฟล์หรือโฟลเดอร์ที่จะคอมไพล์"include": ["src/**/*"]
excludeระบุไฟล์หรือโฟลเดอร์ที่จะไม่คอมไพล์"exclude": ["node_modules", "**/*.test.ts"]

ตัวอย่างการใช้งานไฟล์ tsconfig.json

{
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "strict": true,
    "noImplicitOverride": true,
    "noPropertyAccessFromIndexSignature": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "skipLibCheck": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "moduleResolution": "bundler",
    "importHelpers": true,
    "target": "ES2022",
    "module": "ES2022",
    "sourceMap": true,
    "resolveJsonModule": true,
    "baseUrl": "./src",
    "paths": {
      "@components/*": ["components/*"],
      "@utils/*": ["utils/*"]
    },
    "lib": ["ES2022", "DOM"],
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "**/*.test.ts"]
}

สรุป

ไฟล์ tsconfig.json เป็นไฟล์สำคัญในการตั้งค่าการคอมไพล์โปรเจกต์ TypeScript ซึ่งในเวอร์ชันล่าสุดนี้ได้เพิ่มฟีเจอร์ใหม่ ๆ ที่ช่วยให้การพัฒนาโปรเจกต์มีความสะดวกและปลอดภัยยิ่งขึ้น เช่น การเปิดใช้งาน strict ที่ช่วยป้องกันข้อผิดพลาดตั้งแต่เริ่มต้น การรองรับโมดูล ES2022 และการใช้ paths สำหรับการตั้งค่า alias เป็นต้น