Destructuring

• 한글로 풀어 쓰면 '구조 분해 할당' 또는 '비구조화 할당'으로 표현

const someObject = {
  name: '모도리',
  age: 35,
  gender: 'male'
}

• 위의 객체에서 name, age, gender를 각각 분리해서 사용하고자 할 때 destructuring을 사용

JavaScript에서의 Destructuring

const { name, age, gender } = someObject;

TypeScript에서의 Destructuring

잘못 된 방법

const { name: string, age: number, gender: string } = someObject;

• 단순히 생각해서 이런 식으로 타입을 지정해 주면 되지 않을까 했음
• 이렇게 할 경우 name, age, gender를 각각 string, number, string으로 명명하라는 코드가 됨

쉬운 방법

const {name, age, gender}: { name: string, age: number, gender: string } = someObject;

• {}로 감싸진 전체에 대해서 타입을 지정해야 됨

권장하는 방법

interface User {
  name: string,
  age: number,
  gender: string
}

const {name, age, gender}: User = someObject;

• interface로 미리 타입을 정의하고 해당 interface를 타입으로 지정하는 방식