Typescript 기본 세팅하기 + 패키지파일구조

현재까지 프로젝트를 진행하면서, CRA(Create React App)이나 nestJS를 활용하여 코드의 첫 삽을 떴기에, 코드가 어떻게 컴파일되고 어떤 식으로 굴러가는지 인지하지 못하였습니다. 오늘은 다시 기본으로 돌아가 nodeJS와 typescript를 이용하여 typescript를 javascript로 컴파일하고, tsconfig.json을 설정하는 것에서 더 나아가 패키지파일의 구조까지 배워보려고합니다.

nodeJS

nodeJS 설치

브라우저위에서 작동하도록 설계된 javascript특성상, 내 로컬 위에서 파일을 실행시키려면 chrome의 자바스크립트 엔진인 v8을 이용하는 nodeJS을 설치하여야합니다. 아래의 링크를 들어가 LTS가 적혀있는 버전을 설치하도록 해봅시다.

https://nodejs.org/en/

• nodeJS 가 잘 설치되어있는지 체크

node -v

nodeJS 환경세팅

아래의 명령을 통해 package.json파일을 생성합니다.
해당 디렉토리에 .git파일이 있다면 연동 또한 가능합니다.

npm init -y

-y : 확인을 요구하는 답변에 yes!

---

Typescript

typescript 설치

npm install -D typescript

-D: devDependencies에 설치

package.json 수정

Typescript를 javascript로 빌드하기 위해 script에 tsc 명령을 추가해줍니다.

{
  "name": "type_blockchain",
  "version": "1.0.0",
  "description": "typescript를 이용한 블록체인 만들기",
  "main": "index.js",
  "scripts": {
    "build": "tsc"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
}

tsconfig.json 생성

js파일을 생성할 디렉토리를 생성

mkdir build

include에 컴파일 대상이되는 ts파일의 위치값을 세팅하고,
컴파일러 옵션의 outDir에 자바스크립트가 생길 위치를 설정합니다.
tsc명령을 통해 컴파일된 파일들은 build 디렉토리에 담기게 됩니다.

{
  "include": ["src"], // src에 있는 모든 typescript 파일을 확인하고, 컴파일에 포함
  "compilerOptions": {
    "outDir": "build",
  }
}

typescript 컴파일

src의 디렉토리에 index.ts라는 기본 파일을 구성한뒤,

vim src/index.ts

• index.ts

const hello = () => "hi";

아래의 명령을 통해 실행시킵니다.

npm run build

---

Typscript Package

compiler Options

타입스크립트에서 지원하는 많은 옵션들이 있으나 대표적인 몇개를 설명하려고합니다.

• target: 어떤 버전의 자바스크립트로 너가 타입스크립트를 컴파일하고 싶은지를 나타냄
• lib: 목표로하는 실행환경을 나타내는 번들된 라이브러리의 정의파일(declare로 선언된 call signature들)의 설정을 구체화합니다.
  + API 사용을 위한 자동완성 제공(ES6: ES6를 지원하는 서버 JS API사용, DOM: 브라우저환경에서 사용할 것, 브라우저 API사용)
• strict: 모든 엄격한 타입-체킹 옵션 활성화 여부를 나타냄

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

custom package

프로젝트를 하다보면 여러 패키지를 불러올 때가 많습니다. 위에서 설정한 lib 옵션은 패키지와 큰 관련이 있는데, 아래에서 순서에 따라 커스텀 함수를 만들고 그 파일을 누군가 github이나 npm에 올려둔 패키지를 받아온 것라고 생각하고 패키지가 어떤식으로 구성되어 있는지 확인해보겠습니다.

우선, 타입스크립트는 불러올 자바스크립트 함수의 모양을 설명하려면 항상 타입정의가 필요합니다. 그 말인 즉슨 자바스크립트 파일과 모듈 패키지를 사용하려면 타입정의를 해줘야하는 것입니다.

패키지를 다운하다보면 아래와 같이 TS, DT라는 딱지가 붙은 패키지를 본 적이 있을 겁니다.
아래의 TS딱지는 별다른 추가적인 dependency없이 바로 설치하여 사용할 수 있는 패키지이고,

아래의 DT딱지가 붙은 패키지는 @types/styled-components라는 정의파일을 설치해주어야합니다.

우리가 자주 사용하는 DOM lib의 document나 window에도 아래와 같이 .d.ts로 끝나는 정의파일을 가지고 있습니다.

우리가 만들 javascript파일도 패키지처럼 사용할 예정이니, 정의파일을 만들어 줄 것 입니다.

touch src/myPackage.js
touch src/myPackage.d.ts

src/myPackage.js

export function init(config) {
  return true;
}

export function exit(code) {
  return code + 1;
}

src/index.ts

import { init, exit } from "myPackage";

init({
  url: "localhost",
});

exit(0);

위와 같이 정의파일을 정의하지 않은 경우 함수에 대한 호출경로가 존재하지 않아 에러가 발생합니다.

아래의 정의파일을 추가해주면 에러가 사라지고 정상적인 컴파일이 완료됩니다.

src/myPackage.d.ts

interface Config {
  url: string;
}

declare module "myPackage" {
  function init(config: Config): boolean;
  function exit(code: number): number;
}

ref: https://nomadcoders.co/typescript-for-beginners
https://www.typescriptlang.org/tsconfig#target