ts-ignore와 ts-expect-error로 ts에러 지울 수 있음.(next13 임시방편)

 

next 13 app router를 이용하는 블로그에서 마크다운 code highlighte를 적용시키기 위해 라이브러리를 쓰는데 위와 같은 에러가 났다.

하지만 실행은 잘 되었다.

 

이 링크에서 해결책을 찾을 수 있었다. 나와 같은 상황이었다.

 

아래 문구를 추가해주니 에러가 사라졌다.

@ts-expect-error Server Component

 

typescript에서 async components를 인식하지 못하기 때문인 것 같다는 의견이 있었다.

 

어쨌든 빨간줄 위에 @ts-expect-error Server Component 로 에러를 막고 머지를 하는데 vercel preview에서 빌드 에러가 떴다.

공식문서에서 ts-ignore와 ts-expect-error의 차이를 알 수 있었다.

• ts-expect-error
  • 타입 시스템이 작동에 대한 오류를 발생시키는 테스트 코드 작성을 원하는 경우
  • 수정이 빨리 이루어지길 원하며 빠른 해결책이 필요한 경우
  • 오류가 발생한 코드가 다시 유효해지면 바로 억제 주석을 삭제하길 원하는 혁신적인 팀이 이끄는 적당한-크기의 프로젝트에서 작업하는 경우
• ts-ignore
  • 더 큰 프로젝트를 갖고 있고 코드에서 발생한 새로운 오류의 명확한 책임자를 찾기 힘든 경우
  • TypeScript의 두 가지 버전 사이에서 업그레이드하는 중이고, 한 버전에서는 코드 오류가 발생하지만 나머지 버전에서는 그렇지 않은 경우
  • 솔직히 어떤 옵션 더 나은지 결정할 시간이 없는 경우

ts-ignore로 변경해주니 빌드도 잘 되었다.