TypeScript Academy · บทเรียน

การส่งออกซ้ำและไฟล์รวม

สร้างไฟล์ดัชนีเพื่อทำให้เส้นทางการนำเข้าเรียบง่ายขึ้น

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

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

ยินดีต้อนรับ

ไฟล์รวมศูนย์ (index.ts) จะรวบรวมและส่งออกเนื้อหาของโมดูลซ้ำ ทำให้เกิด API สาธารณะที่เรียบง่ายสำหรับไดเรกทอรี และช่วยให้ผู้ใช้มีเส้นทางการนำเข้าที่สะอาดขึ้น

ไฟล์รวมศูนย์คืออะไร

ไฟล์รวมศูนย์คือ index.ts ที่ส่งออกทุกอย่างจากไดเรกทอรีเดียวกันซ้ำ ผู้ใช้จะนำเข้าจากไดเรกทอรีแทนการนำเข้าจากไฟล์แต่ละไฟล์
// src/models/index.ts (barrel)
export { User } from './user';
export { Product } from './product';
export { Order } from './order';

การใช้ไฟล์รวมศูนย์

นำเข้าจากไฟล์รวมศูนย์แทนไฟล์แต่ละไฟล์เพื่อให้เส้นทางสะอาดขึ้น
// Before barrel:
import { User } from '../models/user';
import { Product } from '../models/product';

// After barrel:
import { User, Product } from '../models';

การส่งออกซ้ำแบบไวลด์การ์ด export *

ส่งออกการส่งออกแบบระบุชื่อทั้งหมดจากโมดูลซ้ำด้วย `export *`
// index.ts
export * from './utils';
export * from './helpers';
export * from './validators';

การเปลี่ยนชื่อระหว่างการส่งออกซ้ำ

คุณสามารถเปลี่ยนชื่อการส่งออกขณะส่งออกซ้ำได้
export { default as MyButton } from './Button';
export { Button as Btn } from './Button';

การส่งออกซ้ำเฉพาะชนิดข้อมูล

ส่งออกชนิดข้อมูลซ้ำโดยไม่ส่งผลต่อการทำงานขณะรัน
export type { User, UserRole } from './user.types';

ไฟล์รวมศูนย์สำหรับโมดูลคุณลักษณะ

โฟลเดอร์คุณลักษณะในแอปขนาดใหญ่มักมีไฟล์รวมศูนย์ที่เปิดเผยเฉพาะส่วนสาธารณะ
// features/auth/index.ts
export { AuthProvider } from './AuthProvider';
export { useAuth } from './useAuth';
export type { AuthUser } from './types';

ความเสี่ยงจากการพึ่งพาแบบวนรอบ

ไฟล์รวมศูนย์อาจทำให้เกิดการพึ่งพาแบบวนรอบ หากไฟล์ในไฟล์รวมศูนย์เดียวกันนำเข้าซึ่งกันและกันทางอ้อมผ่าน index โปรดระมัดระวังเรื่องนี้

การตัดโค้ดที่ไม่ใช้กับไฟล์รวมศูนย์

ตัวรวมชุดสมัยใหม่ เช่น Webpack, Rollup และ Vite จะตัดการส่งออกซ้ำของไฟล์รวมศูนย์ที่ไม่ใช้จริงออก เหลือไว้เฉพาะการส่งออกที่ถูกใช้งานในชุดโปรแกรม

ไฟล์รวมศูนย์แบบลึกเทียบกับแบบตื้น

ซ้อนไฟล์รวมศูนย์ โดยให้แต่ละไดเรกทอรีย่อยมี index.ts ของตนเอง แล้วให้ไฟล์รวมศูนย์ของไดเรกทอรีแม่ส่งออกซ้ำจากไฟล์รวมศูนย์ของไดเรกทอรีย่อย
// src/index.ts
export * from './models';
export * from './services';
export * from './utils';

ไฟล์รวมศูนย์กับประสิทธิภาพของ TypeScript

ไฟล์รวมศูนย์ที่ซ้อนกันลึกอาจทำให้การคอมไพล์ TypeScript ช้าลง สำหรับโครงการขนาดใหญ่ ควรพิจารณาทำโครงสร้างให้แบนลงหรือใช้แฝงเส้นทางแทน

ตรวจสอบอย่างรวดเร็ว

ประโยชน์หลักของการใช้ไฟล์รวมศูนย์ (index.ts) คืออะไร

สรุปทบทวน

ไฟล์รวมศูนย์ (index.ts) ส่งออกจากไดเรกทอรีซ้ำเพื่อสร้างเส้นทางการนำเข้าที่สะอาด ใช้ `export *` สำหรับการส่งออกซ้ำจำนวนมาก ใช้ `export type` สำหรับชนิดข้อมูลเท่านั้น และระวังความเสี่ยงจากการพึ่งพาแบบวนรอบในโครงการขนาดใหญ่
เริ่มต้นได้ฟรี

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

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

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

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

บทเรียน “การส่งออกซ้ำและไฟล์รวม” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “การส่งออกซ้ำและไฟล์รวม”

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

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

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

บทเรียน “การส่งออกซ้ำและไฟล์รวม” ใช้เวลานานแค่ไหน

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

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

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

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

  1. ไวยากรณ์โมดูล ES: import และ export
  2. การส่งออกซ้ำและไฟล์รวม
  3. การนำเข้าและส่งออกเฉพาะชนิด
  4. เนมสเปซกับโมดูล: การใช้งานสมัยใหม่
← กลับไปที่ TypeScript Academy