Situation

create-react-app + typescript로 구성된 환경에서 typescript 컴파일러를 실행(tsc)시켜봤을 때 아래와 같은 에러가 발견됐습니다.

Error

node_modules/jest-diff/build/diffLines.d.ts:8:13 - error TS1005: '=' expected.

8 import type { DiffOptions } from './types';
              ~

node_modules/jest-diff/build/diffLines.d.ts:8:34 - error TS1005: ';' expected.

8 import type { DiffOptions } from './types';
                                   ~~~~~~~~~

...

node_modules/jest-diff/build/printDiffs.d.ts:8:57 - error TS1005: ';' expected.

8 import type { DiffOptions, DiffOptionsNormalized } from './types';
                                                          ~~~~~~~~~

node_modules/pretty-format/build/index.d.ts:7:13 - error TS1005: '=' expected.

7 import type * as PrettyFormat from './types';
              ~

node_modules/pretty-format/build/index.d.ts:7:18 - error TS1005: ';' expected.

7 import type * as PrettyFormat from './types';
                   ~~~~~~~~~~~~

node_modules/pretty-format/build/index.d.ts:7:31 - error TS1005: ';' expected.

7 import type * as PrettyFormat from './types';
                                ~~~~

node_modules/pretty-format/build/index.d.ts:7:36 - error TS1005: ';' expected.

7 import type * as PrettyFormat from './types';
                                     ~~~~~~~~~
Found 13 errors.

위와 같은 에러가 터미널에 보였고 분명 아무런 설정도 하지 않은 상태였기에 살짝 당황했었지만 일단 에러를 읽어보기로 했습니다.

읽어본 결과 13개의 에러의 공통적인 이유는

• import type과 export type 이라는 typescript 3.8버전에서 추가된 타입만 import/export 해줄 수 있는 문법이었습니다.

실제로 에러가 발생한 파일에 가서 type을 지우고 tsc를 실행하니 에러가 전부 사라져있었습니다.

Why this happened?

우선 typescript 컴파일 시 발생하는 에러가 원인이므로 typescript의 이슈가 아닐까 하고 구글링을 시작했습니다.

정말 다양한 질문들이 있었고, 저와 같은 상황에서 이슈를 올린 분들도 꽤 많이 발견했는데 다양한 해결책을 찾았고 전부 시도해봤지만 왠일인지 에러는 없어질 생각을 안했습니다.

그러던 와중, typescript 버전을 3.8 이상으로 해보세요. 라는 말을 이해하게 되었고 이 생각은 tsc라는 명령어가 실행되는 버전을 확인해봐야겠다 라는 생각하게 했고 전역에 설치되어있는 typescript 패키지로 부터 실행되는 명령어이므로 yarn global list를 통해서 버전을 확인해보게 되었습니다.

확인해본 결과 tsc를 실행하는 typescript 버전은 3.8 버전 미만, 즉 import type/export type 이 출시되기 전이었고 이 때문에 발생한 에러였습니다.

How to solve

따라서!! 전역에 설치되어있는 typescript 버전을 최신으로 업데이트 해줬습니다.

설치 버전 확인

$ yarn global list

버전 업그레이드

yarn global add typescript@latest 

or

yarn global upgrade

conclusion

에러가 발생하면 당황하지않고 에러를 잘 읽고 발생한 부분부터 디버깅하며 풀어야하는 것 같습니다.
모든 에러는 그냥 발생하는게 없고 코드를 잘 작성했더라도 당연히 실행 환경이라는 변수가 존재하기 때문에 잘 고려해야합니다.

이런 이유 때문에, Computer Science 기초지식과 어떤 프레임워크를 사용하더라도 아주 깊게까지는 아니지만 그래도 나름 깊이있게 공부해야하는 것 같네요.

typescript 3.8 추가된 부분 관련 공식문서