타입스크립트[TypeScript] | tsconfig.json 살펴보기

 

🔍 글을 시작하기 전에

 

해당 글은 타입스크립트 프로그래밍 책과 유데미 타입스크립트 강의를 공부하여 정리한 글입니다.

수정해야 할 부분이 있다면 언제든지 알려주세요!

 

터미널에서 typescript로 컴파일 하는 방법

[TS CLI 옵션 문서]

타입스크립트 파일을 작성하고 컴파일하면 자바스크립트 파일이 생성된다.

먼저 터미널에서 타입스크립트를 설치해줘야 컴파일이 가능하기 때문에 설치를 해준다.

 

$ npm install -g typescript
or
$ yarn global add typescript

 

index.ts 파일을 생성하고 코드를 작성한 다음, 터미널에서 tsc index.ts를 실행하면 컴파일 된 자바스크립트 파일을 확인할 수 있다.

 

하지만 이 실행 방법의 단점은 ts파일을 수정할 때마다 저장하고 명령어를 실행시켜야 한다는 점이다.

매번 재실행 하는 것은 번거로운 작업이므로 다른 방법을 통해 단점을 해결할 수 있다.

 

터미널에 tsc --init을 실행하면 tsconfig.json 파일이 생성된다.

tsconfig.json은 ts 파일을 어떻게 컴파일 할 것인지 타입스크립트에게 알려주는 역할을 한다.

 

파일이 생성된 것을 확인했으면 터미널에 다음 명령어를 입력 후 실행하면 모든 ts파일을 추적하고,

내용이 변경될 때마다 자동으로 컴파일 하여 js파일에 수정된 내용을 반영시켜준다.

 

$ tsc --watch
or
$ tsc -w

 

tsconfig.json 옵션 살펴보기

[TS tsconfig.json 문서]

exclude

컴파일 시 제외할 파일을 설정
예를들어 ,

