TS LAB
    TS 4.1 · 4부. 실무 준비

    tsconfig 와 컴파일

    설정 파일이 무엇을 정하고, 어떻게 JavaScript 로 바뀌는지 봅니다.

    예상 학습 시간 14분 난이도 중급
    개념 설명

    설정 파일이 규칙을 정합니다

    지금까지 이 화면에서 실행한 것들은 정해진 설정으로 검사되었습니다. 실제 프로젝트에서는 그 설정을 tsconfig.json 에 적습니다.

    이 단원의 코드 상자에는 실행 단추가 없습니다. 설정과 명령은 브라우저 안에서 해 볼 수 있는 것이 아니기 때문입니다.

    터미널 
    # 설치합니다. 프로젝트마다 따로 두는 것이 보통입니다.
npm install --save-dev typescript

# 설정 파일을 만듭니다.
npx tsc --init

# 검사하고 JavaScript 로 바꿉니다.
npx tsc
    상세 사용법

    무엇을 정하나

    tsconfig.json 
    {
	"compilerOptions": {
		"target": "ES2020",
		"module": "ESNext",
		"strict": true,
		"outDir": "dist",
		"lib": ["ES2020", "DOM"]
	},
	"include": ["src"]
}
    이름정하는 것
    target어느 시대의 JavaScript 로 바꿀지입니다. 낮게 잡으면 옛 브라우저에서 돌지만 코드가 길어집니다
    module모듈을 어떤 방식으로 내보낼지입니다(JS 6.4)
    strict엄격한 검사를 한꺼번에 켭니다. 아래에서 따로 봅니다
    outDir바뀐 파일을 어디에 놓을지입니다
    lib어떤 타입 정의를 함께 쓸지입니다. DOM 을 빼면 document 를 사용할 수 없습니다
    include어떤 파일을 검사할지입니다
    상세 사용법

    strict 가 켜는 것들

    strict: true 는 여러 검사를 한 번에 켭니다. 이 트랙의 예제들이 오류를 낸 것도 그 덕입니다.

    설정없으면
    strictNullChecks1.6 의 오류가 하나도 나지 않습니다. 모든 타입에 null 이 담길 수 있게 됩니다
    noImplicitAny2.1 에서 매개 변수에 타입을 적지 않아도 조용히 any 가 됩니다
    strictFunctionTypes함수를 넘길 때 매개 변수 타입을 느슨하게 봅니다
    strictPropertyInitialization클래스 필드를 채우지 않아도 지나갑니다(3.5)

    새 프로젝트는 켜고 시작합니다. 나중에 켜면 한꺼번에 오류가 쏟아져 손대기 어려워집니다. 이미 있는 코드에 붙이는 방법은 다음 단원에서 봅니다.

    상세 사용법

    요즘은 tsc 로 바꾸지 않기도 합니다

    tsc 는 검사와 JavaScript 로 바꾸기를 함께 합니다. 그런데 요즘 도구(Vite · esbuild · swc)는 바꾸는 일을 훨씬 빠르게 합니다. 그래서 이렇게 나눠 쓰는 것이 흔합니다.

    • 바꾸기는 빠른 도구가 합니다. 타입은 그냥 지웁니다.
    • 검사는 tsc --noEmit 이 따로 합니다.
    package.json 
    {
	"scripts": {
		"dev": "vite",
		"build": "tsc --noEmit && vite build",
		"typecheck": "tsc --noEmit --watch"
	}
}

    이 화면도 같은 방식입니다. 검사와 바꾸기를 따로 부르고, 검사에서 걸리면 실행하지 않습니다.

    흔한 실수

    처음에 자주 걸리는 것

    오류가 있어도 파일이 만들어집니다

    tsc 는 타입 오류가 있어도 JavaScript 를 내놓습니다. 막으려면 noEmitOnError 를 켭니다. 빌드가 통과했다고 오류가 없는 것은 아닙니다.

    편집기와 빌드가 다르게 보이는 것

    편집기가 다른 TypeScript 판을 사용하고 있으면 오류가 서로 다릅니다. VS Code 는 "TypeScript: Select Version" 에서 프로젝트에 설치한 것을 고르게 할 수 있습니다.

    target 을 낮게 잡는 것

    ES5 로 잡으면 async 하나에도 긴 코드가 만들어집니다. 지원해야 할 브라우저를 확인하고 필요 이상으로 낮추지 않습니다.

    요약

    이 단원의 정리

    • 규칙은 tsconfig.json 에 적습니다.
    • strict 는 엄격한 검사를 한꺼번에 켭니다. 새 프로젝트는 켜고 시작합니다.
    • target 은 어느 시대의 JavaScript 로 바꿀지입니다.
    • 오류가 있어도 파일은 만들어집니다. 막으려면 따로 설정합니다.
    • 요즘은 바꾸기는 빠른 도구가, 검사는 tsc --noEmit 이 맡습니다.