Softonic

เครื่องมือสร้างไฟล์ tsconfig.json

ขั้นตอน 1 / 2
ผลลัพธ์

tsconfig.json มีตัวเลือกคอมไพเลอร์มากกว่าร้อยรายการ และบทเรียน TypeScript แต่ละที่ก็แสดงชุดค่าที่ต่างกันไป เครื่องมือนี้เลือกเฉพาะตัวเลือกที่สำคัญกับโปรเจกต์ส่วนใหญ่: target, module, moduleResolution, jsx, แฟล็กบูลีนยอดนิยม (strict, esModuleInterop, skipLibCheck และพวกพ้อง) และโฟลเดอร์ outDir/rootDir ตัวอย่าง tsconfig.json จะอัปเดตสดทุกครั้งที่คุณเปลี่ยนตัวเลือก คัดลอกไปวางที่โฟลเดอร์รากของโปรเจกต์ ก็ได้คอนฟิกที่สะอาดโดยไม่มีตัวเลือกที่ไม่ได้ใช้แบบที่เทมเพลตส่วนใหญ่พ่วงมา

ขั้นตอนการสร้างคอนฟิก

  1. 1

    เลือก target และ module

    เวอร์ชัน JavaScript ที่ tsc จะสร้าง (ES2015 ถึง ES2023 หรือ ESNext) และระบบโมดูล (CommonJS, ES2015/ES2020/ES2022, ESNext, Node16, NodeNext)

  2. 2

    กำหนด moduleResolution และ JSX

    ใช้ bundler กับโปรเจกต์ Vite/webpack, ใช้ node16/nodenext กับ Node รุ่นใหม่ และ node หรือ classic กับระบบเก่า ตั้ง jsx เป็น react-jsx สำหรับ React สมัยใหม่ หรือปล่อยเป็น none เพื่อไม่ให้เขียนคีย์นี้

  3. 3

    เปิดปิดแฟล็ก

    strict, esModuleInterop, skipLibCheck, resolveJsonModule, allowJs, declaration, sourceMap และ forceConsistentCasingInFileNames เป็นช่องติ๊กง่าย ๆ

  4. 4

    กำหนดโฟลเดอร์

    outDir และ rootDir ตั้งต้นเป็น ./dist และ ./src ส่วน include กับ exclude คงที่เป็น src/**/* บวก node_modules และ dist

  5. 5

    คัดลอก tsconfig ที่สร้างขึ้น

    ตัวอย่าง JSON อัปเดตสด คลิกเดียวเพื่อคัดลอก แล้วนำไปวางเป็น tsconfig.json ที่โฟลเดอร์รากของโปรเจกต์

ตัวเลือกที่เครื่องมือนี้เขียนให้

ตัวเลือก ค่าเริ่มต้นที่นี่ หน้าที่
target ES2022 เวอร์ชัน JavaScript ของโค้ดที่ได้ ES2022 ปลอดภัยกับเบราว์เซอร์และ Node ปัจจุบัน เลือกเวอร์ชันเก่ากว่านี้เฉพาะกับระบบเก่าเท่านั้น
module ESNext รูปแบบโมดูลของเอาต์พุต ใช้ NodeNext/Node16 กับโปรเจกต์ Node แบบ ESM และ CommonJS กับ Node รุ่นเก่า
moduleResolution node วิธีค้นหา import แนะนำ bundler เมื่อใช้ Vite/webpack/esbuild และ node16/nodenext กับ Node รุ่นใหม่ ส่วน node (node10) คือพฤติกรรมแบบดั้งเดิม
jsx ไม่เขียน จะเขียนก็ต่อเมื่อเลือกโหมดเท่านั้น react-jsx สำหรับ React 17 ขึ้นไป และ preserve เมื่อให้ bundler แปลง JSX เอง
strict true เปิดชุดการตรวจสอบตระกูล strict ทั้งหมด โปรเจกต์ใหม่ควรเปิดไว้
esModuleInterop true แก้ปัญหา default import จากแพ็กเกจ CommonJS
skipLibCheck true ข้ามการตรวจชนิดในไฟล์ .d.ts คอมไพล์เร็วขึ้นมาก และแทบไม่เคยซ่อนบั๊กจริง
forceConsistentCasingInFileNames true ปฏิเสธ import ที่พิมพ์ตัวพิมพ์ใหญ่เล็กไม่ตรงกับไฟล์บนดิสก์ (สาเหตุพังคลาสสิกตอนย้ายจาก macOS ไป Linux)
resolveJsonModule true ทำให้เขียน import data from "./data.json" ได้
allowJs false ยอมรับไฟล์ .js เข้าร่วมคอมไพล์ มีประโยชน์ระหว่างย้ายโค้ด
declaration false สร้างไฟล์ .d.ts เปิดเมื่อจะเผยแพร่ไลบรารี
sourceMap false สร้างไฟล์ .js.map สำหรับดีบัก
outDir / rootDir ./dist / ./src ที่เก็บผลคอมไพล์และที่อยู่ของซอร์สโค้ด
baseUrl "." เขียนเสมอ เพื่อให้บล็อก paths ที่เพิ่มเองภายหลังอ้างอิงจากรากโปรเจกต์

