[TypeScript] 🐳 tsconfig.json 설정하기

목차

tsconfig.json 설정하기

기본적으로 TypeScript 프로젝트에는 tsconfig.json이 존재한다.  이 파일에서는 ts 파일들을 js 파일로 어떻게 변환할 것인지 세부 설정을 할 수 있다. 

TypeScript

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
    }
}

target은 타입스크립트 파일을 어떤 버전의 자바스크립트로 바꿀지를 정하는 부분이다. ES5 이외에도 ES2016, ESNEXT 등 원하는 자바스크립트 버전을 설정할 수 있다. 

 

module은 자바스크립트 파일간 import 문법을 구현할 때 어떤 문법을 사용할 지를 정하는 부분이다. Commonjs는 require 문법, ES2015, ESNEXT는 import 문법을 사용한다. 

 

일반적으론 IE 호환성을 위해서 ES5, Commonjs가 보편적으로 사용된다. 

---

추가로 넣을만한 속성

TypeScript

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "noImplicitAny": true,
        "strictNullChecks": true
    }
}

noImplictAny는 any라는 타입이 의도치않게 발생한 경우 에러를 띄워주는 설정이며, strictNullChecks는 null, undefined 타입에 이상한 조작을 할 경우 에러를 띄우는 설정이다. 

---

tsconfig.json에 들어갈 기타 항목들

tsconfig.json에서 가끔식 사용하는 설정들을 모은 코드이다. 

TypeScript

{
 "compilerOptions": {

  "target": "es5", // 'es3', 'es5', 'es2015', 'es2016', 'es2017','es2018', 'esnext' 가능
  "module": "commonjs", //무슨 import 문법 쓸건지 'commonjs', 'amd', 'es2015', 'esnext'
  "allowJs": true, // js 파일들 ts에서 import해서 쓸 수 있는지 
  "checkJs": true, // 일반 js 파일에서도 에러체크 여부 
  "jsx": "preserve", // tsx 파일을 jsx로 어떻게 컴파일할 것인지 'preserve', 'react-native', 'react'
  "declaration": true, //컴파일시 .d.ts 파일도 자동으로 함께생성 (현재쓰는 모든 타입이 정의된 파일)
  "outFile": "./", //모든 ts파일을 js파일 하나로 컴파일해줌 (module이 none, amd, system일 때만 가능)
  "outDir": "./", //js파일 아웃풋 경로바꾸기
  "rootDir": "./", //루트경로 바꾸기 (js 파일 아웃풋 경로에 영향줌)
  "removeComments": true, //컴파일시 주석제거 

  "strict": true, //strict 관련, noimplicit 어쩌구 관련 모드 전부 켜기
  "noImplicitAny": true, //any타입 금지 여부
  "strictNullChecks": true, //null, undefined 타입에 이상한 짓 할시 에러내기 
  "strictFunctionTypes": true, //함수파라미터 타입체크 강하게 
  "strictPropertyInitialization": true, //class constructor 작성시 타입체크 강하게
  "noImplicitThis": true, //this 키워드가 any 타입일 경우 에러내기
  "alwaysStrict": true, //자바스크립트 "use strict" 모드 켜기

  "noUnusedLocals": true, //쓰지않는 지역변수 있으면 에러내기
  "noUnusedParameters": true, //쓰지않는 파라미터 있으면 에러내기
  "noImplicitReturns": true, //함수에서 return 빼먹으면 에러내기 
  "noFallthroughCasesInSwitch": true, //switch문 이상하면 에러내기 
 }
}

---

관련 링크

tsconfig.json의 전체 설정은 밑의 링크들에서 확인할 수 있다. 

컴파일 설정 - TypeScript Guidebook

TSConfig Reference - Docs on every TSConfig option

---

참고 문헌

• 1[TypeScript] 컴파일 시 세부 설정
• 2[React TypeScript] React 프로젝트 TypeScript 적용
• 3Typescript 컴파일시 세부설정 (tsconfig.json)