Destruct کردن آبجکت یکی از ویژگی‌های قدرتمند جاوااسکریپت و تایپ اسکریپت است که می‌تواند به ما در نوشتن کدهای تمیزتر و خواناتر کمک کند. این سینتکس به ما اجازه می‌دهد تا ویژگی‌ها را از یک آبجکت استخراج کنیم و آن‌ها را به متغیرها یا پارامترها اختصاص دهیم.

می‌توانیم از destruct کردن آبجکت برای ایجاد متغیرها، تخصیص مقادیر پیش‌فرض، تغییر نام ویژگی‌ها یا حذف برخی از ویژگی‌ها استفاده نماییم.

// An object with two properties
const person = { name: "Alice", age: 25, hobby: "reading" };

// Destructuring the name and hobby properties and assigning default values
const { name, hobby = "reading" } = person;

// Destructuring the name property and omitting the rest
const { name, ...others } = person;

// Destructuring the name and age properties and renaming them to firstName and years
const { name: firstName, age: years } = person;

در تایپ اسکریپت می‌توانیم تایپ آبجکت یا ویژگی‌هایی را که در حال destruct کردن آن هستیم نیز مشخص کنیم. دو راه برای انجام این کار وجود دارد:

• می‌توانیم پس از الگوی destructuring، از یک type annotation استفاده کنیم، به عنوان مثال:

const { name, age }: { name: string; age: number } = person;

این کد به تایپ اسکریپت می‌گوید آبجکتی که در حال destruct کردن آن هستیم دارای دو ویژگی name و age است و هر دو به ترتیب از تایپ رشته و عدد هستند.

• می‌توانیم از یک interface یا type alias برای تعریف شکل آبجکت استفاده کنیم و سپس از آن به عنوان type annotation استفاده نماییم، به عنوان مثال:

interface Person {
  name: string;
  age: number;
}

const { name, age }: Person = person;

این کد به تایپ اسکریپت می‌گوید آبجکتی که در حال destruct کردن آن هستیم با اینترفیس Person مطابقت دارد که به ترتیب دارای دو ویژگی name و age از تایپ رشته و عدد است.

استفاده از یک interface یا type alias می‌تواند راحت‌تر و قابل استفاده‌تر از نوشتن type annotation داخلی باشد.

همچنین می‌توانیم از destruct کردن آبجکت در پارامترهای تابع استفاده کنیم، که می‌تواند کد ما را مختصرتر و خواناتر کند. به عنوان مثال، به جای نوشتن تابعی مانند این:

function greet(person: Person) {
  console.log(`Hello ${person.name}, you are ${person.age} years old.`);
}

می‌توانیم آن را اینگونه بنویسیم:

function greet({ name, age }: Person) {
  console.log(`Hello ${name}, you are ${age} years old.`);
}

به این ترتیب، لازم نیست پارامتر personرا در داخل بدنه تابع تکرار کنیم، همینطور می‌توانیم مستقیماً به ویژگی‌های name و age دسترسی داشته باشیم.

جمع‌بندی

به طور کلی عمل destruct کردن می‌تواند با کاهش تعداد خطوط کد و روشن‌تر کردن هدفی که داریم، خوانایی کد ما را بیشتر کرده و نگه‌داری آن را آسان‌تر کند.