TypeScript Academy · บทเรียน

การซ้อนชั้นการกำหนดค่าและค่าเริ่มต้น

ผสานค่าเริ่มต้น ไฟล์ และค่าจากสภาพแวดล้อมที่เขียนทับ

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

การกำหนดค่าเป็นชั้น

แอปจริงประกอบการกำหนดค่าจากหลายแหล่ง ได้แก่ค่าเริ่มต้นในตัว ไฟล์การกำหนดค่า และการเขียนทับจากสภาพแวดล้อม ชั้นที่อยู่ภายหลังจะเขียนทับชั้นก่อนหน้าตามลำดับความสำคัญที่กำหนด

ลำดับความสำคัญ

ลำดับทั่วไปจากความสำคัญต่ำไปสูงคือ ค่าเริ่มต้น < การกำหนดค่าจากไฟล์ < ตัวแปรสภาพแวดล้อม การเขียนทับจากสภาพแวดล้อมมีชัย เพราะเหมาะกับการปรับค่าเฉพาะในการนำไปใช้งานแต่ละครั้ง

กำหนดชั้นต่าง ๆ

แต่ละชั้นเป็นการกำหนดค่าบางส่วน เฉพาะค่าเริ่มต้นพื้นฐานเท่านั้นที่ต้องครบถ้วน ส่วนชั้นอื่นจะเติมหรือเขียนทับเฉพาะฟิลด์ที่เลือก

interface Config { port: number; host: string; logLevel: string; }
const defaults: Config = { port: 3000, host: "localhost", logLevel: "info" };

การเขียนทับบางส่วน

ชั้นจากไฟล์และ env มีประเภทเป็น Partial<Config> เนื่องจากอาจระบุเพียงบางคีย์ การระบุประเภทเป็นบางส่วนสะท้อนว่าฟิลด์ใด ๆ อาจไม่มีอยู่

const fileConfig: Partial<Config> = { port: 8080 };
const envConfig: Partial<Config> = { logLevel: "debug" };

การผสานแบบตื้น

สำหรับการกำหนดค่าแบบแบน การผสานด้วยสเปรดจะใช้ลำดับความสำคัญได้อย่างชัดเจน ออบเจ็กต์ที่อยู่ภายหลังจะเขียนทับคีย์ก่อนหน้า ทำให้ได้การกำหนดค่าสุดท้าย

const config: Config = { ...defaults, ...fileConfig, ...envConfig };
// { port: 8080, host: "localhost", logLevel: "debug" }

เหตุใดลำดับจึงสำคัญ

เนื่องจากสเปรดใช้ค่าของรายการที่อยู่ภายหลังเป็นหลัก แหล่งข้อมูลที่ระบุไว้ท้ายสุดจึงมีความสำคัญสูงสุด หากสลับลำดับสเปรด คุณก็จะเปลี่ยนว่าชั้นใดเขียนทับชั้นใด

การกำหนดค่าแบบซ้อนต้องใช้การผสานแบบลึก

สเปรดแบบตื้นจะแทนที่ออบเจ็กต์ซ้อนทั้งก้อน หากการกำหนดค่ามีส่วนที่ซ้อนกัน คุณต้องใช้การผสานแบบลึกที่รวมส่วนเหล่านั้นแบบเวียนเกิด แทนการเขียนทับ

interface Config { db: { host: string; port: number }; }
// { ...a, ...b } would replace the entire db object, losing keys.

การผสานแบบลึกที่มีการระบุประเภท

การผสานแบบเวียนเกิดจะเดินผ่านออบเจ็กต์ทั้งสอง โดยลงไปในเรกคอร์ดที่ซ้อนกันและเขียนทับค่าปลายทาง การระบุประเภทผลลัพธ์ต้องใช้ตัวช่วยประเภทแบบเวียนเกิด

type DeepPartial<T> = { [K in keyof T]?: DeepPartial<T[K]> };
function deepMerge<T>(base: T, over: DeepPartial<T>): T {
  const out: any = { ...base };
  for (const k in over) {
    const v = (over as any)[k];
    out[k] = v && typeof v === "object" ? deepMerge((base as any)[k], v) : v;
  }
  return out;
}

DeepPartial สำหรับชั้นการเขียนทับ

ชั้นการเขียนทับมีประเภทเป็น DeepPartial<Config> จึงสามารถระบุชุดย่อยใด ๆ ของคีย์ที่ซ้อนกันได้ พร้อมยังคงตรวจสอบประเภทเทียบกับโครงสร้างทั้งหมด

const override: DeepPartial<Config> = { db: { port: 5433 } };
// merges into db without dropping db.host

ผสานเข้ากับการตรวจสอบ

ผสานก่อน แล้วตรวจสอบผลลัพธ์ด้วยสคีมา วิธีนี้ทำให้การกำหนดค่าฉบับสุดท้ายที่แก้ค่าเสร็จสมบูรณ์เป็นสิ่งที่ถูกตรวจสอบความถูกต้อง

// const merged = deepMerge(defaults, override);
// const config = ConfigSchema.parse(merged);

แนวทางปฏิบัติที่ดีในการแบ่งชั้น

ทำให้ค่าเริ่มต้นครบถ้วนและปลอดภัย ให้ไฟล์ใช้แสดงการตั้งค่าเฉพาะของแต่ละสภาพแวดล้อม และสงวนตัวแปร env ไว้สำหรับข้อมูลลับกับการเขียนทับเฉพาะการนำไปใช้งานแต่ละครั้งที่อยู่บนสุดของลำดับความสำคัญ

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

ตรวจสอบความเข้าใจสั้น ๆ เกี่ยวกับบทเรียนนี้

ทบทวน

การกำหนดค่าแบบแบ่งชั้นผสานค่าเริ่มต้น การกำหนดค่าจากไฟล์ และการเขียนทับจาก env ตามลำดับความสำคัญ (ค่าเริ่มต้น < ไฟล์ < env) การกำหนดค่าแบบแบนใช้สเปรด ส่วนการกำหนดค่าแบบซ้อนต้องใช้การผสานแบบลึกที่ระบุประเภทด้วย DeepPartial<Config> จากนั้นตรวจสอบผลลัพธ์ที่ผสานแล้ว

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

บทเรียน “การซ้อนชั้นการกำหนดค่าและค่าเริ่มต้น” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “การซ้อนชั้นการกำหนดค่าและค่าเริ่มต้น”

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

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

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

บทเรียน “การซ้อนชั้นการกำหนดค่าและค่าเริ่มต้น” ใช้เวลานานแค่ไหน

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

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

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

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

← กลับไปที่ TypeScript Academy