[ 타입스크립트(TypeScript) ] 이중 반복문에서 반복문 순회 후 타입 강제하기

📍 이중 반복문에서 반복문 순회 후 타입 강제하기

언뜻 제목만 봐서는 이해하기 힘들 수 있지만, 쉽게 말해 타입이 2개 이상인 data에서 find를 통해 나온 값에 원하는 property만 추출하고 싶을 때 해당 타입을 assertion 방법이다. 이미 data에 타입이 정해져 있는 경우라면 굳이 type assertion 해야되나?라고 생각할 수 있지만, API요청을 통해 받은 값(data)의 타입이 2개 혹은 2개 이상으로 설정되어있고, 내가 사용하고 싶은 property가 각각의 타입에 공통으로 들어있지 않은 property인데, 한쪽 타입의 property만 추출하면 컴파일 에러가 나는 경우 해결방법에 대해 글을 작성했다.

 

한 가지 예시를 통해 살펴보자. API를 통해 받은 값 data 값이 있고, 그 data의 타입은 data[][]이다. 여기서 내가 원하는 로직은 find메소드를 사용해 type===info의 value.text값을 찾고 type===info의 value.text의 값이 없으면 Unknown으로 저장하여 결국엔 string []을 반환하는 로직을 작성하고 싶다.

728x90

그런데, 하단 코드 블록의 // Bad처럼 작성하면 ESlint에서 Unsafe assignment ~ 에러가 나오는 모습을 볼 수 있는데, 타입스크립트에서 dataDocument의 타입이 명확하지 않아 any[]인 타입으로 설정되어 나타나는 에러였다. 그래서 as를 사용해 Not Good처럼 작성했으나, 이번엔 text property를 찾지 못한다는 에러였다. as로 강제해줬는데 왜 저런 에러가 생기지..?라고 생각하며 30분의 삽질 결과 얻은 것은 find 메소드를 사용하고 나온 결과에 대해 타입을 InfoType으로 강제해줘야 find 메소드를 사용하고 나온 결과는 모두 InfoType이고, InfoType 내부에 있는 value.text에 접근 할 수 있음을 깨달았다. 이전 단계에 assertion을 해야한다는 생각하지 못하고 최종단계인 value.text 값에 assertion하여 생긴 문제였었다! Good처럼 작성하면 자연스럽게 옵셔널 체이닝(?)을 빼도 되므로 한층 가독성이 높아진 코드가 되었다. 나와 같은 문제로 고생하는 분들에게 도움이 되었으면 하는 바람으로 글을 마친다.

 

 

22. 7. 5. 화.
typescript의 사용자-정의 타입 가드(User-Defined Type Guards)인 is 키워드를 사용하여 작성 할 수 있다. 여기서 타입가드란, 스코프 안에서의 타입을 보장하는 런타임 검사를 수행한다는 표현식이다. Use TypeGuard코드에서 document is InfoType코드를 통해 타입스크립트가 document의 타입의 범위를 InfoType 로 축소 시킬 수 있다. (피드백 주셔서 감사합니다. 우디데브님 :))

// type.ts
interface InfoType {
  type: 'info'
  value: {
    text: string
  }
}

interface ImageType {
  type: 'images'
  value: {
    id: string
    source?: object
  }
}

type Data = InfoType | ImageType

// index.tsx
const data: Data[][] = [  
  [
    { type: "info", value: [Object] },
    { type: "images", value: [Object] },
  ],
  [
    { type: "info", value: [Object] },
    { type: "images", value: [Object] },
  ],
  [
    { type: "info", value: [Object] },
    { type: "images", value: [Object] },
  ],
  [
    { type: "info", value: [Object] },
    { type: "images", value: [Object] },
  ],
];

// Bad
const infoTextLabels: string[] = data.map(
  (dataDocument) =>
    dataDocument.find(({ type }) => type === 'info')?.value.text ||
    'Unknown',
)

// Not Bad
 const infoTextLabels: string[] = data.map(
    (dataDocument) =>
      (dataDocument.find(({ type }) => type === 'info')?.value
        .text as InfoType['value']['text']) || 'Unknown',
  )

// Good
const infoTextLabels: string[] = data
  .map(
    (dataDocument) =>
      (
        dataDocument.find(
          ({ type }) => type === 'info',
        ) as InfoType
      ).value.text || 'Unknown',
  )

// Use TypeGuard
const tabLabels = entries
  .map(
    (embeddedDocument) =>
      embeddedDocument.find(
        (document): document is InfoType =>
          document.type === 'info',
      )?.value.text || 'Unknown',
  )