타입스크립트 구조분해 할당

함수에서의 구조분해 할당

• 2022-02-12 추가 수정

1

const person = { first: 'John', last: 'Doe' };

// Person 객체의 예상된 인자들을 정의한다.
interface Person {
  first: string;
  last: string;
}

// 비구조화 할당 된 인자들의 구조를 정의한다.
// Person 인터페이스의 객체스키마와 일치해야 한다.
const hello = ({ first, last }: Person) => 
  `Hello ${first} ${last}!`;

// outputs "Hello John Doe!"
hello(person);

2

interface Person {
  first: string;
  last: string;
}


// Person 객체의 배열이 정의되고 배열의 첫번째 인자만 비구조화된다?
const helloFirstPerson = ([{ first, last }]: Person[]) =>
  `Hello ${first} ${last}!`;

const people = [
  { first: 'John', last: 'Doe' },
  { first: 'Jane', last: 'Smith' }
];

// outputs "Hello John Doe!"
helloFirstPerson(people);

//last 빠짐
const badArgs = [{ first: 'John' }, { first: 'Jane' } ];

// Type Error! 
helloFirstPerson(badArgs);

추가

이 글을 작성할 당시에는 배열의 구조분해 같은 경우 배열의 첫 인자만 되는 줄 알았지만 ㅋㅋ.. 지금 시간이 어느 정도 지난 시점에서 블로그를 다시 읽어 보는 도중 발견하여 수정 하였다.
나중에 또 수정할 지도?

interface Person {
  first: string;
  last: string;
}

// 이렇게하면 first, last가 각 2개 씩 생겨 충돌! // 1
const helloFirstPerson = ([{ first, last }, {first, last}]: Person[]) =>
  `Hello ${first} ${last}!`;
// 이름을 다르게 바꿔줘야 한다.  // 2
const helloFirstPerson = ([{ first, last }, {first: _first, last: _last}]: Person[]) =>
  `Hello ${first} ${last}! && ${_first} ${_last}`;

배열의 위치마다 구조 분해가 가능하다.
하지만 이렇게하면 변수명이 충돌하기 때문에
2 코드 처럼 변경 해주면 된다.

뭐.. 저렇게 할 수 있다지 저렇게는 사용하진 않을 것이다.
애초에 helloFirstPerson 함수 인자에 배열이 아닌 객체만 넣어 주거나
배열을 넣는다면 이터레이터를 사용한 전체 person의 이름을 반환 해주거나 할듯 하다.

출처

https://github.com/Microsoft/TypeScript/issues/29526
ms 팀에서 ::문법을 준비 중이라고 하는것같다?

https://medium.com/@rileyhilliard/es6-destructuring-in-typescript-4c048a8e9e15

배열 구조분해할당에서 배열 첫번째 인자들만 나오는건가?