เอาต์พุตค่าเริ่มต้นแบบเป๊ะ ๆ

ถ้าไม่แตะการตั้งค่าใดเลย คุณจะได้ไฟล์นี้เป๊ะ ๆ:

{
    "compilerOptions": {
        "target": "ES2022",
        "module": "ESNext",
        "moduleResolution": "node",
        "strict": true,
        "esModuleInterop": true,
        "skipLibCheck": true,
        "forceConsistentCasingInFileNames": true,
        "resolveJsonModule": true,
        "allowJs": false,
        "declaration": false,
        "sourceMap": false,
        "outDir": "./dist",
        "rootDir": "./src",
        "baseUrl": "."
    },
    "include": [
        "src/**/*"
    ],
    "exclude": [
        "node_modules",
        "dist"
    ]
}

เลือกโหมด jsx ที่ไม่ใช่ none เมื่อไร รายการ "jsx" จะถูกเพิ่มเข้าไปใน compilerOptions

โหมด strict เปิดอะไรให้บ้าง

strict: true เป็นแฟล็กร่มที่เปิดการตรวจสอบตระกูล strict ทั้งชุด รวมถึง noImplicitAny, strictNullChecks, strictFunctionTypes, strictBindCallApply, strictPropertyInitialization, noImplicitThis, useUnknownInCatchVariables และ alwaysStrict โปรเจกต์ใหม่ควรเริ่มด้วยการเปิดทั้งหมด เพราะการมาไล่เปิดความเข้มงวดทีหลังนั้นเจ็บปวด

ข้อผิดพลาดที่พบบ่อย

  • ตั้ง module: "CommonJS" ให้โปรเจกต์ Node แบบ ESM ถ้า package.json ของคุณมี "type": "module" ให้ใช้ NodeNext ทั้งกับ module และ moduleResolution
  • ใช้ tsc เป็น bundler จริง ๆ แล้วมันคือคอมไพเลอร์และตัวตรวจชนิด ใช้ Vite/esbuild/SWC สำหรับ build และ tsc --noEmit สำหรับตรวจชนิด
  • คอมไพล์ทุกอย่าง ถ้าไม่มีรายการ include TypeScript จะกวาดไฟล์ .ts ทุกไฟล์ที่เห็น คอนฟิกที่สร้างให้เขียน include: ["src/**/*"] เสมอ และตัด node_modules กับ dist ออก จึงหมดปัญหานี้
  • ต้องการมากกว่าที่คอนฟิกมี เครื่องมือนี้ตั้งใจให้เรียบง่าย ตัวเลือกอย่าง lib, paths, isolatedModules หรือ noEmit เพิ่มเองได้ง่ายเมื่อไฟล์พื้นฐานพร้อมแล้ว

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

สำหรับ monorepo และโปรเจกต์หลายแพ็กเกจ ควรใช้: มีไฟล์ฐานหนึ่งไฟล์เก็บตัวเลือกร่วม แล้วให้แต่ละแพ็กเกจ extend ผ่าน “extends” ส่วนโปรเจกต์เดี่ยว ใช้ tsconfig.json ไฟล์เดียวแบบที่เครื่องมือสร้างให้จะง่ายกว่า

