TypeScript Academy · บทเรียน

เริ่มการย้ายระบบ: allowJs และ checkJs

เปิดใช้การตรวจสอบ TypeScript ในโครงการ JavaScript

บทเรียน 1 จาก 413 ขั้นตอน

เริ่มการย้ายระบบ: allowJs และ checkJs เป็นบทเรียน TypeScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน TypeScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส TypeScript Academy มีบทเรียนทั้งหมด 4 บทเรียน

ความท้าทายในการย้ายระบบ

การย้ายฐานโค้ด JavaScript ขนาดใหญ่ไปเป็น TypeScript ทั้งหมดในครั้งเดียวมีความเสี่ยง แนวทางแบบค่อยเป็นค่อยไปคือ เปิดใช้ TypeScript ทีละน้อยทีละไฟล์ โดยยังคงให้โครงการทำงานได้

# Key compiler flags for gradual migration:
# allowJs — allow .js files in the compilation
# checkJs — type-check .js files with JSDoc types

ขั้นตอนที่ 1: ติดตั้ง TypeScript

เพิ่ม TypeScript ลงในโครงการและสร้าง tsconfig ขั้นต่ำ โดยยังไม่เปิดใช้โหมดเข้มงวดในช่วงแรก

npm install --save-dev typescript
npx tsc --init
# Edit tsconfig.json to set allowJs: true

allowJs: true

เมื่อใช้ allowJs: true TypeScript จะรวมไฟล์ .js ไว้ในการคอมไพล์ การตรวจสอบชนิดข้อมูลจะผ่อนปรน โดย JavaScript ส่วนใหญ่จะคอมไพล์ได้โดยไม่มีข้อผิดพลาด

{
  "compilerOptions": {
    "allowJs": true,
    "outDir": "./dist",
    "target": "ES2020"
  },
  "include": ["src"]
}

checkJs: true

checkJs: true จะเปิดใช้การตรวจสอบชนิดข้อมูลสำหรับไฟล์ JavaScript โดยใช้ชนิดข้อมูลที่อนุมานได้และคำกำกับ JSDoc การตั้งค่านี้จะแสดงข้อผิดพลาดที่เห็นได้ชัดโดยไม่ต้องแปลงไฟล์เป็น .ts

{
  "compilerOptions": {
    "allowJs": true,
    "checkJs": true
  }
}

ระงับข้อผิดพลาดด้วย @ts-nocheck

เพิ่ม // @ts-nocheck ไว้ที่ด้านบนของไฟล์ JS ที่มีปัญหา เพื่อระงับข้อผิดพลาด TypeScript ทั้งหมดขณะค่อย ๆ ย้ายระบบ

// @ts-nocheck
// This file is not yet migrated — errors suppressed
function legacyUtil(x) { return x.foo.bar; }

ระงับข้อผิดพลาดรายบรรทัด

ใช้ // @ts-ignore เพื่อระงับข้อผิดพลาดในบรรทัดเดียว โดยไม่ปิดการตรวจสอบทั้งไฟล์

const result = legacyFn(value); // @ts-ignore
// Only this line's error is suppressed

maxNodeModuleJsDepth

ตามค่าเริ่มต้น TypeScript จะตรวจสอบไฟล์ JS เฉพาะในโครงการของคุณ ตั้งค่า maxNodeModuleJsDepth เพื่อควบคุมความลึกในการตรวจสอบ JS ภายใน node_modules

{
  "compilerOptions": {
    "maxNodeModuleJsDepth": 1 // Check 1 level deep in node_modules
  }
}

คอมไพล์ JS ไปยัง Dist

เมื่อใช้ allowJs คอมไพเลอร์ TypeScript สามารถแปลงไฟล์ JS ได้เช่นกัน ซึ่งมีประโยชน์สำหรับการใช้โพลีฟิลล์และกำหนดเป้าหมายสภาพแวดล้อมรุ่นเก่าอย่างสม่ำเสมอ

tsc
# Compiles both .ts and .js files to dist/

วัดความคืบหน้า

ติดตามความคืบหน้าในการย้ายระบบโดยนับจำนวนไฟล์ .js เทียบกับไฟล์ .ts และตั้งเป้าหมายเปอร์เซ็นต์ของไฟล์ที่จะแปลงในแต่ละรอบการพัฒนา

find src -name "*.ts" | wc -l   # TypeScript files
find src -name "*.js" | wc -l   # JavaScript files remaining

หลีกเลี่ยงการถดถอยของชนิดข้อมูล

ตั้งค่า noImplicitAny: false ไว้ในช่วงแรก เพื่อไม่ให้ไฟล์ JS เดิมมีข้อผิดพลาดจำนวนมาก เปิดใช้การตั้งค่านี้หลังจากแปลงแต่ละไฟล์เป็น TypeScript แล้ว

{
  "compilerOptions": {
    "allowJs": true,
    "noImplicitAny": false // Relax for JS files; enable per .ts file
  }
}

ทบทวน: เริ่มต้นการย้ายระบบ

เริ่มย้ายระบบด้วย allowJs: true และ checkJs: true ใช้ @ts-nocheck กับไฟล์ที่ยังไม่พร้อม และติดตามความคืบหน้าด้วยจำนวนไฟล์ วิธีนี้ช่วยให้โครงการยังคงคอมไพล์ได้ขณะแปลงไฟล์ทีละน้อย

ตรวจสอบความเข้าใจอย่างรวดเร็ว

checkJs: true ทำอะไรโดยไม่ต้องแปลง .js เป็น .ts?

ตอบคำถามในบทเรียนแบบโต้ตอบ

สิ่งที่คุณได้เรียนรู้

เริ่มย้ายระบบจาก JS ไป TS ด้วย allowJs: true และเลือกเปิดใช้ checkJs: true ได้ ใช้ @ts-nocheck เพื่อปิดเสียงข้อผิดพลาดในไฟล์ที่ยังไม่พร้อม แล้วแปลงไฟล์ทีละน้อยพร้อมติดตามความคืบหน้าด้วยจำนวนไฟล์

เริ่มต้นได้ฟรี

เรียนรู้ TypeScript ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส: 101
บทเรียน: 352

เริ่มเรียนฟรี ดูหลักสูตรเต็ม

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

บทเรียน “เริ่มการย้ายระบบ: allowJs และ checkJs” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “เริ่มการย้ายระบบ: allowJs และ checkJs” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส TypeScript Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส TypeScript Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “เริ่มการย้ายระบบ: allowJs และ checkJs”

เปิดใช้การตรวจสอบ TypeScript ในโครงการ JavaScript คุณปฏิบัติ TypeScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน TypeScript Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน TypeScript Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน

บทเรียน “เริ่มการย้ายระบบ: allowJs และ checkJs” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน TypeScript Academy นี้ได้ไหม

ได้ บทเรียน TypeScript Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ TypeScript Academy