ES Modules (แบบระบุชื่อเทียบกับค่าเริ่มต้น) และการส่งออกซ้ำ
ทำความเข้าใจการส่งออกและนำเข้าแบบระบุชื่อเทียบกับแบบค่าเริ่มต้น และเรียนรู้การส่งออกซ้ำเพื่อสร้างขอบเขตโมดูลที่เป็นระเบียบ
ES Modules (แบบระบุชื่อเทียบกับค่าเริ่มต้น) และการส่งออกซ้ำ เป็นบทเรียน TypeScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 3 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน TypeScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส TypeScript Academy มีบทเรียนทั้งหมด 3 บทเรียน
บทนำ
เป้าหมาย: ใช้โมดูล ES ได้อย่างมั่นใจ คุณจะส่งออกและนำเข้าองค์ประกอบที่ระบุชื่อและค่าเริ่มต้น จากนั้นประกอบเข้าด้วยกันด้วยการส่งออกซ้ำเพื่อสร้างส่วนเชื่อมต่อสาธารณะที่เป็นระเบียบ
การส่งออกและนำเข้าแบบระบุชื่อ
การส่งออกแบบระบุชื่อ ใช้ export ไว้หน้าการประกาศ และนำเข้าโดยใช้วงเล็บปีกกา: import { name }
// file: math.ts
export function add(a: number, b: number): number { return a + b }
export const PI = 3.14159
// file: app.ts
import { add, PI } from "./math"
console.log(add(2, 3), PI) // 5 3.14159การส่งออกและนำเข้าค่าเริ่มต้น
การส่งออกค่าเริ่มต้น คือค่าหลักของโมดูล ให้นำเข้าโดย ไม่ใช้ วงเล็บปีกกา: import Foo from "./mod"
// file: greet.ts
export default function greet(name: string) { console.log(`Hello, ${name}`) }
// file: app.ts
import greet from "./greet"
greet("Ada")ค่าเริ่มต้นร่วมกับแบบระบุชื่อ
คุณสามารถรวม ค่าเริ่มต้น หนึ่งรายการกับการส่งออกแบบ ระบุชื่อ หลายรายการไว้ในโมดูลเดียว แล้วนำเข้าทั้งสองแบบพร้อมกันได้
// file: color.ts
export default "black"
export const palette = [ "red", "green", "blue" ]
// file: app.ts
import baseColor, { palette } from "./color"
console.log(baseColor, palette.length)การส่งออกซ้ำ (ชุดรวมการส่งออก)
การส่งออกซ้ำ (export { x } from / export * from) จะสร้าง ชุดรวมการส่งออก ทำให้ผู้ใช้สามารถนำเข้าจากจุดเริ่มต้นเดียวได้
// file: math/add.ts
export const add = (a: number, b: number) => a + b
// file: math/index.ts (barrel)
export { add } from "./add"
export * from "./more"
// file: app.ts
import { add } from "./math"
console.log(add(1, 2))เคล็ดลับและข้อควรระวัง
เคล็ดลับ:
- ควรใช้ การส่งออกแบบระบุชื่อ เพื่อให้ค้นหาได้ง่ายและเปลี่ยนชื่อได้อย่างสอดคล้องกัน
- ใช้ การส่งออกค่าเริ่มต้น สำหรับสิ่งหลักเพียงรายการเดียวของโมดูล
- สร้าง ชุดรวมการส่งออก ที่ขอบเขตของแพ็กเกจ และหลีกเลี่ยงการนำเข้าที่วนเป็นวงกลม
ตรวจสอบการนำเข้าค่าเริ่มต้น
ตรวจสอบอย่างรวดเร็ว: การนำเข้าแบบใดตรงกับการส่งออกค่าเริ่มต้น
สรุป
สรุป: ใช้การส่งออกแบบ ระบุชื่อ สำหรับการส่งออกหลายรายการ ใช้แบบ ค่าเริ่มต้น สำหรับค่าหลักเพียงรายการเดียว และใช้ การส่งออกซ้ำ เพื่อจัดเตรียมจุดเริ่มต้นที่เป็นระเบียบ
คำถามที่พบบ่อย
บทเรียน “ES Modules (แบบระบุชื่อเทียบกับค่าเริ่มต้น) และการส่งออกซ้ำ” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “ES Modules (แบบระบุชื่อเทียบกับค่าเริ่มต้น) และการส่งออกซ้ำ” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส TypeScript Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส TypeScript Academy มีบทเรียนทั้งหมด 3 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “ES Modules (แบบระบุชื่อเทียบกับค่าเริ่มต้น) และการส่งออกซ้ำ”
ทำความเข้าใจการส่งออกและนำเข้าแบบระบุชื่อเทียบกับแบบค่าเริ่มต้น และเรียนรู้การส่งออกซ้ำเพื่อสร้างขอบเขตโมดูลที่เป็นระเบียบ คุณปฏิบัติ TypeScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน TypeScript Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน TypeScript Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 3 บทเรียน
บทเรียน “ES Modules (แบบระบุชื่อเทียบกับค่าเริ่มต้น) และการส่งออกซ้ำ” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน TypeScript Academy นี้ได้ไหม
ได้ บทเรียน TypeScript Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- ES Modules (แบบระบุชื่อเทียบกับค่าเริ่มต้น) และการส่งออกซ้ำ
- การประกาศแบบแอมเบียนต์ (.d.ts) และการกำหนดชนิดข้อมูลจากบุคคลที่สาม
- การแมปเส้นทางและการแก้ไขโมดูล