[TS] tsconfig.json

1. typescript 설치

npm i -D typescript

2. package.json 초기화

npm init -y

"scripts": {
	"build": "tsc" // "npx tsc"
}

---

3. tsconfig.json 설정

에디터는 우리가 TS로 작업한다는 것을 알게 되고, 자동완성기능을 제공한다.

디렉터리에 tsconfig.json 파일이 있으면 해당 디렉터리가 TypeScript 프로젝트의 루트임을 나타냅니다.

tsconfig.json 파일은 프로젝트를 컴파일하는 데 필요한 루트 파일과 컴파일러 옵션을 지정합니다.

include : It tells TS where to look for code to compile

ourDir : It tells TS where to put the output code

target : It specifices the version of JS we want to compile to the to

lib : It specifies what enviornment the code is goin to run on

{
  // VSC가 우리가 TS를 사용한다고 추측
  "include": [ // 우리가 (TS를) JS로 컴파일하고 싶은 모든 디렉터리
    "src" // TS가 src의 모든 파일을 확인한다
  ],
  "compilerOptions": {
    "outDir": "build", // JS 파일이 생성될 디렉터리
    "target": "ES6", // TS가 컴파일할 JS 버전 (ES6 권장-안정적)
    "lib": ["ES6", "DOM"], // 타겟 런타임 환경 -> 자동완성
    "strict": true, // 정의 파일 없는 경우 에러
    "allowJs": true // TS 안에 JS 허용 여부
  }
}

Documentation - What is a tsconfig.json

 

target

(기본값: ES3)

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

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

"compilerOptions": {
	"target" : "ES6"
}

 

lib

코드가 어떤 환경에서 동작할지 정의하여

걸맞는 API와 타입 등 보다 편리한 자동완성 기능을 제공한다.

 

합쳐진 라이브러리의 정의 파일을 특정해준다

정의 파일: 목표로 하는 target 런타임(실행) 환경을 나타낸다 

 

- DOM

document, window, localStorage, ..

프로그램을 브라우저에서 실행할 것이다

"compilerOptions": {
	"lib" : ["ES6", "DOM"]
}

 

선언 후 TS는 document가 무엇인지 알고 있고

document가 가지고 있는 모든 자동완성(이벤트와 메소드)을 제공한다.

왜냐면 TS는 브라우저의 API와 타입들을 알고있다. 

 

- TS는 Math처럼 내장된 JS API를 위한 기본적인 타입 정의를 가지고 있다

 

 

declaration files (.d.ts)

node module 속 JS 모듈을 TS 코드가 이해할 수 있도록 타입 정의해놓은 파일

"compilerOptions": {
	"strict": true
}

 

 

JSDoc

// @ts-check : .js 파일에서 타입 오류 활성화하기 위해 최상단에 기재

// @ts-ignore | // @ts-expect-error : 특정 줄의 오류 무시  

 

JSDoc 주석을 사용하여 JS 파일에 type을 제공할 수 있음

코멘트일 뿐이라 당장 코드에서 에러나지 않음

"compilerOptions": {
	"allowJs": true
}

 

myPackage.js

// @ts-check
/**
 * Initializes the project
 * @param {object} config 
 * @param {boolean} config.debug
 * @param {string} config.url
 * @returns boolean
 */
export function init(config) {
  return true
}

/**
 * Exits the program 
 * @param {number} code 
 * @returns number
 */
export function exit(code) {
  return code + 1
}

 

index.ts

---

4. 추가 설치

ts-node : 빌드(사전 컴파일) 없이 실행할 수 있게 해줌 (개발 환경용)

nodemon : 자동으로 커맨드 재실행해주어 서버 재시작하지 않아도 변경된 내용 업데이트해줌

npm i -D ts-node
npm i nodemon

"scripts": {
	"build": "tsc",
	"dev": "nodemon --exec ts-node src/index.ts",
	"start": "node build/index.js"
}

 

5. package에 대한 정의파일

import crypto from "crypto" 

👉error  Module '"crypto"' has no default export.

// 방법1. in index.ts
import * as crypto from "crypto"

// 방법2. in tsconfig.json
"compilerOptions": {
	"esModuleInterop": true,
	"module": "commonJS"
}

 

esModuleInterop : 

CommonJS 모듈을 ES6 모듈 코드베이스로 가져오려고 할 때 발생하는 문제를 해결합니다.
ES6 모듈 사양을 준수하여 CommonJS 모듈을 정상적으로 가져올 수 있게 해줍니다.

 

 

Definitely Typed : 타입 정의를 위한 repository (필요한 정의 파일 참고)

@types/node : nodejs 안에 모든 패키지에 대한 타입 정의

npm i -D @types/node

 

지금은 앞선 ts-node 설치시에 node_modules/@types/node/crypto.d.ts가 자동으로 생성되기 때문에

위에 tsconfig.json에 속성만 추가해주면 import 에러 안 나지만, crypto의 자동완성을 사용하려면 설치해야한다!