ตัวสร้าง tsconfig.json
ตัวสร้าง tsconfig.json ฟรีออนไลน์ สร้างไฟล์ config TypeScript จาก preset สำเร็จรูปสำหรับ Next.js, Vite, Node.js และ library พร้อมตัวเลือก strict mode, JSX,
Loading tool...
ตัวสร้าง tsconfig.json คืออะไร?
ตัวสร้าง tsconfig.json สร้างไฟล์ config ที่บอก TypeScript compiler ว่าจะอ่านและคอมไพล์โปรเจกต์ของคุณอย่างไร ทั้ง target ของ JavaScript ที่จะ emit ความเข้มงวดของการตรวจสอบ type วิธี resolve module และไฟล์ใดที่จะรวมเข้ามา แทนที่จะคัดลอก snippet จากเอกสารที่กระจัดกระจาย คุณเพียงเลือก preset สลับ switch แล้วได้ไฟล์ JSON ที่สะอาดและถูกต้องทันที
ประโยชน์หลัก
- เริ่มจาก preset ที่ framework แนะนำ แทนไฟล์เปล่า ๆ
- เข้าใจ compiler option แต่ละตัวผ่าน switch ที่มีป้ายกำกับ ไม่ต้องค้นเอกสารที่ฝังอยู่ลึก ๆ
- สร้าง baseUrl และ paths อัตโนมัติจากแถว alias แบบ visual
- ได้ JSON ที่ถูกต้องเสมอ ไม่มี trailing comma หรือพิมพ์ผิด
- ใช้งานออฟไลน์ในเบราว์เซอร์ ไม่มีการอัปโหลดอะไรออกไป
กรณีการใช้งาน
- •เริ่มโปรเจกต์ Next.js, Vite หรือ Node.js ใหม่
- •เพิ่มความเข้มงวดให้ config เดิมด้วยการเปิด flag กลุ่ม strict ทีละตัว
- •ตั้งค่า path alias @/* เพื่อให้ import สะอาดขึ้น
- •สร้าง base tsconfig สำหรับให้ package ต่าง ๆ ใน monorepo สืบทอดต่อ
- •ใช้สอนหรือสาธิตว่า compiler option แต่ละตัวเปลี่ยน output อย่างไร
วิธีใช้ตัวสร้าง tsconfig.json
- เลือก preset: เลือก Next.js, Vite, Node.js หรือ Library เพื่อเริ่มจาก config พื้นฐานที่มั่นคง
- ปรับ compiler option: ตั้งค่า target, module, moduleResolution และ JSX แล้วสลับ flag กลุ่ม strict และ interop ให้ตรงกับโปรเจกต์
- เพิ่ม path alias: แอด alias เช่น @/* ชี้ไปที่ ./src/* ได้ตามต้องการ ระบบจะสร้าง baseUrl และ paths ให้อัตโนมัติ
- คัดลอกหรือดาวน์โหลด: ตรวจสอบพรีวิว JSON แบบสด แล้วคัดลอกหรือดาวน์โหลด tsconfig.json ไปไว้ที่ root ของโปรเจกต์ได้เลย
คุณสมบัติหลัก
- Preset ที่ผ่านการใช้งานจริงสำหรับ Next.js, Vite, Node.js และ library บน npm
- compiler flags ที่สำคัญครบทุกตัว ทั้งกลุ่ม strict ตัวเลือก emit และ interop
- ตัวสร้าง path alias ที่สร้าง baseUrl และ paths ให้อัตโนมัติ
- พรีวิว JSON อัปเดตสด ๆ ทุกครั้งที่สลับตัวเลือก
- คัดลอกหรือดาวน์โหลด tsconfig.json ที่เสร็จแล้วได้ในคลิกเดียว
- ทำงานในเบราว์เซอร์ 100% ไม่ต้องตั้งค่า ไม่ต้องสมัครสมาชิก ข้อมูลไม่ออกจากเครื่องคุณ
คำถามที่พบบ่อย
tsconfig.json ที่สร้างมาแทนไฟล์เดิมได้เลยไหม?
ได้ เพราะเป็น config แบบสมบูรณ์ในตัวเอง คุณสามารถวางทับ tsconfig.json เดิมได้เลย หรือจะเลือกเอาเฉพาะ compilerOptions ที่ต้องการไปรวมกับ base config เดิมก็ได้
ควรเลือก preset แบบไหน?
เลือก Next.js สำหรับแอป App Router, Vite สำหรับ SPA, Node.js สำหรับ server และเครื่องมือ CLI และ Library สำหรับ package บน npm ที่ต้องส่ง type declaration ออกไปด้วย ทุก preset ยึดตามคำแนะนำอย่างเป็นทางการล่าสุดของแต่ละ framework
ทำไม preset ของ Next.js ถึงเปิด noEmit และ incremental?
Next.js คอมไพล์โค้ดเองผ่าน SWC ดังนั้น TypeScript มีหน้าที่แค่ตรวจสอบ type เท่านั้น (noEmit: true) ส่วน incremental จะ cache ข้อมูล type ไว้ ทำให้การตรวจสอบรอบถัดไปเร็วขึ้นแม้โปรเจกต์จะใหญ่ขึ้น
path alias ใช้งานอย่างไร?
alias อย่าง @/* ที่ชี้ไปที่ ./src/* ทำให้ import จาก @/components/Button ได้แทนการเขียน relative path ยาว ๆ ตัวสร้างจะใส่ baseUrl และ paths ให้อัตโนมัติ — bundler อย่าง webpack และ Vite อ่านค่าพวกนี้ได้ แต่บาง toolchain อาจต้องติดตั้ง resolver plugin เพิ่ม