"exclude": ["node_modules];

이렇게 작성한다면 node_modules 폴더를 제외하고 컴파일을 하겠다는 뜻이다.

---

include

exclude와 반대로 컴파일 할 파일을 설정
exclude에 없는 파일들은 모두 컴파일된다.
즉, exclude를 설정하면 include가 자동으로 필터링되어 컴파일되기 때문에 하나만 설정해주면 된다.

---

compilerOptions

타입스크립트 코드가 컴파일되는 방식을 관리

---

target

자바스크립트의 어떤 버전으로 컴파일 할 것인지 설정

"target": "es5"

 

로 설정할 경우, ts파일을 작성하고 컴파일하면 es5버전의 자바스크립트로 컴파일 된다.

예를 들어서, ts파일에 let, const로 변수를 초기화하는 코드를 작성한 뒤 컴파일 단계를 거쳐 생성된 js파일을 확인하면

var로 변수를 초기화하는 코드로 바뀐걸 볼 수 있다.

 

왜냐하면 es5에는 let, const가 없기 때문에 변경되는 것이다.
즉, 이전 브라우저에서도 작동하는 코드를 생성할 수 있다는 장점이 있다.

(babel같이 자바스크립트 컴파일러와 같은 역할을 한다.)

---

lib

DOM 기본 객체, 기능 노드 등을 지정할 수 있는 설정 (DOM API도 포함)
만약 lib이 설정되어있지 않으면 target 설정에 따라 기본 설정이 달라지게 된다.

target이 es6로 되어있는 경우, es6에서 사용할 수 있는 모든 기능이 포함되게 된다.

예를 들어, es6에서는 Map 객체를 사용할 수 있는데, 이를 사용해도 에러가 발생하지 않는다.

더 와닿는 예를 말하자면, html에서 button요소를 가져오기 위해선 document.querySelector()를 사용할 수 있다.
이 때 lib을 비워두고 설정한다면 타입스크립트는 document를 알지 못하기때문에 오류를 발생시킨다.

(더 자세히는 lib을 비워두고 target도 설정하지 않았을 경우)
그렇기때문에 lib에 dom을 추가해줘야 한다.

하지만 target을 설정하고 lib 설정을 주석처리하거나 아예 제거한다면

target에서 설정한 자바스크립트 버전에 해당하는 dom api는 모두 사용할 수 있으므로

target을 설정하였다면 특별한 상황 외에 lib을 따로 설정 할 필요는 없다.

---

allowJs

타입스크립트가 자바스크립트 파일을 컴파일할 수 있도록 하는 설정

(타입스크립트 파일도 컴파일 하지만, 자바스크립트 파일도 컴파일 하도록 한다는 의미)
checkJs와 함께 사용할 수 있는데, checkJs는 컴파일을 하지 않아도 자바스크립트의 구문을 검사하고 발생할 수 있는 오류를 알려준다

---

sourceMap

브라우저 개발자도구을 열면 source 메뉴가 있고, 이 메뉴에서는 자바스크립트 파일을 볼 수 있다
여기서 타입스크립트 파일도 확인해야 할 필요가 있을 때 sorceMap 옵션을 true로 설정하면

브라우저에서도 타입스크립트 코드를 확인할 수 있다.

굳이 개발자도구에서 타입스크립트 파일을 확인할 필요가 있나?싶어서 별로 쓸 데 없을 것 같다는 생각을 했는데
VSCode에서 디버깅을 하기 위해서는 이 설정을 켜야 가능하기때문에 디버깅할 때 필요하겠다는 것을 깨달았다.

[VSCode 문서]

---

outDir

ts파일을 컴파일하면 js파일이 같은 폴더에 생성되는데, js파일이 생성될 위치를 설정할 수 있다.
만약 "outDir": "./dist"로 설정한다면 ts파일이 컴파일되어 생성된 js파일들은 dist폴더 안에 저장된다.
또한 ts이 있는 폴더 구조를 복제하여 생성된다.

예를들어, src폴더 안에 analytics폴더가 있고, 이 폴더 안에 analytics.ts가 있는 경우

컴파일하면 outDir로 지정했던 dist폴더 안에 analytics 폴더가 생성되고, 이 폴더 안에 analytics.js가 생성된다.

---

rootDir

원하는 폴더 내 ts파일만 컴파일 되기를 원할 때 설정

만약 루트 디렉토리에 타입스크립트 파일이 있는 src, user 폴더가 있고, 아무런 설정 없이 컴파일을 한다면

outDir에서 설정했던 dist 폴더 안에 src, user 폴더구조가 모두 복제되어 컴파일된다.

user 폴더는 제외하고 src 폴더 내에 있는 타입스크립트만 컴파일되기를 원한다면 rootDir설정을 하면 된다.
"rootDir": "./src"로 설정한다면, src폴더 내에 있는 타입스크립트 파일만 컴파일 될 것이다.
include 성격과 비슷하다고 생각된다.

---

removeComments

작성되어있는 주석을 제외하고 컴파일하는 설정

---

noEmit

컴파일된 js파일을 생성하지 않도록하는 설정

---

noEmitOnError

타입스크립트에서 오류가 있는 상황이어도 컴파일을 하면 js파일이 생성되어 브라우저에서 실행을 시킬 수 있다.
이를 방지하기 위해 타입스크립트에 오류가 있다면 js파일이 생성되지 않도록 하는 설정

---

noUnusedLocals

지역 변수가 선언되었지만 사용되지 않았을 경우 알려주는 설정

---

nounusedParameters

함수를 정의할 때 작성한 파라미터가 사용되지 않았을 경우 알려주는 설정

---

noImplicitReturns

함수를 정의하고 구현할 때 return문이 없다면 알려주는 설정
이 설정을 켜두었을 경우 아무것도 반환하지 않더라도 return;을 작성해줘야 한다.

---

strict

아래 7가지 옵션을 모두 true로 설정할 경우 간단하게 strict옵션을 true로 설정하면 된다.
개별적으로 설정하고 싶다면 아래 7가지 옵션을 각각 설정하면 된다.

 

noImplicitAny

타입을 명시적으로 설정하지 않았을 때 변수의 타입이 암묵적으로 any로 추론되지 않도록 하는 설정
만약 암묵적으로 타입이 any로 추론되는 변수가 있을 경우 오류가 발생한다.

 

strictNullCheck

잠재적으로 null이 될 수 있는 값을 감지하고 알려주는 설정

html에서 button요소를 가져오기 위해선 document.querySelector()를 사용할 수 있는데,

const button = document.querySelector("button");

이 때 button요소를 찾지 못하면 button 변수에 null이 반환된다. 즉, null 값을 가질 수 있다.
그래서 개발자가 null 처리를 할 수 있도록 오류를 발생시켜줘서 알려주는 설정이다.

하지만 개발하면서 무조건 button이 있을 것임을 알고있고 확신한다면,

느낌표를 붙여 이 버튼이 존재하거나 이 연산이 null이 아닌 값을 반환한다는 것을 타입스크립트에게 알려줌으로써 오류를 없앨 수 있다.

const button = document.querySelector("button")!;

만약 이렇게 확신할 수 없는 경우에는 if문을 감싸서 확인하는 것이 좋다

const button = document.querySelector("button");

if(button) {
    button.addEventListener(...);
}

 

strictFunctionTypes

함수를 정의할 때 매개변수와 반환값에 대한 타입을 정의하도록 하는 설정

 

StrictBindCallApply

bind, call, apply를 사용할 때 잘못 사용했을 경우 알려주는 설정
예를 들어 bind를 사용하여 콜백함수에 필요한 인자를 전달할 때 2개의 인자가 필요한데 한개만 넘겼을 경우 에러가 발생하고,

number타입의 인자가 필요한데 string타입의 인자를 전달할 경우 에러가 발생한다.

 

noImplicitThis

this가 무엇인지 명확하지 않은 위치에서 this가 사용될 때 오류를 발생시키는 설정
함수에서는 항상 this 타입을 명시적으로 설정하도록 강제한다.
(클래스와 객체의 함수에는 강제하지 않는다.)

 

alwaysStrict

컴파일되어 자바스크립트 파일이 생성될 때 strict모드를 무조건 사용하도록 설정

 

strictPropertyInitialization

클래스 속성이 선언되었지만 생성자에 설정되지 않은 경우 오류를 발생하도록 설정