TypeScript Academy · บทเรียน

ค่าเริ่มต้นในการแยกโครงสร้าง

ผสานค่าเริ่มต้นกับคำอธิบายชนิดข้อมูลอย่างปลอดภัย

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

เติมส่วนที่ขาดหาย

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

ค่าเริ่มต้นในการแยกโครงสร้างออบเจ็กต์

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

const opts: { count?: number } = {}
const { count = 0 } = opts
console.log(count) // 0

ค่าเริ่มต้นกับคุณสมบัติที่ไม่บังคับ

ค่าเริ่มต้นเข้าคู่กับคุณสมบัติที่ไม่บังคับ (?) ได้อย่างเป็นธรรมชาติ ค่าเริ่มต้นจะตัดกรณี undefined ออก ทำให้ตัวแปรที่ได้มีชนิดที่ไม่ใช่ชนิดไม่บังคับ

interface Opts { retries?: number }
function connect(opts: Opts) {
  const { retries = 3 } = opts
  // retries is number, not number | undefined
  return retries * 2
}
console.log(connect({}))

ค่าเริ่มต้นกับชนิดที่อนุมาน

หากไม่ระบุชนิด TypeScript จะอนุมานชนิดของตัวแปรจากค่าเริ่มต้น ในที่นี้ 0 ทำให้ count มีชนิดเป็น number

const settings: { count?: number; label?: string } = { label: "hi" }
const { count = 0, label = "none" } = settings
console.log(count, label) // 0 hi

มีเพียง undefined เท่านั้นที่เรียกใช้ค่าเริ่มต้น

ประเด็นเล็กน้อยที่ควรทราบคือ ค่าเริ่มต้นจะถูกใช้เฉพาะกับ undefined เท่านั้น ไม่ใช้กับค่าเท็จอื่น ๆ เช่น 0 "" หรือ null ค่าเหล่านั้นจะถูกส่งต่อไปโดยไม่เปลี่ยนแปลง

const { x = 10 } = { x: 0 }
console.log(x) // 0, not 10 — 0 is not undefined
const { y = 10 } = { y: undefined as number | undefined }
console.log(y) // 10

ค่าเริ่มต้นในพารามิเตอร์ฟังก์ชัน

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

function draw({ x = 0, y = 0 }: { x?: number; y?: number }) {
  return x + "," + y
}
console.log(draw({ x: 5 })) // 5,0

กำหนดค่าเริ่มต้นให้พารามิเตอร์ทั้งหมด

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

function draw({ x = 0, y = 0 }: { x?: number; y?: number } = {}) {
  return x + "," + y
}
console.log(draw()) // 0,0

ค่าเริ่มต้นพร้อมการเปลี่ยนชื่อ

คุณสามารถเปลี่ยนชื่อและกำหนดค่าเริ่มต้นในการผูกตัวแปรครั้งเดียวได้ โดยเปลี่ยนชื่อก่อน แล้วเพิ่มค่าเริ่มต้นหลังชื่อใหม่

const { count: total = 0 } = { } as { count?: number }
console.log(total) // 0

ค่าเริ่มต้นที่คำนวณได้

ค่าเริ่มต้นสามารถเป็นนิพจน์ใดก็ได้ แม้แต่นิพจน์ที่อ้างอิงการผูกตัวแปรก่อนหน้า ระบบจะประเมินค่าแบบเมื่อจำเป็น โดยประเมินเฉพาะเมื่อค่าขาดหายจริง ๆ

function make({ width = 100, height = width }: { width?: number; height?: number } = {}) {
  return width + "x" + height
}
console.log(make({ width: 50 })) // 50x50

สรุปค่าเริ่มต้นในอาร์เรย์

ค่าเริ่มต้นใช้กับการแยกโครงสร้างอาร์เรย์ได้เช่นกัน โดยจะใช้แยกกันในแต่ละตำแหน่งเมื่อสมาชิกไม่มีอยู่หรือเป็น undefined

const [a = 1, b = 2, c = 3] = [10, undefined]
console.log(a, b, c) // 10 2 3

ช่วงที่ค่าเริ่มต้นมีประโยชน์อย่างยิ่ง

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

interface Config { debug?: boolean; level?: number }
const init = ({ debug = false, level = 1 }: Config = {}) => debug ? level : 0
console.log(init({ debug: true, level: 5 }))

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

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

สรุปทบทวน

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

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

บทเรียน “ค่าเริ่มต้นในการแยกโครงสร้าง” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “ค่าเริ่มต้นในการแยกโครงสร้าง” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ 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