[TS] BlockChain 1 - Targets

우뤼 컴퓨러 시스템에 밑바닥부터 타입스크립트 프로젝트를 설정해 보겠다!

TS 프로젝트가 무엇인지, 설정은 어디에 작성해야하고, 어떤 것을 설정할 수 있는지 알아보쟝

 

But 지금부터 할 것이 알아두어야할 것이긴 하지만 그렇게 자주 사용하게 되진 않을 것이다.

왜냐면 NestJS, NextJS, CRA를 사용하면 요 라이브러리, 패키지들이 자동으로 TS 프로젝트를 만들어주기 때문에 우리가 수동으로 TS 프로젝트를 설정할 일이 거의 없기 때문이다.

 

WebPack을 쓰는 것과 비슷하게 아주 가끔씩 우리가 직접 설정해줘야하는 일이 생길 수도 있다.

 

---

 

일단 typechain 이라는 폴더를 만들어서 vscode로 열어보쟝!

여기서 새 nodeJs 프로젝트를 만들자

npm init -y

 

package.json 파일이 생성됐을 텐데 여기서 main을 지우고 scripts의 test를 지우쟈!

 

그리고 typescript를 설치해 보자

npm install -D typescript

D : devDependencies

 

devDependencies에 typescript가 추가되었다!

 

이제 src 폴더를 만들고 index.ts라는 파일을 만들자!

이런 바보 코드를 작성하고 이 파일을 컴파일해보쟈!

즉, 이 파일에 타입스크립트를 실행해서 자바스크립트 파일로 받아보자

 

tsconfig.json 파일을 만들어보자

touch tsconfig.json

 

이 파일이 있으면 vscode는 우리가 타입스크립트로 작업한다는 것을 즉시 알게되고, 아주아주 훌륭한 자동완성기능을 제공해 줄 것이다. 

일케일케 자동완성 기능 개꿀!

 

tsconfig.json은 당연 json으로 작성한다!

먼저 타입스크립트에세 어디에 타입스크립트 파일이 위치하는지 알려주자

include 배열을 열고 여기엔 우리가 자바스크립트로 컴파일하고 싶은 모든 디렉터리를 넣어줄 것이다.

{
  "include": ["src"]
}

이렇게 src를 넣어주면, 타입스크립트가 src의 모든 파일을 확인한다는 의미이다.

 

compilerOptions를 만들고 outDir이라는 또 다른 키를 만들자

outDir는 JS파일이 생성될 디렉터리를 지정한다. build라는 폴더로 지정하자!

 

이게 잘 작동하는지 확인하기 위해 package.json으로 돌아가서 scripts에 build를 만들자

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

터미널 창에서 npm run build를 입력하면 tsc가 작동한다.

build 폴더가 생성되었고 안에는 index.js 파일이 생성되었다.

위에서 작성한 index.ts 와 비교해보자!

 

index.ts

const hello = () => "hi";

index.js

var hello = function () { return "hi"; };

 

 

---

tsconfig로 와서 compilerOptions 안에 target을 정의해 보자

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

이건 우리가 TS를 어떤 버전의 JS로 컴파일하고 싶은지를 나타낸다.

호환되는 라이브러리 정의를 포함한 출력되는 JS 코드의 버전을 지정함

 

참고로 ES3에는  const가 존재하지 않는다.

그리고 화살표 함수도 존재하지 않아서 일반적인 함수로 바뀐다.

그래서 저걸 ES6로 바꾸자.

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

다시 npm run build를 하면?

const hello = () => "hi";

build 폴더에 있던 index.js 파일을 보면 이렇게 바뀌어져 있다!

이제 const와 화살표 함수를 사용한다!

 

 

index.ts로 돌아가서 class 하나를 만들자!

class Block {
  constructor(private data: string) {}
  static hello() {
    return "Hi";
  }
}

그리고 npm run build를 실행하면?

index.js

class Block {
    constructor(data) {
        this.data = data;
    }
    static hello() {
        return "Hi";
    }
}

 

 

tsconfig에서 작성한 target에 마우스를 가져다 대면 툴팁 안에 링크가 보이는데, 함 클릭해보자!

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

TSConfig Reference - Docs on every TSConfig option

"최신브라우저는 ES6의 모든 기능을 지원하므로, ES6를 사용하는 건 좋은 선택입니다."

만약 우리가 매우 오래된 버전의 node.js를 사용한다면, target 세팅을 node.js 버전과 호환되는 버전으로 직접 바꿔줘야 될 것이다.

하지만 우리가 사용하는 대부분의 server provider에서는 문제가 없을 것이다.

 

"target 세팅은 어떤 JS의 기능이 다운레벨되는지를 바꾼다"