[TypeScript] @ts-ignore과 @ts-expect-error

이번 프로젝트에서 리액트로 만든 프로젝트를 타입스크립트로 리팩토링하는 과정에서 타입 에러가 생겨서 어떤 식으로 해결해야 할 지 몰랐던 때가 있었다. 팀원들끼리 엄청 고민하다가 다른 분이 @ts-ignore 라는 걸 알려주셔서 덕분에 그 주석 처리로 인해 타입 에러를 넘어갈 수 있었다. 정확한 용도를 몰라서 구글링하고 공식문서를 보고 정리해본다.

 

 

 

 

 

 

 

@ts-ignore 란?

// @ts-ignore

• suppression comment (억제 주석)
• type checking 할 때 바로 다음 행의 타입 에러를 무시할 수 있다
• 다음 행에 오류가 없을 경우 아무것도 하지 않는다.

 

• 어떨 때 사용하는가?
  • 더 큰 프로젝트를 갖고 있고 코드에서 발생한 새로운 오류의 명확한 책임자를 찾기 힘든 경우
  • TypeScript의 두 가지 버전 사이에서 업그레이드하는 중이고, 한 버전에서는 코드 오류가 발생하지만 나머지 버전에서는 그렇지 않은 경우
  • 솔직히 어떤 옵션 더 나은지 결정할 시간이 없는 경우

 

 

사용한 예시 (이번 프로젝트의 내용)

//@ts-ignore 
import XMLParser from 'react-xml-parser';

// react-xml-parser 라이브러리가 타입스크립트 버전이 없어서 대체할 라이브러리를 찾지 못했다.
// 대신에 @ts-ignore 를 사용하면서 자바스크립트로 인식하게 하여 type error를 해결했다.

 

 

 

 

 

 

 

 

 

 

@ts-expect-error

// @ts-expect-error

• TypeScript 3.9 에서 새로 도입한 기능
• 이 주석이 붙어 있는 경우 typescript는 해당 오류를 오류로 보지 않고 넘어간다.

 

• 어떨 때 사용하는 가?
  • 타입 시스템이 작동에 대한 오류를 발생시키는 테스트 코드 작성을 원하는 경우
  • 수정이 빨리 이루어지길 원하며 빠른 해결책이 필요한 경우
  • 오류가 발생한 코드가 다시 유효해지면 바로 억제 주석을 삭제하길 원하는 혁신적인 팀이 이끄는 적당한-크기의 프로젝트에서 작업하는 경우

 

 

 

 

 

 

 

 

차이점

둘 다 모두 바로 다음에 오는 오류를 억제해주는 역할을 하지만,

@ts-ignore는 다음 행에 오류가 없을 경우 작동하지 않는다.

 

타입 에러를 무시해야 할 때 둘 중 필요한 용도에 맞게 사용하면 된다.

 

 

 

 

 

 

 

 

 

---

이 두 개의 차이점은 Typescript 공식 문서에 잘 정리되어 있으니 참고하자.

https://typescript-kr.github.io/pages/release-notes/typescript-3.9.html#-ts-expect-error-comments

TypeScript 한글 문서