อธิบายการอ้างอิงโครงการ TypeScript
ใช้การตั้งค่า composite และ references สำหรับการบิลด์หลายแพ็กเกจ
อธิบายการอ้างอิงโครงการ TypeScript เป็นบทเรียน TypeScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน TypeScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส TypeScript Academy มีบทเรียนทั้งหมด 4 บทเรียน
การอ้างอิงโครงการคืออะไร
การอ้างอิงโครงการช่วยให้คุณแบ่งฐานโค้ด TypeScript ออกเป็นโครงการ tsconfig หลายโครงการที่ประกาศการพึ่งพากันเอง ทำให้สร้างโครงการแบบเพิ่มทีละส่วนและแยกออกจากกันได้
// tsconfig.json (root)
{
"references": [
{ "path": "./packages/core" },
{ "path": "./packages/ui" }
]
}โครงการแบบผสม
โครงการที่ถูกอ้างอิงแต่ละโครงการต้องมี "composite": true ใน tsconfig ซึ่งเปิดใช้การแคชคำประกาศและการติดตามการพึ่งพา
// packages/core/tsconfig.json
{
"compilerOptions": {
"composite": true,
"declaration": true,
"outDir": "./dist"
}
}การสร้างด้วย tsc --build
เรียกใช้ tsc --build (หรือ tsc -b) จากโฟลเดอร์รากเพื่อสร้างโครงการที่ถูกอ้างอิงทั้งหมดตามลำดับการพึ่งพา
# Build all projects
tsc --build
# Build and watch
tsc --build --watch
# Clean build outputs
tsc --build --cleanการสร้างใหม่แบบเพิ่มทีละส่วน
หลังจากการสร้างครั้งแรก tsc --build จะคอมไพล์ใหม่เฉพาะโครงการที่ไฟล์ต้นฉบับหรือการพึ่งพามีการเปลี่ยนแปลงเท่านั้น ทำให้รีโพขนาดใหญ่ทำงานเร็วขึ้นอย่างมาก
# Only changed packages are rebuilt
tsc --build
# Output: 2/5 projects up to date — skippingการใช้งานไฟล์ประกาศชนิดข้อมูล
โครงการที่ถูกอ้างอิงจะใช้งานการพึ่งพาผ่านไฟล์ .d.ts ที่สร้างขึ้นใน dist/ แทนการวิเคราะห์ไฟล์ต้นฉบับ TypeScript ใหม่
// packages/ui imports from packages/core
import { Button } from "@myapp/core"; // resolved via dist/index.d.tsการกำหนดค่าเส้นทาง
ตั้งค่า paths ใน tsconfig ระดับราก หรือใช้ exports ใน package.json เพื่อให้ TypeScript แก้ไขการนำเข้าแพ็กเกจได้อย่างถูกต้องระหว่างการพัฒนา
{
"compilerOptions": {
"paths": {
"@myapp/core": ["./packages/core/src/index.ts"]
}
}
}การรักษาลำดับการสร้าง
TypeScript จะกำหนดลำดับการสร้างจากกราฟการอ้างอิงโดยอัตโนมัติ การอ้างอิงแบบวนกลับจะถูกตรวจพบและรายงานเป็นข้อผิดพลาด
// Circular reference error example:
// packages/core references packages/ui
// packages/ui references packages/core
// Error: Circular project referenceoutDir และ rootDir
โครงการแบบผสมแต่ละโครงการควรกำหนดค่า outDir และ rootDir เพื่อควบคุมโครงสร้างผลลัพธ์และป้องกันไม่ให้ไฟล์รั่วข้ามขอบเขตแพ็กเกจ
{
"compilerOptions": {
"rootDir": "./src",
"outDir": "./dist"
}
}การผสานรวมกับเครื่องมือสร้าง
Turborepo, Nx และ Lerna ผสานรวมกับการอ้างอิงโครงการเพื่อแคชและสร้างโครงการแบบขนานตามกราฟการพึ่งพา
// turbo.json — declare TypeScript build as a pipeline step
{
"pipeline": {
"build": { "dependsOn": ["^build"], "outputs": ["dist/**"] }
}
}การเฝ้าดูหลายโครงการ
tsc --build --watch จะเฝ้าดูโครงการที่ถูกอ้างอิงทั้งหมดและคอมไพล์ใหม่แบบเพิ่มทีละส่วนเมื่อมีการเปลี่ยนแปลงแต่ละครั้ง ทำให้โมโนรีโปได้รับผลตอบกลับเกือบจะทันที
# Terminal: tsc --build --watch
# [9:00:01 AM] Found 0 errors. Watching for file changes.ทบทวน: การอ้างอิงโครงการ
การอ้างอิงโครงการแบ่ง TypeScript ออกเป็นหน่วยการสร้างที่แยกจากกันและแคชได้ ให้ตั้งค่า composite: true ประกาศ references และใช้ tsc --build เพื่อสร้างโครงการแบบเพิ่มทีละส่วนที่รวดเร็วและถูกต้องในโมโนรีโป
ตรวจสอบอย่างรวดเร็ว
ตัวเลือก tsconfig ใดจำเป็นสำหรับโครงการที่ต้องการให้โครงการอื่นอ้างอิง
สิ่งที่ได้เรียนรู้
การอ้างอิงโครงการของ TypeScript ช่วยให้สร้างโมโนรีโปได้อย่างรวดเร็วและแยกจากกัน ตั้งค่า composite: true ประกาศการพึ่งพาผ่าน references และสร้างด้วย tsc --build เพื่อคอมไพล์แบบเพิ่มทีละส่วน
คำถามที่พบบ่อย
บทเรียน “อธิบายการอ้างอิงโครงการ TypeScript” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “อธิบายการอ้างอิงโครงการ TypeScript” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส TypeScript Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส TypeScript Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “อธิบายการอ้างอิงโครงการ TypeScript”
ใช้การตั้งค่า composite และ references สำหรับการบิลด์หลายแพ็กเกจ คุณปฏิบัติ TypeScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน TypeScript Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน TypeScript Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน
บทเรียน “อธิบายการอ้างอิงโครงการ TypeScript” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน TypeScript Academy นี้ได้ไหม
ได้ บทเรียน TypeScript Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- อธิบายการอ้างอิงโครงการ TypeScript
- เวิร์กสเปซ pnpm กับ TypeScript
- กลยุทธ์แพ็กเกจชนิดที่ใช้ร่วมกัน
- การบิลด์แบบเพิ่มทีละส่วนและแคชในโมโนรีโป