TypeScript - tsconfig.json 기본설정 + test를 위한 jest

왜 타입스크립트를 쓰는거?

 

자바스크립트는 런타임 (브라우저 또는 노드)에서 타입이 결정되는 dynamically typed 언어이다.

 

eslint 설정이 없는 이상, 정의하지 않은 함수, 변수를 호출해도 코드를 작성하고 저장하는 동안은 어떤 에러도 던지지 않는다. 

대신, 그 코드가 실행되는 런타임에 에러가 발생하고 try-catch 문을 쓰지 않는 이상 프로그램이 멈춰버리는 경우가 발생한다!

이건 사용자경험 측면에서 최악의 경우라고 본다. 

 

반면, 타입스크립트는 statically typed 언어다. 자바스크립트와 달리,

컴파일 환경(특정 프로그래밍언어를 다른 프로그래밍 언어로 옮기는 과정)에서 타입 검사를 실시해서 에러를 나타내준다. 

따라서 코드를 작성하는 와중에 잘못된 부분이 있다면, 빨간줄로 에러를 표시해준다.

즉, 런타임 이전에 개발단계에서 에러를 잡아낼 수 있다.

 

처음 세팅하는게 꽤나 번잡스럽다..

 

// 타입스크립트 설치
npm install -g typescript

// 타입스크립트 버전 확인
tsc -v

 

노마드 코더의 무료강좌로 배울 땐 딱히 tsconfig.json 설정을 내가 해주지 않았다. tsc --init 하면 자동으로 기본 옵션들이 생성됐다. 

 

트랜스 파일링 시 적용될 옵션 파일 만들어주기

tsconfig.json 생성됨, 이 tsconfig.json 설정에 따라 컴파일된 js 파일을 만들어준다.

 

tsc --init

 

--watch 또는 -w 옵션을 사용하면 트랜스파일링 대상 파일의 내용이 변경되었을 때 이를 감지하여 자동으로 트랜스파일링이 실행된다.

 

// tsconfig.json 에 아래 옵션 추가

{ "watch" : true }

 

 

다른 방법을 오늘 배웠는데, 이번엔 tsconfig.json을 직접 만들어주었다.

 

devDependency로 아래 모듈들 설치

• ts-node : 타입스크립트 파일을 미리 컴파일링하지않고 노드에서 실행시켜주는 도구, 엔진 
• ts-node 실행방법

npm install -D typescript ts-node @types/node

npx ts-node [파일명]

 

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 파일이 저장될 경로

- baseUrl : 기본경로 설정 (위에선 "." 로 잡았는데, 이건 기본경로를 프로젝트 최상단으로 잡겠단 뜻)

- paths : 이걸 설정함으로써 경로를 깔끔하고 편하게 관리할 수 있다.

  (import로 뭔가를 불러올때 '../../core/파일경로' 이 아닌 '@core/파일경로' 이렇게 깔끔하게 경로를 작성하게끔 도와준다.) 

   "@폴더명/*" : ["그 폴더의 경로/*"] 를 paths 속성값으로 넣어주기

   아래처럼 다른 폴더, 파일을 가지고 있는 core 가 아래와 같은 경로라면 "@core/*" : ["src/core/*"] 이런식으로 설정해주는 거다.

 

 

- typeRoots : 타입 정의를 포함할 디렉토리 목록

 

tsconfig.json 설정에 따라 컴파일해서 js 파일을 만들어준다.

 

npx tsc --build

npm i -D tsconfig-paths
npx ts-node -r tsconfig-paths/register [파일명]

 

package.json 의 scripts 옵션 추가해주기

 

"scripts": {
    "dev_ts": "ts-node -r tsconfig-paths/register"
  },

 

이에 따라 터미널 명령어는 다음과 같아진다. 

 

npm run dev_ts ./src/core/index.ts

 

외부 라이브러리 타입 정의 방법

typescript 환경에서 외부 라이브러리 설치 시, 대부분 npm i -D @types/모듈 이름 을 해서 타입 지정을 해주는데,

몇몇 외부라이브러리들은 이를 제공하지 않아서 직접 타입 정의를 저장해줘야한다. :( 

 

@types 폴더를 만들고 그 안에 '라이브러리명.d.ts' 파일 만들어서 타입을 정의해주면 끝 

예를 들어 hex-to-binary (16진수를 2진수로 바꿔주는 라이브러리) 를 깐다면, 아래와 같이 hex-to-binary.d.ts 파일을 만들어준다.

이 때 declare 문을 쓰면 이 라이브러리의 타입을 굳이 import 안해줘도되며 프로젝트 전역으로 설정된다.

 

// @types/hex-to-binary.d.ts

declare module 'hex-to-binary';

 

코드 테스트 어떻게 하는건가

 

객체지향적언어 → 작은기능들부터 만들어가는 방식 → 테스트가 어려워짐 → 테스트 코드를 작성하는 프레임워크를 설치

-> 그게 바로 jest

 

아래와 같이 모듈을 설치해준다.

 

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

 

바벨 설정  : 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: {},
  testEnvironment: "node",
  verbose: true,
  preset: "ts-jest",
};

export default config;

 

파일명은 '테스트할 파일명.test.ts' 이렇게 만들어준다.

테스트 파일에 테스트 함수가 많이 작성된 경우, 연관된 테스트 함수들끼리 그룹핑해놓으면 코드 가독성에 좋음

jest의 describe() 함수를 통해 여러 개의 테스트 함수를 묶는 것이 가능하다.

it(), test() 둘다 개별 테스트용으로 쓸 수 있다.

 

example.test.ts

 

describe('그룹테스트 설명', () => {
    it('개별테스트 설명', () => {
         expect('검증대상').toEqual('검증예상결과');
    });
});

describe("나는 테스트코드를 테스트한다", () => {
  it("1 is 1", () => {
    expect(1).toEqual(1);
  });
});

 

테스트 코드 실행해주는 명령어

 

npx jest