[Typescript]컴파일시 세부설정(tsconfig.json)

[코딩애플.빠르게 마스타하는 타입스크립트] 참고

프로젝트 폴더에 tsconfig.json 파일을 생성한다.
(리액트의 경우 자동으로 생성되어 있고, 필요한 부분만 추가하면 된다.)

(리액트 기본 설정은 아래와같이 되어 있다.)

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

 

최소한 설정만 한다면 이렇게 잡아도 된다. 

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

'target' 은 타입스크립트 파일을 어떤 버전의 자바스크립트로 바꿔줄지 정하는 부분인다. 
es5로 설정해놓으면 es5버전 자바스크립트로 컴파일(변환) 해준다.
신버전을 원하면 es2016, esnext 등도 있다.

'module'은 자바스크립트 파일간 import 문법을 구현할 때 어떤 문법을 쓸지 정하는 곳이다.
commonjs는 require문법
es2015, esnext는 import 문법을 사용한다. 

어느 정도 IE 호환성을 원한다면 es5, commonjs가 국룰.
그러나 정말 신버전 자바스크립트만 표현가능한 그런 문법들이 있는데
(예를 들어 BigInt() 이런 함수와 bigint 타입)
그런 것들은 esnext 등으로 버전을 올려줘야 사용가능하다.
(이 부분은 설명을 옮겨적은 것인데 정확히는 모르겠다.. ㅠ)

 

추가로 넣을 만한 것들

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

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

 

기타 항목들

전체는  https://www.typescriptlang.org/tsconfig 에서 구경 가능.

{
 "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문 이상하면 에러내기 
 }
}