TypeScript Academy · บทเรียน

ชนิดข้อมูลของการแยกโครงสร้างออบเจ็กต์

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

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

การแยกโครงสร้างพบกับชนิดข้อมูล

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

การแยกโครงสร้างออบเจ็กต์พื้นฐาน

การแยกโครงสร้างแบบปกติจะดึงพร็อพเพอร์ตีตามชื่อ TypeScript จะอนุมานชนิดของตัวแปรแต่ละตัวจากออบเจ็กต์ต้นทาง

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

การใส่คำอธิบายชนิดให้รูปแบบทั้งหมด

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

const { name, age }: { name: string; age: number } = {
  name: "Leo",
  age: 5,
}
console.log(name, age)

การแยกโครงสร้างพารามิเตอร์ของฟังก์ชัน

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

function greet({ name }: { name: string }) {
  return "Hi " + name
}
console.log(greet({ name: "Sam" }))

จุดหลอกที่ทำให้สับสนเรื่องโคลอน

ในการแยกโครงสร้าง โคลอนหมายถึงการเปลี่ยนชื่อ ไม่ใช่การใส่คำอธิบายชนิด การเขียน { name: string } จะสร้างตัวแปรชื่อ string ซึ่งเก็บค่าของ name ไว้ ซึ่งแทบไม่เคยเป็นสิ่งที่คุณต้องการ

const user = { name: "Ada" }
const { name: renamed } = user // renamed holds "Ada"
console.log(renamed) // Ada
// 'name' is NOT defined here

เปลี่ยนชื่อและระบุชนิดพร้อมกัน

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

const { name: who }: { name: string } = { name: "Ada" }
console.log(who) // Ada

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

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

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

การแยกโครงสร้างเฉพาะบางคุณสมบัติ

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

interface User { name: string; age: number; email: string }
function label({ name }: User) {
  return name.toUpperCase()
}
console.log(label({ name: "ada", age: 1, email: "a@b.c" }))

การแยกโครงสร้างค่าที่ส่งคืน

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

function makePoint(): { x: number; y: number } {
  return { x: 1, y: 2 }
}
const { x, y } = makePoint()
console.log(x + y) // 3

การรวบรวมส่วนที่เหลือ

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

interface User { id: number; name: string; age: number }
const u: User = { id: 1, name: "Ada", age: 36 }
const { id, ...rest } = u
console.log(id, rest.name, rest.age)

สรุปแบบเขียนตรงจุดและแบบตั้งชื่อ

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

interface Opts { verbose: boolean }
const run = ({ verbose }: Opts) => verbose ? "loud" : "quiet"
console.log(run({ verbose: true }))

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

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

สรุปทบทวน

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

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

บทเรียน “ชนิดข้อมูลของการแยกโครงสร้างออบเจ็กต์” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “ชนิดข้อมูลของการแยกโครงสร้างออบเจ็กต์”

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

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

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

บทเรียน “ชนิดข้อมูลของการแยกโครงสร้างออบเจ็กต์” ใช้เวลานานแค่ไหน

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

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

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

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

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