💬 오늘은 어제 배웠던 블록체인의 블록을 타입스크립트로 만들어보았다!

1. 타입스크립트 세팅

(1) 라이브러리 설치

npm init -y
npm i -D typescript ts-node @types/node

• typescript : 타입스크립트 사용할 수 있는 기본 라이브러리
• ts-node : 개발할 때 테스트용으로 ts파일을 빠르게 확인하고 싶을 때 node에서 ts파일을 실행할 수 있게 해주는 실행기 (배포할때는 사용 ❌)
  : npx ts-node [파일명]

이렇게 설치를 마치고
index.ts 파일을 만들어 아무거나 써보자
그 후 터미널에서

npx tsc index.ts

명령어를 입력하면 타입스크립트 파일이 빌드되어 자바스크립트로 변환되어 실행된다

(2) tsconfig.json 파일 생성

리액트를 했을 때 웹팩을 통해 전체 파일이 번들링되어 자바스크립트로 변환되어 브라우저에서 실행이 되었던 것처럼
별도의 런타임이 없는 타입스크립트 역시 자바스크립트로 변환되어 실행되며 이에 대한 설정을 해주는 것이 tsconfig.json 파일이다.

tsconfig.json

{
  "compilerOptions": {
    "outDir": "./dist/", 
    "esModuleInterop": true, 
    "moduleResolution": "node", 
    "resolveJsonModule": true, 
    "strict": true,
    "baseUrl": ".", 
    "typeRoots": [
      "./node_modules/@types",
      "./@types"
    ], 
    "paths": {
      "@core/*": [
        "src/core/*"
      ],
      "*": [
        "@types/*"
      ]
    }
  }
}

파일 내 각 속성값들의 의미는 다음과 같다.

• outDir : 빌드 후 변환된 js 파일이 저장될 디렉토리.
• esModuleInterop : import 문법 사용 가능하도록 (default 생략 가능)
• baseUrl : '.'으로 해두면 tsconfig파일이 있는 디렉토리를 base로 지정함(import 시에 절대경로의 최상단이 됨)
• typeRoots : npm으로 라이브러리 설치 시 따로 type이 제공되지 않는 경우 전역으로 declare해준 d.ts파일이 위치한 경로를 적어줌. 정확히는 모르겠지만 아래에 paths 설정과 함께 해주면 해당 디렉토리 (/@types) 안에서는 d.ts를 붙이지 않아도 알아서 전역으로 관리해줌.

(3) 타입스크립트에서 라이브러리 설치하기

npm i express
npm i --save-dev @types/express

라이브러리 뿐만 아니라 타입까지 설치해줘야 타입스크립트 상에서 에러가 나지 않는다!
그런데 유명하지 않은 라이브러리는 따로 타입을 제공하지 않는 경우가 있다. 그럴때는
@types 디렉토리 생성 후 내부에 [라이브러리명].d.ts 파일을 만들어준 뒤

declare module [라이브러리명];

이렇게 써주면 된다. 단, 타입은 any로 들어가버림..

(4) eslint와 prettier 설정

얘네는 코드 스타일을 맞추기 위해 사용하는 확장 프로그램이다.

1. 라이브러리 설치

npm i -D eslint prettier eslint-plugin-prettier eslint-config-prettier

2. vscode 확장프로그램 설치

eslint와 prettier를 설치해준다.

3. .eslintrc와 .prettierrc 파일 작성

.eslintrc

{
  "extends": ["plugin: prettier/recommended"]
}

.prettierrc

{
  "printWidth": 120,
  "tabWidth": 2,
  "singleQuote": true,
  "traillingComma": "all",
  "semi": true
}

4. vscode의 설정에서 Default Formatter를 찾아 prettier로 바꿔줌

(4) jest 설정

객체지향적으로 코드를 짜면 작은 단위기능을 테스트하기 힘들다는 단점이 있다. 이를 위해 테스트가 가능하게 해주는 프레임워크인 jest를 사용한다

1. 설치

npm i -D ts-jest @types/jest babel-core @babel/preset-typescript @babel/preset-env

2. config파일 세팅

babel.config.js

module.exports = {
  presets: [
    ["@babel/preset-env", {
      targets: {node: 'current'}
    }],
    '@babel/preset-typescript'
  ]
}

jest.config.ts

import type { Config } from '@jest/types';
const config: Config.InitialOptions = {
  moduleFileExtensions: ['ts', 'js'],
  testMatch: ['<rootDir>/**/*.test.(js|ts)'],
  moduleNameMapper: {
    '^@core/(.*)$': '<rootDir>/src/core/$1',
  },
  testEnvironment: 'node',
  verbose: true,
  preset: 'ts-jest',
};

export default config;

• moduleFileExtensions : 테스트에 사용할 파일의 확장자종류
• testMatch : 테스트에 해당하는 파일. 각 파일 뒤에 test.ts 붙여서 테스트용 파일을 따로 만들 수도 있고 테스트용 파일만 test 경로에 저장해두고 사용하는 사람도 있음
• moduleNameMapper : path 별칭때문에 쓰는 항목. tsconfig에서 paths로 별칭 설정 해줬는데 jest에서 별개로 또 설정해줘야함 ❗️
• verbose : 테스트 실행 시에 콘솔로그가 자세하고 보기좋게 나옴