เพิ่มเข้ามาใน TypeScript 5.0 สำหรับโปรเจกต์ที่ build ด้วย Vite, webpack หรือ esbuild โดยเลียนแบบวิธีที่ bundler ค้นหา import จริง ๆ โดยไม่บังคับกฎนามสกุลไฟล์ ESM ของ node16/nodenext ส่วนโค้ดที่ Node รันตรง ๆ ควรใช้ node16 หรือ nodenext

ไม่มีช่องตั้งค่าเฉพาะ แต่ไฟล์ที่สร้างให้ตั้ง baseUrl เป็น “.” เสมอ คุณจึงวางบล็อก paths ต่อท้ายได้เลย เช่น “@/*”: [“src/*”] แล้วระบบจะอ้างอิงจากรากโปรเจกต์

ส่วนใหญ่ไม่จำเป็น และนั่นคือเหตุผลที่เครื่องมือนี้ไม่เขียนให้: target จะกำหนดชุดชนิดไลบรารีที่เข้ากันโดยอัตโนมัติ ให้แก้ lib เองเฉพาะกรณีพิเศษ เช่น ต้องใช้ DOM API ในโปรเจกต์ Node หรือชนิดของ WebWorker

ไม่ต้องสมัครสมาชิกและไม่มีการบันทึกใด ๆ ตัวเลือกของคุณใช้เพื่อแสดงตัวอย่างคอนฟิกเท่านั้น และในมุมมองทีละขั้นตอน ตัวเลือกจะติดไปกับ URL ของหน้า ทำให้บุ๊กมาร์กหรือแชร์คอนฟิกที่เสร็จแล้วได้สะดวก

เครื่องมือที่เกี่ยวข้อง

ตารางอ้างอิง ASCII

ตาราง ASCII ครบตั้งแต่ 0 ถึง 127 พร้อมค่าเลขฐานสิบ ฐานสิบหก ฐานแปด ฐานสอง และรูปแบบการอ้างอิงอักขระแบบตัวเลขของ HTML รวม NUL, LF และ DEL

อ้างอิงตัวอักษร HTML

รายการที่สามารถค้นหาได้ขององค์ประกอบ HTML พร้อมรหัสชื่อและรหัสตัวเลข รวมถึงฟังก์ชันสำเนาด้วยคลิกเดียวสำหรับตัวอักษรพิเศษและสัญลักษณ์ต่างๆ

ตารางอ้างอิงแป้นพิมพ์ลัด

ค้นหาแป้นพิมพ์ลัดเริ่มต้นตามเอกสารของ VS Code, Chrome และ Bash ที่ใช้ GNU Readline บน macOS, Windows และ Linux

ตัวตรวจสอบความถูกต้องของ JSON

ตรวจสอบไวยากรณ์ JSON และตรวจจับเครื่องหมายจุลภาคต่อท้าย เครื่องหมายอัญประกาศที่ผิด คีย์ซ้ำ และโครงสร้างที่ผิดรูปแบบ พร้อมระบุตำแหน่งข้อผิดพลาดอย่างแม่นยำ

เครื่องมือปิดบังโค้ด JavaScript

เพื่อป้องกันส่วนฟรอนต์เอนด์ ให้ทำให้โค้ด JavaScript ซับซ้อนขึ้นโดยใช้วิธีการเข้ารหัสอาร์เรย์สตริง การเปลี่ยนชื่อตัวแปร การปรับโครงสร้างการไหลของควบคุมให้เรียบง่าย และการแทรกโค้ดที่ไม่จำเป็น

ตัวลดรูปพีชคณิตบูลีน

ประเมินนิพจน์บูลีนสำหรับทุกชุดอินพุตและดูตารางค่าความจริงที่สมบูรณ์ รองรับตัวแปรสูงสุดห้าตัวและตัวดำเนินการ &, |, !, ^

เครื่องมือนี้มีให้บริการในภาษาอื่น