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

코딩애플 '빠르게 마스터하는 타입스크립트' 강의를 보고 정리한 내용입니다.

(본 페이지 주소: https://codingapple.com/course/typescript-crash-course/)

 

---

tsconfig 파일 생성하기

 

프로젝트 폴더에  tsconfig.json 이라는 파일 생성.

여기서 타입스크립트 ts 파일들을 .js 파일로 변환할 때 어떻게 변환할 것인지 세부설정이 가능. 

(리액트나 뷰 쓰는 중이면 이미 있을 수 있음)

 

 

 

▲ 이렇게 !!

 

 

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

그리고 json파일 안에 복붙하기.

 

'target'은 타입스크립트파일을 어떤 버전의 자바스크립트로 바꿔줄지 정하는 부분.

es5로 셋팅해놓으면 es5 버전 자바스크립트로 컴파일(변환) 해준다. 

신버전을 원하면 es2016, esnext 등도입력할 수 있음. 

 

'module'은 자바스크립트 파일간 import 문법을 구현할 때 어떤 문법을 쓸지 정하는 곳.

commonjs는 require 문법.

es2015, esnext는 import 문법을 사용. 

 

신버전 자바스크립트만 표현가능한 그런 문법들(예 : BigInt() 함수와 bigint 타입)은

esnext 등으로 버전을 올려줘야 사용가능. 

 

 

 

 

 

 

추가로 넣을만한 것들

 

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

noImplicitAny는 any라는 타입이 의도치않게 발생할 경우 에러를 띄워주는 설정, 

strictNullChecks는 null, undefined 타입에 잘못된 조작하면 에러를 띄우는 설정.

(지금은 안넣고 시작하지만 실제 개발할 때 넣어보자)

 

 

 

 

 

 

tsconfig에 들어갈 기타 항목들

 

필요한 것들만 모아둠.

전체는 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문 이상하면 에러내기 
 }
}