ในบทความนี้จะพาไปเรียนรู้เกี่ยวกับไฟล์ 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 เป็นต้น