어제 TypeScript를 내 토이 프로젝트에 도입했다. 코드를 짜는 것 자체는 어렵지 않았는데, 환경설정이 정말... 정말 개같다.

tsc command를 입력해도 컴파일 결과를 반환하지 않는다.

자, 여기 tsx확장자를 사용해서 작성한 ts 코드들이 담긴 book-app 디렉토리가 있다.
TypeScript의 공식 문서에 따르면 tsc command를 사용하면 현재 디렉토리로부터 최상위 디렉토리까지 tsconfig.json을 가지고 있는 디렉토리를 탐색하고, tsconfig.json을 가진 디렉토리를 찾으면 해당 디렉토리의 컴파일을 실시한다.

그럼 tsconfig.json이 존재하는 book-app 디렉토리에서 tsc command를 사용하면 book-app 디렉토리가 컴파일 될 것이라고 당연히 기대할 것이다. 근데 안 된다.

book-app에서 tsc command를 사용했지만?

그대로다. 에러가 뜨는 것도 아니다. 게다가 어제는 tsc command로 컴파일이 잘 되었었다. 근데 오늘은 이 모양이니 너무 신난다. 아이 신나

--project option 사용하기

tsc --project 혹은 tsc -p option을 사용하면 tsconfig 파일을 탐색할 디텍토리를 설정할 수 있다. 그럼 tsc -p .를 사용하면 현재 디텍토리에서만 tsconfig 파일을 탐색할 것이다.

근데 안된다.

파일명을 직접 입력하기

그럼 그냥 파일명을 직접 입력하면 컴파일이 되는가?

된다! @types/react-native라이브러리와 뭔가 호환 오류같은 것을 일으키고 있긴 하나 아무튼 컴파일은 잘 되었다.

여기서 나는 "tsconfig파일이 잘못된 게 아닌가?" 하는 생각이 들었다. 파일명을 직접 입력한 컴파일은 사용자 정의 tsconfig을 따르지 않고 default tsconfig을 따르기 때문이다.

default tsconfig 사용하기

기존에 있던 tsconfig을 잠시 다른 곳에 두고, tsc --init으로 tsconfig을 새로 생성했다.
default tsconfig에서 "jsx": "react", "noImplictAny": "false" 정도만 수정하고 tsc를 입력해보았더니...?

놀랍게도 잘 된다! ㅋㅋ... ㅋㅋㅋ... 이번에도 내가 멍청해서 삽질했다!

그럼 기존 tsconfig은 뭐가 문제였나

기존 tsconfig의 코드는 이러하다.

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "jsx": "react",
    "strict": true,
    "noImplicitAny": false,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "noFallthroughCasesInSwitch": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "outDir": "dist"
  },
  "include": [
    "src/**/*"
  ]
}

생각해보면 이 tsconfig 설정은 React & TypeScript 개발환경 설정 글에서 복사해왔었다. 여기서 문제가 된 설정은 "noEmit": true다. 이 설정이 true라면 컴파일한 파일을 출력하지 않는다. "아니! 도대체 이런 설정이 왜 있는 거지?" 싶다.
이 설정은 실질적인 컴파일은 babel같은 컴파일러가 담당하고 있고, TypeScript로는 타입 검사만 행하거나 할 때에 사용하는 옵션이다.
근데 이 설정을 true로 해놓고 왜 컴파일을 안 하지? 왜 js파일이 생성이 안 되는 것이지? 이러고 있었으니... 내 부족함이 사무친다.

마치며

인터넷에서 config파일을 막 복사해서 사용하지 말 것, config은 명세를 읽어보고 사용할 것.
한편으론 다행이다, 같은 실수를 반복하지는 않을 것이고, 다음부턴 좀 더 조심하게 될 테니까...