TypeScript Academy · บทเรียน

รูปแบบการแยกโครงสร้างที่ซ้อนกัน

กำหนดชนิดข้อมูลของนิพจน์การแยกโครงสร้างที่ซ้อนกันลึก

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

การเข้าถึงข้อมูลที่ซ้อนกัน

การแยกโครงสร้างแบบซ้อนกันจะดึงค่าจากออบเจ็กต์ภายในออบเจ็กต์ด้วยคำสั่งเดียว รูปแบบนี้กระชับ แต่มีปฏิสัมพันธ์กับชนิดในลักษณะที่ควรทำความเข้าใจ และอาจทำให้อ่านยากหากใช้มากเกินไป

การแยกโครงสร้างคุณสมบัติที่ซ้อนกัน

จำลองโครงสร้างของออบเจ็กต์ไว้ทางด้านซ้าย หากต้องการเข้าถึง data.user.name ให้ซ้อนรูปแบบไว้ภายใต้ user

const data = { user: { name: "Ada", age: 36 } }
const { user: { name } } = data
console.log(name) // Ada

ชื่อด้านนอกไม่ได้ถูกผูกเป็นตัวแปร

ข้อควรระวังเล็กน้อยคือ ใน { user: { name } } user เป็นเพียงเส้นทาง ไม่ใช่การผูกตัวแปร คุณจะได้ name แต่หลังจากนั้นจะไม่มีตัวแปรชื่อ user อยู่

const data = { user: { name: "Ada" } }
const { user: { name } } = data
console.log(name) // Ada
// console.log(user) // Error: user is not defined

การระบุชนิดให้การแยกโครงสร้างแบบซ้อนกัน

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

const { user: { name } }: { user: { name: string } } = {
  user: { name: "Leo" },
}
console.log(name)

ชนิดที่ตั้งชื่อไว้อ่านได้ดีกว่า

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

interface Data { user: { name: string; age: number } }
function show({ user: { name, age } }: Data) {
  console.log(name + " " + age)
}
show({ user: { name: "Ada", age: 36 } })

การดึงข้อมูลทั้งสองระดับ

หากต้องการใช้ออบเจ็กต์ด้านนอกด้วย ให้ดึงออกมาแยกต่างหากก่อน แล้วจึงแยกโครงสร้างสมาชิกของออบเจ็กต์ในอีกขั้นตอนหนึ่ง วิธีนี้มักชัดเจนกว่าการซ้อนกันลึก ๆ

interface Data { user: { name: string } }
const data: Data = { user: { name: "Ada" } }
const { user } = data
const { name } = user
console.log(user, name)

การใช้การซ้อนกันร่วมกับค่าเริ่มต้น

ค่าเริ่มต้นสามารถปรากฏได้ในทุกระดับ กำหนดค่าสำรองให้ฟิลด์ที่ซ้อนกันซึ่งอาจไม่มีค่าได้ตรงจุดที่ผูกตัวแปร

interface Opts { theme?: { color?: string } }
function style({ theme: { color = "black" } = {} }: Opts = {}) {
  return color
}
console.log(style()) // black

กำหนดค่าเริ่มต้นให้ออบเจ็กต์ย่อยที่หายไป

เมื่อออบเจ็กต์ย่อยทั้งหมดอาจไม่มีอยู่ ให้กำหนดค่าเริ่มต้นเป็น {} ก่อนแยกโครงสร้างฟิลด์ของออบเจ็กต์นั้น มิฉะนั้นการเข้าถึงคุณสมบัติของ undefined จะทำให้เกิดข้อผิดพลาด

interface Cfg { db?: { host?: string } }
const { db: { host = "localhost" } = {} }: Cfg = {}
console.log(host) // localhost

อาร์เรย์ซ้อนอยู่ภายในออบเจ็กต์

คุณสามารถผสมรูปแบบออบเจ็กต์กับรูปแบบอาร์เรย์ได้ ในที่นี้เราดึงแท็กแรกจากอาร์เรย์ที่ซ้อนกันออกมาในบรรทัดเดียว

const post = { meta: { tags: ["ts", "js"] } }
const { meta: { tags: [firstTag] } } = post
console.log(firstTag) // ts

ข้อแลกเปลี่ยนด้านความอ่านง่าย

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

// Hard to read:
// const { a: { b: { c = 0 } = {} } = {} } = obj
// Clearer:
// const a = obj.a ?? {}
// const c = a.b?.c ?? 0

ตัวอย่างที่สมดุล

การซ้อนกันหนึ่งระดับกับฟิลด์สองสามรายการมักเป็นจุดสมดุลที่ดี กระชับโดยไม่ทำให้เข้าใจยาก

interface Resp { data: { id: number; title: string } }
function render({ data: { id, title } }: Resp) {
  return id + ": " + title
}
console.log(render({ data: { id: 1, title: "Hi" } }))

ตรวจสอบความเข้าใจสั้น ๆ

ทดสอบความเข้าใจเกี่ยวกับการแยกโครงสร้างแบบซ้อนกัน

สรุปทบทวน

การแยกโครงสร้างแบบซ้อนกันจะจำลองโครงสร้างของออบเจ็กต์เพื่อเข้าถึงค่าด้านใน คีย์ด้านนอกเป็นเส้นทาง ไม่ใช่การผูกตัวแปร ดังนั้นมีเพียงชื่อด้านในสุดเท่านั้นที่กลายเป็นตัวแปร ให้ระบุชนิดด้วยโครงสร้างแบบซ้อนกันทั้งหมดหรือชนิดที่ตั้งชื่อไว้ กำหนดค่าเริ่มต้นเป็น {} ให้ออบเจ็กต์ย่อยที่หายไปก่อนแยกโครงสร้างฟิลด์ และผสมรูปแบบอาร์เรย์ได้ตามต้องการ ควรรักษาระดับการซ้อนกันให้ตื้น หากรูปแบบซ้อนกันลึก ให้แบ่งเป็นหลายขั้นตอนเพื่อให้อ่านง่าย

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

บทเรียน “รูปแบบการแยกโครงสร้างที่ซ้อนกัน” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “รูปแบบการแยกโครงสร้างที่ซ้อนกัน”

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

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

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

บทเรียน “รูปแบบการแยกโครงสร้างที่ซ้อนกัน” ใช้เวลานานแค่ไหน

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

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

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

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

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