타입스크립트에서 비구조화 할당문법 사용하기

비구조화 할당 문법은 

 

1. 비구조화 할당문법을 타입스크립트에서 사용할 경우 조금 다르게 사용해야 한다.

일반 자바스크립트에서는 아래와 같이 사용할 수 있었다.

  const object = {
    a: 1,
    b: 2,
  }
  
  const { a, b } = object

그런데 타입스크립트에서는 타입을 먼저 선언하고 사용하기 때문에 interface 를 사용한다면 아래와 같이 사용하게 될 것이다.

interface TestType {
  a: number
  b: number
}

const object: TestType = {
  a: 1,
  b: 2
}

const { a, b } = object

 

 

타입스크립트에서 타입 선언시 속성키값 우측에 ? 를 포함할 경우 선택적 속성으로 만들 수 있는데 이 경우 선언한 타입 외에 undefined 타입도 함께 union 타입으로 자동 셋팅된다. 이 경우에도 아래와 같이 별다른 문제는 없다.

interface TestType {
  a: number
  b?: number
}

const object: TestType = {
  a: 1,
  b: 2,
}

const { a, b } = object

 

그런데 만약 커스텀타입 안에서 또 다른 커스텀타입을 사용하고 이걸 또 선택적 속성으로 선언할 경우 해당 타입에 비구조화 할당문법을 적용할 경우 문제가 발생할 수 있다. 예를 들어 아래와 같다.

interface TestTypeSub {
  a_sub: number
  b_sub: number
}

interface TestType {
  a: number
  b?: number
  c?: TestTypeSub
}

const object: TestType = {
  a: 1,
  b: 2,
  c: {
    a_sub: 3,
    b_sub: 4,
  },
}

const { a_sub, b_sub }: TestTypeSub = object.c

아마 마지막에 비구조화 할당문법을 사용하는 부분에 타입스크립트 컴파일러에서 아래와 같은 에러를 표기할 것이다.

Type 'TestTypeSub | undefined' is not assignable to type 'TestTypeSub'.
Type 'undefined' is not assignable to type 'TestTypeSub'.

의역하면 object.c 는 선택적 속성이라 undefined 일 수 있는데 어떻게 그 안에서 a_sub와 b_sub 라는 값을 추출해 오느냐는 것이다. 이 경우 아래와 같이 Nullish 병합 연산자를 사용하면 된다. 

const { a_sub, b_sub }: TestTypeSub = object.c ?? {
  a_sub: 3,
  b_sub: 4
}

 

보면 알겠지만 obejct.c 가 유효하지 않은 데이터일 경우 할당할 default 값을 지정해주는 것이다. 그런데 이와 비슷한 역할을 하는 OR 연산자( || ) 도 있다.

 

난 사실 예전부터 OR 연산자를 애용해왔는데 둘의 차이점은 유효하지 않은 데이터 로 판단하는 기준인데 Nullish 병합 연산자의 경우 null과 undefined 만 유효하지 않은 데이터로 취급하고 OR 연산자 는 null, undefined 과 함께 false, 0 같은 falsy 값도 유효하지 않은 데이터로 취급한다는 것이다.

 

그런데 false, 0 의 경우 명시적으로 할당하는 경우도 있을 수 있기 때문에 유효한 데이터인 경우도 많기 때문에 미할당 여부에 따라 default 값을 지정하고 싶다면 ?? 를 사용하는 게 더 적절해 보인다.

 

https://learnjs.vlpt.us/useful/06-destructuring.html
https://heropy.blog/2020/01/27/typescript/
https://ko.javascript.info/nullish-coalescing-operator