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

tsconfig 파일 생성

Compiler란

컴파일러는 특정 프로그래밍 언어가 정적 언어로서의 정체성을 유지할 수 있게 하는 도구, 쉽게 말하자면
프로그래밍 언어로 작성된 소스 코드 → 다른 프로그래밍 언어로 변환

타입스크립트에서는..

• tsc = TypeScript 컴파일러

• 타입스크립트 ts 파일들을 .js 파일로 변환 할 때 어떻게 변환 할 것인지 설정 및 세부설정 하는 파일

• 타입 검사 도 해줌

---

수동tsc 만들기

프로젝트 동일 위치에 tsconfig.json 을 만들자
tsconfig.json 이라 파일 작명하자

// tsconfig.json
{
    "compilerOptions": {
        "target": "es5",
        "module": "esnext",
    }
}

• target : 타입스크립트 파일을 어떤 버전의 자바스크립트로 바꿀지
  - es5 : es5버전 자바스크립트
  - es2016 : 2016버전 자바스크립트
  - esnext : 최신버전
  
• module : 자바스크립트 파일간 import 문버을 구현 할 때
  - commonjs : require 로
  • es2015 , esnext : import 문법

추가로 넣을 만한 것들

//tsconfig.json

{
    "compilerOptions": {
        "target": "es6",
        "module": "esnext",
      // 추가 부분
        "noImplicitAny": true,
        "strictNullChecks": true
    }
}

• noImplicitAny : any라는 타입이 의도치 않게 발생할 경우 에러를 띄워주는 설정
• stringNullChecks : null,undefined 타입에 이상한 조작질을 하면 에러를 띄워주는것

tsconfig에 들어가면 좋을 기타 항목

tsc -w 명령어

• tsc -w : 자동으로 파일.ts를 파일.js로 변환시켜준다. ( tsconfig를 수동 || tsc 명령어로 만들어야 가능)

---

tsc 명령어로 만들기

• tsc --init : tsconfig.json이 생성되는 명령어

이러면 무수한 option을 가진 tsconfig.json이 만들어짐

tsc 명령어들

• tsc index.ts : index.ts 만 컴파일

• tsc src/*.ts : src 디렉토리 안에 있는 모든 TypeScript 파일을 컴파일

• tsc index.js --declaration --emitDeclarationOnly
  - @types 패키지를 위한.d.ts 파일 생성을 하는 명령
  - Typescripe로 작성된 모듈이 아니라 Javascript로 작성된 모듈에 타입 선언을 제공할 때 유용함

tsconfig.json에 넣을 Option

추가로 넣을 만한 것들

//tsconfig.json

{
    "compilerOptions": {
        "target": "es6",
        "module": "esnext",
      // 추가 부분
        "strict": true, // 
        "strictNullChecks": true,
        "outDir": "./",
        "include": ["src/**/*"],
        "exclude": ["node_modules", "dist"]  
    }
}

• "strict" : true :
  - 엄격한 타입 검사 옵션을 모두 활성화 하는 옵션

  • true로 하면 아래 옵션들이 자동으로 true로 설정이 됨
  • strictFunctionTypes :엄격한 'bind', 'call', 'apply' 함수 메서드 사용
  • strictBindCallApply : 엄격한 'bind', 'call', 'apply' 함수 메서드 사용
  • strictPropertyInitialization : 클래스에서 속성 초기화 엄격 검사 사용
  • noImplicitAny : : any라는 타입이 의도치 않게 발생할 경우 에러를 띄워주는 설정
    - noImplicitThis : 명시적이지 않은 'any' 유형으로 'this' 사용시 오류 발생시킬거
  • alwaysStrict : 엄격모드에서 구문 분석 후, 각 소스 파일에 "use strict" 코드를 출력

• stringNullChecks : null,undefined 타입에 이상한 조작질을 하면 에러를 띄워주는것

• "outDir": "dist" : 컴파일된 파일들이 dis 폴더에 저장

• “include": ["src/**/*"] : src 디렉토리 밑의 친구들을 컴파일 하겠다는 의미

• "exclude": ["node_modules", "dist"] : node_modules, dist 디렉토리 밑의 친구들은 컴파일 대상에서 제외

정리하면

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