0Pricing
TypeScript Academy · บทเรียน

การแมปเส้นทางและการแก้ไขโมดูล

กำหนดนามแฝงเส้นทางด้วย baseUrl/paths ทำความเข้าใจว่า TS แก้ไขโมดูลอย่างไร และหลีกเลี่ยงปัญหาที่พบบ่อย

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

บทนำ

เป้าหมาย: แทนที่การนำเข้าแบบสัมพันธ์ที่ยาวด้วย นามแฝงเส้นทาง และทำความเข้าใจกฎ การค้นหาโมดูล ของ TypeScript`s เพื่อให้การนำเข้าเป็นระเบียบ

เส้นทางใน tsconfig

กำหนด baseUrl (รากของโปรเจกต์สำหรับการนำเข้าที่ไม่ใช่แบบสัมพันธ์) และจับคู่นามแฝงใน เส้นทาง คีย์สามารถใช้รูปแบบไวลด์การ์ด * ได้

// file: tsconfig.json (excerpt)
{
  "compilerOptions": {
    "baseUrl": "./src",
			 "paths": {
      "@utils/*": ["utils/*"],
			 "@components/*": ["components/*"]
				 }
  }
}

ใช้นามแฝง

นำเข้าโดยใช้นามแฝงให้ตรงกับที่ประกาศไว้ทุกประการ เช่น @utils/date TypeScript จะค้นหาไปยังเส้นทางที่จับคู่ไว้ใน src/

// file: src/app.ts
import { formatDate } from "@utils/date";
		import Button from "@components/Button";

		console.log(formatDate(new Date()));
		const btn = new Button();

กลยุทธ์การค้นหา

การค้นหาขึ้นอยู่กับ โมดูล (Node, NodeNext, Bundler) โดย TS จะตรวจสอบนามสกุลไฟล์ การส่งออกและชนิดข้อมูลใน package.json จากนั้นจึงย้อนกลับไปค้นหาใน node_modules

// Resolution order sketch (NodeNext/Node):
// 1) Exact file: .ts/.tsx/.d.ts/.js
// 2) Index files: index.ts / index.js
// 3) package.json exports / types
// 4) paths & baseUrl fallbacks
// 5) node_modules lookup (upwards)

export const note = "Resolution depends on module setting (Node, NodeNext, Bundler).";

การจัดให้ตรงกับตัวรวมชุด

สำคัญ: TS รู้จักนามแฝงสำหรับการตรวจสอบชนิด แต่ ตัวรวมชุด/สภาพแวดล้อมขณะทำงาน ของคุณต้องกำหนดนามแฝงเหล่านี้ด้วย เช่น Vite/Webpack/tsconfig-paths สำหรับ ts-node

// Example: vite.config.ts (alias for runtime)
		import { defineConfig } from "vite";
		import path from "path";

		export default defineConfig({
			resolve: {
			alias: {
			"@utils": path.resolve(__dirname, "src/utils"),
			"@components": path.resolve(__dirname, "src/components")
			}
			}
			});

เคล็ดลับและข้อควรระวัง

เคล็ดลับ:

  • ทำให้ baseUrl คงที่ เช่น src/
  • กำหนดนามแฝงให้ตรงกันในตัวรวมชุดและสภาพแวดล้อมขณะทำงาน
  • หลีกเลี่ยงเส้นทาง ../.. ที่ซ้อนกันลึก ควรใช้นามแฝงที่กระชับ

ตรวจสอบนามแฝงเส้นทาง

ตรวจสอบอย่างรวดเร็ว: ตัวเลือกใดใน tsconfig ที่เปิดใช้นามแฝงเส้นทางอย่าง @utils/*

สรุป

สรุป: กำหนด baseUrl และ เส้นทาง สำหรับนามแฝง เรียนรู้ลำดับการค้นหาของ TS และกำหนดตัวรวมชุด/สภาพแวดล้อมขณะทำงานให้สอดคล้องกันเพื่อหลีกเลี่ยงการนำเข้าที่เสียหาย

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

บทเรียน “การแมปเส้นทางและการแก้ไขโมดูล” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “การแมปเส้นทางและการแก้ไขโมดูล”

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

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

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

บทเรียน “การแมปเส้นทางและการแก้ไขโมดูล” ใช้เวลานานแค่ไหน

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

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

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

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

  1. ES Modules (แบบระบุชื่อเทียบกับค่าเริ่มต้น) และการส่งออกซ้ำ
  2. การประกาศแบบแอมเบียนต์ (.d.ts) และการกำหนดชนิดข้อมูลจากบุคคลที่สาม
  3. การแมปเส้นทางและการแก้ไขโมดูล
← กลับไปที่ TypeScript Academy