Typescript Destructuring

 

공부한 내용을 기록합니다. 잘못된 내용은 댓글 달아주시면 감사하겠습니다!

---

Destructuring assignment

Destructuring assignment은 구조 분해 할당이라고도 하며 구조화 된 배열과 같은 이터러블, 또는 객체를

destructuring(비구조화, 구조파괴)하여 1개 이상의 변수에 개별적으로 할당하는 것을 말합니다.

 

말로만 듣고서는 잘 와닿지 않을 수 있으니 예시를 함께 볼까요?

const aplha = ['A', 'B', 'C']; // 이터러블
const [one, two, three] = aplha;

console.log(one, two, three); // A B C

const apartment = {
  firstFloor: 'Lerry',
  secondFloor: 'Loopy',
  thirdFloor: 'Pororo',
};

const { firstFloor, secondFloor, thirdFloor } = apartment;

console.log(firstFloor, secondFloor, thirdFloor); // Lerry Loopy Pororo

위의 두 코드스니펫은 각각 (ES6 기준) 배열과 객체에서의 디스트럭처링 예시입니다.

이처럼 디스트럭처링은 배열과 같은 이터러블, 또는 객체에서 필요한 값만 추출하여 변수에 할당할 때 유용합니다.

배열 디스트럭처링 할당의 기준은 배열의 인덱스입니다.

즉 순서대로 할당되고, 이 때 변수의 개수와 이터러블의 요소 개수가 반드시 일치할 필요는 없습니다.

우변에는 반드시 이터러블을 할당해야 합니다.

 

반면 객체 디스트럭처링 할당의 기준은 프로퍼티 키입니다.

순서는 의미가 없으며 선언된 변수 이름과 프로퍼티 키가 일치하면 할당됩니다.

좌변에는 객체 리터럴 형태로 선언, 우변에는 객체 또는 객체로 평가될 수 있는 표현식을 할당해야 합니다.

만약 객체의 프로퍼티 키와 다른 변수 이름으로 프로퍼티 값을 할당 받고 싶다면, 다음과 같이 변수를 선언하면 됩니다.

const myDevices = {
  laptop: 'Mac',
  phone: 'Iphone',
  screen: 'philips',
};

// 다른 이름으로 할당 받으려면 다음과 같이 변수를 선언
const { laptop: lap, phone: cellPhone } = myDevices;

// Mac Iphone -> 기존의 phone이 cellPhone으로 할당됨
console.log(lap, cellPhone);

중첩 객체의 경우에는

0️⃣ 객체를 가진 프로퍼티 키로 내부의 객체를 추출하고,
1️⃣ 이 객체 속의 프로퍼티 키로 값을 추출합니다.

const user = {
  name: 'Loopy',
  address: {
    city: 'Seoul',
    lang: 'Ko',
  },
  isHungry: true,
};

// city 만 가져온 것
const {
  address: { city },
} = user;

console.log(city); // 'Seoul'

---

타입스크립트에서의 디스트럭처링

타입스크립트에서도 유사하게 디스트럭처링을 진행합니다.

대신 타입스크립트는 할당된 변수에 대한 타입을 지정해줘야하므로, 타입 정의에 대한 부분이 추가됩니다.

---

하기 쉬운 실수

타입스크립트에서의 디스트럭처링을 할 때 흔히 이런 실수를 많이 하게 되는데요,

// ❌
const myDevices = {
  laptop: 'Mac',
  phoneNumber: 1234,
  screen: 'philips',
};

const { laptop: string, phoneNumber: number } = myDevices;

단순히 이렇게 생각해서 타입을 지정하면,

'앞으로는 laptop 프로퍼티 키를 'string' 으로 부르자!' 라든지,
'phoneNumber 프로퍼티 키를 'number' 라고 부르자!' 라는 뜻과 같습니다.

---

디스트럭처링하기

따라서 타입스크립트에서는 이러한 일을 방지하기 위해

'인터페이스(interface)' 혹은 '타입(type)' 형태로, 객체 자체에 대한 타입을 지정해줘야 합니다.

 

 

방법 1️⃣ 리터럴 사용

const myDevices = {
  laptop: 'Mac',
  phoneNumber: 1234,
  screen: 'philips',
};

const { laptop, phoneNumber, screen }: { laptop: string; phoneNumber: number; screen: string } = myDevices;

 

방법 2️⃣ 인터페이스 생성 후, 타입 자리에 해당 인터페이스 지정

interface myDevices {
  laptop: string;
  phoneNumber: number;
  screen: string;
}

const myDevices = {
  laptop: 'Mac',
  phoneNumber: 1234,
  screen: 'philips',
};

const { laptop, phoneNumber, screen }: myDevices = myDevices;
// ❗️ 값 공간과 타입 공간은 달라 같은 변수명을 사용할 수 있다.