타입스크립트 - tsconfig.json

 

타입스크립트를 프로젝트에 사용하려면 설정이 필요한데, 한 번에 외우는 건 불가능하기에 반복 학습으로 메모장 처럼 기록해두고 자주 찾아보려한다. 

 

앞으로 타입스크립트를 사용하면서 계속 추가될 예정.

 

타입스크립트는 트랜스파일러로 ts에서 js로 변환시켜준다. 변환해야하는 이유는 브라우저는 only 자바스크립트만 이해할 수 있다. 자바스크립트도 여러 버전이 존재하는데(commonJS, es5, es6+ 등), 어떤 버전으로 ts 파일들을 js파일로 변환할지 설정을 해줘야하고 부가적인 설정들도 해줘야한다.

 

타입스크립트 문법 위주로만 공부했지만 이러한 세부적인 지식들도 중요하다.

 

트랜스파일러(Transpiler)와 바벨(Babel)

tsconfig.json 생성 명령어

---

npx tsc --init

에러가 뜬다면 타입스크립트 설치를 안한 것.

 

tsconfig.json

---

 

{
    "compilerOptions": {
        "target": "es5", 		
        "module": "esnext",
        "stric": true
        "noImplicitAny": true,
        "strictNullChecks": true
        "jsx": "preserve",
        "esModuleInterop": true,
        "sourceMap": true,
        "lib": ["es2015", "dom"],
        "allowJs": false,
    }
}

 

• target: ts파일들을 어떤 버전의 js 파일들로 변환할지 선언 (최신 버전을 원한다면 es16, exnext)
• module: 자바스크립트 파일간 import 문법을 어떤 방식으로 사용할지 선언

commonJS: module.exports/require
es5/esnext: import/export

• noImplicitAny: 타입스크립트를 사용하는 이유이기도 하며, true로 설정할 경우 타입이 먼저 정의된 변수들을 사용해야함
• strictNullChecks: null/undefined가 모든 타입에 선언할 수 있는지 허용 여부
• stric: true일 경우 엄격한 타입모드 설정
• jsx: tsx 파일을 어떤 방식으로 jsx로 변환할지 (preserve, react-native, react)
• esModuleInterop: es6 모듈 사양을 준수해 commonJS 모듈을 가져올지 허용 여부

commonJS 방식의 import를 사용하는 라이브러리가 있을 경우 에러 해결

• sourceMap: 소스맵 생성 여부
• lib: 변환할 때, 포함될 라이브러리 목록, 선언하지 않으면 es버전에 따라 기본값으로 설정
• allowJs: 변환할 때, JS파일도 포함할지 여부, JS 프로젝트를 TS로 변환 시 유용

 

참고

---

TypeScript 한글 문서