[ 타입스크립트(TypeScript) ] 비구조할당문법에 type 선언하기

📍 비구조 할당 문법에 type 선언하기

코드의 가독성을 높이기 위해 객체나 배열로 된 변수에 비구조화 할당 문법(destructuring assignment)을 사용할 때가 자주 있다. typescript로 비구조화할당 문법을 사용하면 변수로 꺼낸 값에 타입을 정해주는 경우를 마주하는데 object형은 가끔 타입을 어떻게 정해야 하는지 헷갈리곤 한다. 이번 글은 거창한 글보단 미세먼지처럼 작은 팁이지만 종종 헷갈릴 때 도움이 되므로 가벼운 마음으로 읽어보자.

 

하단 코드블록에 나와있듯이 user를 구조분해할당 이후 타입을 잘못 선언하는 경우는 AS-IS처럼 사용한다. 하지만, 저 문법은 타입을 정해주는 문법이 아니라, 객체의 원래 속성명을 다른 이름으로 할당하는 문법이다. 여기선 string으로 바꾼다는 의미다. 본래 의도라면 TO-BE처럼 선언해야 firstname과 lastname에 타입선언이 된다.

const user = { firstname: 'ted', lastname: 'an' }
const { firstname, lastname } = user;

// AS-IS
const { firstname: string, lastname: string } = user;

// TO-BE
const { firstname, lastname }: { firstname: string; lastname: string } = user;

상단과 같은 경우는 굳이 type casting를 하지 않아도 컴파일러가 타입을 잘 읽어내는데, 문제는 보통 api 호출 이후 res값을 받을 때 컴파일러가 타입을 읽지 못하는 경우가 있다. 이럴 땐 type assertion을 종종 이용한다. 예를 들어, 하단 코드 블록 9번 라인에 컴파일러가 req.query의 type이 명확하지 않다고 에러를 뿜는 경우인데, 이럴 땐, 응답하는 값이 강하게(key값 + value 타입을 아는 경우)정해져있는지, 약하게(key와 value의 타입만 아는경우) 정해져 있는지 살펴본다.

728x90

이번 경우는 query 내부의 property의 key가 returnUrl으로 정해져있고, value가 string형으로 고정되어있다는 점을 알고 있어, TO-BE 2처럼 type assertion을 선언했다. 결론적으로 의도대로 컴파일러가 정상적으로 타입을 읽었다. 만약, 느슨하게 타입만 아는 경우라면 TO-BE 1, TO-BE 1-1처럼 작성 할 수도 있다는 점을 알아두자.

const res = {
  query: {
    returnUrl: '/auth-web/my-accounts',
  },
  ...
}

// AS-IS
// ts2741: Property 'returnUrl' is missing in type '{ [key: string]: string | string[]; }' but required in type '{ returnUrl: string; }'.
const { returnUrl }: { returnUrl: string } = req.query

// TO-BE 1
const { returnUrl }: { [key: string]: string | string[] } = req.query

// TO-BE 1-1
type ReqQueryType = {
  [key in string]: string | string[]
}
const { returnUrl }: ReqQueryType = req.query

// TO-BE 2
const { returnUrl } = req.query as { returnUrl: string }

 

Reference

  - MDN-Destructuring_assignment