타입스크립트 시작하기

merci·2023년 7월 4일

목록 보기

2/2

프로젝트 생성

NPM 프로젝트 초기화

npm init -y

TSC(타입스크립트 컴파일러), TSLint, NodeJS용 타입 선언 설치

npm install --save-dev typescript tslint @types/node

또는 

npm i -d typescript tslint @types/node

package.json 에서 index.js 를 사용하지 않을것 이므로 삭제

{
  "name": "typechain",
  "version": "1.0.0",
  "description": "",
  "scripts": {
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/node": "^20.3.3",
    "tslint": "^6.1.3",
    "typescript": "^5.1.6"
  }
}

tsconfig.json 설정

모든 타입스크립트 프로젝트는 루트 디렉토리에 tsconfig.json 파일이 존재해야 합니다.
tsconfig.json 을 생성한 뒤에 아래 json을 입력합니다.

touch tsconfig.json

.
├── node_modules/
├── package-lock.json
├── package.json
└── tsconfig.json

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

include 에 TSC가 찾을 타입스크립트 디렉토리를 넣고 outDir에 컴파일된 자바스크립트 코드가 출력될 곳을 넣습니다.
target 에는 컴파일할 자바스크립트 버전을 넣습니다.
target 에 따라 컴파일되어 나오는 코드가 달라지게 됩니다.
lib 은 실행될 환경을 입력합니다.
lib 에 "DOM" 을 추가하게 되면 브라우저에서 실행될 것이라 가정해 DOM API를 document.querySelector 같은 메소드로 사용할 수 있게 됩니다.

// target 적용 전
var hello = function () { return "hi"; };
var h = hello();
console.log(h);

// target 적용 후
const hello = () => "hi";
const h = hello();
console.log(h);

"DOM" 을 추가한 뒤에 사용할 수 있게 되는 API들은 node_modules 패키지 안에 있는 lib.dom.d.ts 같은 파일에 정의되어 있습니다.

이 파일을 직접 만들어 본다면 자바스크립트 파일을 만들고 (myPackage.js)

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

타입스크립트 .d.ts파일을 만든 뒤 자바스크립트 모듈을 정의 합니다.
.d.ts 파일은 타입스크립트에서 사용할 자바스크립트의 타입만을 정의합니다.

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

이제 타입스크립트에서 만들어진 모듈을 import 해서 사용할 수 있습니다.

import { init, exit } from "myPackage";

exit(12);
init({url: "/home"})

또한 설정파일에 "allowJs": true를 추가한다면 타입스크립트 파일안에 자바스크립트 코드를 작설할 수 있습니다.

import { init, exit } from "./myPackage"; //  직접 js 임포트

설정파일 자동 생성( + tslint.json)

또는 자동으로 tsconfig 설정파일을 만들도록 명령어를 사용합니다.

./node_modules/.bin/tsc --init

아래 커맨드로 tslint.json을 생성합니다.

./node_modules/.bin/tslint --init

.
├── node_modules/
├── package-lock.json
├── package.json
├── src
│   └── index.ts
├── tsconfig.json
└── tslint.json

TSC

src 디렉토리의 index.ts 에 console.log("hi") 코드를 넣고 컴파일 합니다.

./node_modules/.bin/tsc

컴파일을 하게 되면 build 디렉토리에 js 파일이 생성됩니다.

이제 컴파일된 자바스크립트 파일을 실행하면 됩니다.

node ./build/index.js   // hi 출력

컴파일하는 두번째 방법은 package.json의 scripts 부분을 수정합니다.

{
  "scripts": {
    "build": "tsc"
  },
}

이제 아래 커맨드를 사용하면 컴파일이 실행됩니다.

npm run build

또한 한번에 빌드와 실행을 하려면 아래와 같이 변경 후 한번에 실행합니다.

{
  "scripts": {
    "build": "tsc",
    "start": "node build/index.js"
  },
}

npm run build && npm start

ts-node, nodemon

이러한 구조가 기본적인 타입스크립트 파일을 실행하는 방법이지만 ts-node를 설치하면 타입스크립트를 컴파일하지 않고 직접 실행할 수 있습니다.
ts-node 를 사용하기 위해서는 전역적으로 설치하거나 로컬 설치를 한뒤에 아래 명령어로 파일을 실행합니다.

npm i -g ts-node
npm i -d ts-node

ts-node ./src/index.ts  // hi 출력

npm run dev

nodemon 을 이용하면 자동으로 커맨드를 입력해줘서 일일히 수동으로 커맨드를 입력할 필요가 없습니다.

npm i nodemon

"dev": "nodemon --exec ts-node ./src/index.ts"

nodemon --exec ts-node ./src/index.ts

또는

npm run dev

이제 코드를 변경 후 저정할 때마다 터미널에 실행결과가 나오게 됩니다.

그리고 typescript-node-starter 같은 뼈대 생성 도구를 이용해서 타입스크립트 기반의 node.js프로젝트를 빠르게 만들수도 있습니다.

  "scripts": {
    "build": "tsc",
    "start": "node build/index.js",
    "dev": "ts-node ./src/index.ts"
  }

JSDoc

현재 서비스중인 자바스크립트 서비스에서 타입스크립트의 보호를 받고 싶다면 마이그레이션할 필요 없이 JSDoc을 이용하면 됩니다.
코멘트로 이루어진 문법으로 자바스크립트 위에 코멘트를 작성합니다.

기존의 자바스크립트에 // @ts-check를 추가합니다.

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

그리고 /** 를 입력하면 자동완성이 됩니다.

여기에 TSC에 알려줄 코멘트를 넣어주면 됩니다.(myPackage.js)

// @ts-check
/**
 * Initializes the project
 * @param {object} config
 * @param {string} config.url
 * @param {boolean} config.debug
 * @return boolean
 */
export function init(config) {
    return true;
}
/**
 * Exits the program
 * @param {number} code 
 * @returns number
 */
export function exit(code) {
    return code + 1;
}

ts 파일에서 확인해보면 자바스크립트 코드를 인식하고 있습니다.

그 외에도 다음과 같은 주석설정이 있습니다.

@param: 함수의 매개변수에 대한 설명과 타입을 지정

@returns 또는 @return: 함수의 반환값에 대한 설명과 타입을 지정

@typedef: 새로운 타입을 정의

@property: 객체의 프로퍼티에 대한 설명과 타입을 지정

@class: 클래스에 대한 설명

@method: 메소드에 대한 설명과 타입을 지정

@example: 코드 예제를 작성

@types/node

타입스크립트로 만들어지지 않는 패키지를 import했을때 일치하는 타입을 찾지 못할 경우가 있습니다.

이럴때는 타입스크립트 커뮤니티에서 관리하는 오픈소스 프로젝트인 DefinitelyTyped 의 도움을 받을 수 있습니다.
https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types
링크로 가면 많은 선언파일들이 존재합니다.

여기서 node나 react같은 외부 패키지를 타입스크립트에서 사용하려면 .d.ts 같은 선언파일이 작성되어야 합니다.
노드 패키지에 들어가면 수많은 .d.ts파일들이 있습니다.

여기서 원하는 파일을 복사해서 프로젝트에 추가해도 되지만 이러한 과정을 자동화 해주는 커맨드가 있습니다.