กลยุทธ์การแปลงทีละไฟล์
เปลี่ยนชื่อ .js เป็น .ts ทีละน้อยโดยไม่ทำให้สิ่งใดเสียหาย
กลยุทธ์การแปลงทีละไฟล์ เป็นบทเรียน TypeScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน TypeScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส TypeScript Academy มีบทเรียนทั้งหมด 4 บทเรียน
แนวทางแบบค่อยเป็นค่อยไป
การแปลงทีละไฟล์จะเปลี่ยนชื่อ .js เป็น .ts ทีละไฟล์ พร้อมแก้ไขข้อผิดพลาดชนิดข้อมูลไปด้วย วิธีนี้ช่วยให้โครงการยังคงคอมไพล์ได้ในทุกขั้นตอน
# Step 1: rename
mv src/utils.js src/utils.ts
# Step 2: fix errors
npx tsc --noEmit
# Step 3: commit and repeatเลือกจุดเริ่มต้น
เริ่มจากโมดูลปลายทาง ซึ่งเป็นไฟล์ที่ไม่มีการนำเข้าจากไฟล์อื่นในโครงการ ไฟล์เหล่านี้ไม่มีการพึ่งพา TypeScript ที่อยู่ถัดลงไปซึ่งต้องจัดการก่อน
# Find files with fewest imports from other project files:
grep -r "from './" src --include="*.js" | sort | uniq -c | sort -n
# Convert lowest-count files firstจัดการข้อผิดพลาด any โดยปริยาย
เมื่อเปลี่ยนชื่อไฟล์ JS เป็น .ts พารามิเตอร์ที่ไม่มีชนิดข้อมูลจะกลายเป็นข้อผิดพลาด any โดยปริยาย หากตั้งค่า noImplicitAny: true ให้เพิ่มชนิดข้อมูลอย่างชัดเจน หรือใช้ any ชั่วคราว
// Before: JS
function process(data) { return data.value; }
// After: TS (add annotation)
function process(data: { value: string }) { return data.value; }
// Or temporarily:
function process(data: any) { return data.value; }ระงับข้อผิดพลาดชั่วคราว
ใช้ // @ts-ignore กับบรรทัดที่แก้ไขได้ยาก และติดตามบรรทัดเหล่านั้นเป็น TODO เพื่อไม่ให้ถูกลืม
// TODO: type this properly in follow-up PR
// @ts-ignore
const result = complexLegacyFunction(x);อัปเดตคำสั่งนำเข้า
เมื่อไฟล์กลายเป็น .ts ส่วนที่เรียกใช้ไฟล์นั้นอาจต้องอัปเดตการนำเข้า TypeScript จะค้นหาไฟล์ .ts โดยอัตโนมัติ แม้ไม่มีนามสกุลไฟล์ในเส้นทางการนำเข้า
// No extension needed — TypeScript finds .ts
import { process } from "./utils";แปลงคำสั่ง require ของบุคคลที่สาม
แทนที่การเรียก require ของ CommonJS ด้วยไวยากรณ์ import ของโมดูล ES ระหว่างการแปลง เพื่อให้สอดคล้องกับการแก้ไขเส้นทางโมดูลของ TypeScript
// Before: CommonJS
const fs = require("fs");
// After: ES module
import fs from "fs";การเพิ่มระดับโหมดเข้มงวด
เปิดใช้แฟล็กโหมดเข้มงวดทีละน้อยในแต่ละไฟล์ โดยใช้ความคิดเห็น // @ts-strict-ignore รายไฟล์ หรือย้ายไปใช้ tsconfig แยกที่เปิดโหมดเข้มงวด
// tsconfig.strict.json — points to converted files only
{
"extends": "./tsconfig.json",
"compilerOptions": { "strict": true },
"include": ["src/converted/**/*"]
}ติดตามไฟล์ที่เหลือ
จัดทำรายการตรวจสอบหรือใช้สคริปต์เพื่อนับไฟล์ .js ที่เหลือ และติดตามความคืบหน้าในการย้ายระบบเมื่อเวลาผ่านไป
find src -name "*.js" | wc -l # remaining JS files
find src -name "*.ts" | wc -l # converted TS filesหลีกเลี่ยง PR ขนาดใหญ่
แปลงไฟล์ละหนึ่งไฟล์ต่อ PR เพื่อให้การตรวจสอบทำได้ง่าย การย้ายระบบ TypeScript ขนาดใหญ่จะตรวจสอบและย้อนกลับได้ง่ายขึ้นเมื่อจำกัดขอบเขตไว้ที่ไฟล์แต่ละไฟล์
# Good: one file per PR
# Bad: 50 files renamed in one PRเรียกใช้การทดสอบหลังการแปลงแต่ละครั้ง
เรียกใช้ชุดการทดสอบหลังแปลงแต่ละไฟล์ เพื่อค้นหาการถดถอยขณะทำงานที่ตัวตรวจสอบชนิดข้อมูลของ TypeScript อาจตรวจไม่พบ
npm test
# Ensure all tests pass after each .js → .ts renameทบทวน: กลยุทธ์ทีละไฟล์
แปลงไฟล์โมดูลปลายทางก่อน แก้ไขหรือระงับข้อผิดพลาด ให้โครงการคอมไพล์ได้ในทุกขั้นตอน ติดตามไฟล์ JS ที่เหลือ และส่งไฟล์ละหนึ่งไฟล์ต่อ PR เพื่อให้ตรวจสอบได้ง่าย
ตรวจสอบความเข้าใจอย่างรวดเร็ว
ในการย้ายระบบทีละไฟล์ ควรแปลงไฟล์ใดเป็น TypeScript ก่อน?
สิ่งที่คุณได้เรียนรู้
การย้ายระบบทีละไฟล์: เริ่มจากโมดูลปลายทาง เปลี่ยนชื่อเป็น .ts แก้ไขหรือระงับข้อผิดพลาด ให้โครงการคอมไพล์ได้ และติดตามความคืบหน้า การแปลงขนาดเล็กแยกตาม PR ทำให้การย้ายระบบปลอดภัยและตรวจสอบได้ง่าย
คำถามที่พบบ่อย
บทเรียน “กลยุทธ์การแปลงทีละไฟล์” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “กลยุทธ์การแปลงทีละไฟล์” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส TypeScript Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส TypeScript Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “กลยุทธ์การแปลงทีละไฟล์”
เปลี่ยนชื่อ .js เป็น .ts ทีละน้อยโดยไม่ทำให้สิ่งใดเสียหาย คุณปฏิบัติ TypeScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน TypeScript Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน TypeScript Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน
บทเรียน “กลยุทธ์การแปลงทีละไฟล์” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน TypeScript Academy นี้ได้ไหม
ได้ บทเรียน TypeScript Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- เริ่มการย้ายระบบ: allowJs และ checkJs
- คำอธิบายชนิด JSDoc ในฐานะสะพานเชื่อม
- กลยุทธ์การแปลงทีละไฟล์
- การจัดการไลบรารีภายนอกที่ไม่มีชนิด