Typescript | 이론 | 세팅하기

타입스크립트에 관한 내용을 이해하기 쉽게 설명한 사이트가 있다.

https://joshua1988.github.io/ts/why-ts.html#% ED%83%80% EC% 9E%85% EC% 8A% A4% ED%81% AC% EB% A6% BD% ED% 8A% B8% EB% 9E%80

Why TypeScript? | 타입스크립트 핸드북

 

 

타입스크립트로 간단한 블록체인 만들기! 시작해보자. 

 

먼저 npm init으로 초기 npm 설정을 해준다.

$ npm init

 

typescript를 설치해준다. ( npm 모듈에 관한 글은 블로그 내에서 확인 부탁드립니다. )

$ sudo npm install –g typescript

 

추가적으로 설치해준다. 

$ npm install webpack webpack-dev-server awesome-typescript-loader ts-jest @types/jest --save-dev

 

프론트엔드 개발자의 영원한 친구가 돼버린 webpack과 그 친구 webpack-dev-server를 설치해줍니다. 그리고 공식 문서에는 ts-loader를 사용하던데요, 저희는 가볍게 무시하고 awesome-typescript-loader를 설치해줍니다. 딱 이만큼만 설치하면 됩니다. ES6를 한 번 사용해보려고 babel이며 babel-core며. babelrc파일이며 온갖 이상한 npm파일과 설정 파일을 생성한 기억이 한 번쯤은 있으실 텐데요, 타입스크립트는 여기까 지가 끝입니다. (행복합니다.) 그리고 테스트를 위한 jest를 설치해줍니다. @type/jest와 함께 설치해야 합니다.

 

참조

https://github.com/JaeYeopHan/typescript_playground

GitHub - JaeYeopHan/typescript_playground

 

 

 그다음 진행하고자 할 프로젝트 폴더 내에 tsconfig.json 파일을 만들어 어떻게 JavaScript로 변환하는지

알려주면서 몇몇 옵션을 준다.

 

 

tsconfig.json

{
    "compilerOptions" : {
        "module" : "commonJS",
        "target": "ES3",
        "sourceMap": true,
    },
    "include": [
        
    ]
}

 

먼저 compilerOptions는 말 그대로 컴파일러 옵션에 관한 내용을 정의하는 것이다.

module은 node.js를 평범하게 사용하고 다양한걸 import 하거나 export 할 수 있게 만든다.

target은 어떤 버전의 JavaScript로 컴파일되고 싶은지 적는 것이다.

sourcemap은 sourcemap 처리를 하고 싶은지 알려준다.

 

아래 부분에 include 에는 컴파일 과정에서 포함할 파일의 배열을 적으면 된다.

또한 exclude에 node_modules를 설정해준다.

 

 

바로 추가해보자.

 

tsconfig.json

{
    "compilerOptions" : {
        "module" : "commonJS",
        "target": "ES3",
        "sourceMap": true,
    },
    "include": [
        "index.ts"
    ],
    "exclude": ["node_modules"]
}

 

기본적인 설정이 끝났다. 이제 index.ts 파일을 만들어 아래와 같이 작성한 후 컴파일해보자.

 

index.ts

console.log("hello");

 

tsc명령어를 입력한다. tsc는 ts파일에 있는 이 코드를 컴파일해서 index.js와 index.js.map을 만들어준다.

$ tsc

 

tsc 명령어 후 모습

 

 

이젠 package.json파일을 수정해서 npm start로 index.ts파일을 컴파일하고 실행하도록 해보자.

 

package.json

{
  "name": "typescript",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node index.js",
    "prestart": "tsc"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/jest": "^27.0.2",
    "awesome-typescript-loader": "^5.2.1",
    "ts-jest": "^27.0.5",
    "webpack": "^5.56.1",
    "webpack-dev-server": "^4.3.1"
  }
}

 

npm start 명령어를 실행해보자.

 

$ npm start

 

 

index.js, index.js.map 파일이 만들어지고

index.ts 파일에 작성해두었던 console.log("hello") 가 정상적으로 실행되었다.