NestJs, NextJS, CRA 등을 사용하면 TS를 직접 설치할 필요가 없다.

어떻게 돌아가는지 알아두면 나쁠건 없으므로 일단 알아두자.
마치 웹팩 설정하는 것 처럼 ㅇ.ㅇ...

1. typechain 폴더 생성

• mkdir typechain

2. VSCode에서 typechain 열고 새로운 nodejs 프로젝트 만들기

• code typechain
• npm init -y

3. package.json 파일에서 main 없애고 scrip에서 test 삭제 해두기

{
  "name": "typechain",
  "version": "1.0.0",
  "description": "",
  "scripts": {},
  "keywords": [],
  "author": "",
  "license": "ISC"
}

4. devDependencies에 typescript 설치

• npm i -D typescript

5. /src 폴더 만들고 그 안에 index.ts 파일 만들기

6. tsconfig.json 파일 만들기

index.ts파일에 함수를 하나 작성해 보자.
이제 이 타입스크립트 파일을 자바스크립트 파일로 컴파일 해주는 파일인 tsconfig.json 파일을 만들어야 한다.

• touch tsconfig.json
  이 파일이 있으면 VSCode는 우리가 타입스크립트로 작업한다는 것을 즉시 알게 되고, 자동 완성 기능을 제공해준다.

7. package.json의 script에 build 스크립트 추가

{
  "name": "typechain",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "build": "tsc"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "typescript": "^5.2.2"
  }
}

• npm run build
  build 스크립트를 실행하여 /build 폴더를 생성하면 아래 처럼 컴파일된 파일이 build 폴더 안에 생성되는 것을 확인할 수 있다.
  
  index.ts에서 작성한 타입스크립트가 자바스크립트로 컴파일되고, 이 컴파일된 파일인 index.js 파일은 /build 폴더에 저장된다.

• 이렇게 컴파일 된 것을 확인할 수 있다.
  타입스크립트는 ts코드를 컴파일해서 낮은 버전의 js 코드로 바꿔준다.
  

8. tsconfig.json 파일 설정(Configuration)

{
  "include": ["src"],
  "compilerOptions": {
    "outDir": "build",
    "target": "ES6",
    "lib": ["ES6"]
  }
}

1. include

컴파일 할 타입스크립트 파일이 있는 디렉터리 지정하기
{ include: ["src"] }
include 배열에는 자바스크립트로 컴파일하고 싶은 모든 디렉토리를 넣으면 된다.

2. compilerOptions의 outDir

컴파일된 자바스크립트 파일이 생성될 디렉터리 지정하기
{ "compilerOptions": { "outDir": "build" } }
compilerOptions의 outDir에는 컴파일된 자바스크립트 파일이 생성될 디렉터리를 지정하면 되는데, build 폴더로 지정하면 된다.

3. compilerOptions의 target

어떤 버전의 js 코드로 컴파일 될지 정하기
{ "compilerOptions": { "target": "ES6" } }
타겟 세팅은 어떤 자바스크립트의 기능이 다운레벨될 지 설정하는 것이다. 아무것도 적지 않으면 ES3이나 ES5로 설정된다.

어떤걸로 해야할지 고민할 필요는 없다.

• 브라우저를 위한 자바스크립트를 만들고 싶으면, 대부분의 nodeJS와 브라우저가 es6를 지원하기 때문에 es6로 설정하면 된다.
• nodeJS 같은 백엔드를 위한 자바스크립트 코드를 만들고 싶거나, 더 오래된 환경(오래된 서버, 구버전 node.js 사용하는 경우)에 코드를 배포하고 싶다면 사용하고 있는 node.js 버전과 호환되는 버전으로 target을 설정하면 된다.

CRA이나, nextJS, nestJS 같은 프레임 워크를 사용하면 걔네가 알아서 호환되는 걸로 설정하여 프로젝트를 만들어 준다.