[ TypeScript ] 타입스크립트의 Target, Lib Configuration.

🛠️ TypeScript 설치 및 pakage.json 초기화 방법

1. 빈 프로젝트 생성
2. package.json 초기화 : npm init -y
3. typescript 설치 : npm i -D typescript

🛠️ tsconfig.json 설정

디렉토리에 tsconfig.json 파일이 있으면 해당 디렉토리가 TypeScript 프로젝트의 루트임을 나타낸다.
tsconfig.json 파일은 프로젝트를 컴파일하는데 필요한 루트 파일과 컴파일러 옵션을 지정한다.

참고 : https://www.typescriptlang.org/docs/handbook/tsconfig-json.html#handbook-content

Documentation - What is a tsconfig.json

 

✅ Target (기본값: ES3)

 

최신 브라우저는 모든 ES6 기능을 지원하므로 ES6는 좋은 선택이다. 코드가 이전 환경에 배포된 경우 더 낮은 target을 설정하거나 최신 환경에서 코드 실행이 보장되는 경우 더 높은 target을 설정하도록 선택할 수 있다.
ex) 화살표 함수() => this는 ES5 이하이면 함수 표현식으로 바뀐다.

특별한 ESNext 값은 TypeScript 버전이 지원하는 가장 높은 버전을 나타낸다. 이 설정은 다른 TypeScript 버전 간에 동일한 의미가 아니며 업그레이드를 예측하기 어렵게 만들 수 있으므로 주의해서 사용해야 한다.

참고 : https://www.typescriptlang.org/tsconfig#target

TSConfig Reference - Docs on every TSConfig option

//tsconfig.json
{
"include": ["src"],
"compilerOptions": {
"outDir": "build",
"target": "ES6"
}
}

 

🚩 .ts 파일을 .js 파일로 컴파일 하는 방법

터미널에서 npm run build 를 입력해주면, tsc가 작동하면서 폴더 구조 상단에 build 라는 폴더가 생성된다.
build 폴더를 클릭해보면 컴파일 된 .js 파일을 볼 수 있다.
ex) index.ts --컴파일--> index.js

 

 

✅ Lib

타입스크립트에게 어떤 API를 사용하고 어떤 환경에서 코드를 실행하는 지를 지정할 수 있다.
(target 런타임 환경이 무엇인지를 지정한다.)
프로그램이 브라우저에서 실행되면 lib에 "DOM" 유형 정의를 할 수 있다.
DOM: window, document 등...
ex) "lib": ["ES6","DOM"]

참고 : https://www.typescriptlang.org/tsconfig#lib

TSConfig Reference - Docs on every TSConfig option

//tsconfig.json
{
"include": ["src"],
"compilerOptions": {
"outDir": "build",
"target": "ES6",
"lib": ["ES6", "DOM"]
}
}

 

타입스크립트는 처음부터 DOM API에 대한 정보를 가지고 있지 않기에, 이를 사용하기 위해 lib에서 유형을 정의해주는 것이다.