JavaScript 라이브러리를 TypeScript 프로젝트에서 사용해보기

Node.js 프로젝트 생성

일단 빠르게 Node.js 프로젝트를 생성해보자. 먼저 새 터미널창을 연다.

npm init -y

터미널 창에 위 명령어를 입력하면 생성 끝!

 

TypeScript 프로젝트로 변환

이제 TypeScript 프로젝트로 변환할 차례다.

tsc --init

Node.js 프로젝트를 생성할 때처럼 터미널에 위 명령어를 입력하고 실행한다. 그러면 tsconfig.json가 생성되고, TypeScript 프로젝트로 변환되게 된다.

 

이제 tsconfig.json 파일을 열어서 수많은 주석 중 필요한 옵션을 선택하여 주석 처리를 해제하면 된다. 내가 주석 해제한 옵션들은 아래와 같다.

"allowJs": true // TypeScript 프로젝트에 JavaScript 파일 허용 여부
"checkJs": true // JavaScript 파일 타입 체크 여부

 

JavaScript 라이브러리 TypeScript 프로젝트에서 사용하기

본격적으로 커스텀 JavaScript 라이브러리를 만들어보자.

/**
 * @param {number} a
 * @param {number} b
 * @returns {number}
 */
export function add(a, b) {
  return a + b;
}
 
/**
 * @param {number} a
 * @param {number} b
 * @returns {number}
 */
export function minus(a, b) {
  return a - b;
}

참고

위의 주석문은 JSDoc이라고 한다. JSDoc은 API의 시그니처(인자, 리턴 타입)를 설명하는 HTML 문서 생성기로써, 자바스크립트 소스코드에 타입 힌트를 제공할 수 있다.

JSDoc으로 타입 힌트가 제공된 해당 자바스크립트 파일에 대해 .d.ts 파일을 만든다.

npx tsc JS파일명(*.js) --declaration --allowJs --emitDeclarationOnly --outDir types

 

위 명령어를 실행하면 types라는 디렉토리가 생성되는 것을 확인할 수 있다. 해당 디렉토리를 누르면 JS파일명.d.ts 라는 파일을 확인할 수 있고, 아래와 같이 생성되어 있을 것이다.

/**
 * @param {number} a
 * @param {number} b
 * @returns {number}
 */
export function add(a: number, b: number): number;
/**
 * @param {number} a
 * @param {number} b
 * @returns {number}
 */
export function minus(a: number, b: number): number;

 

다음으로 자바스크립트 커스텀 라이브러리를 사용할 ts파일도 하나 생성하자.

import { add, minus } from "./test";
console.log(add(1, 2));
console.log(minus(2, 1));

 

결과를 확인해보자.

> npx ts-node foo.ts
3
1

 

오늘은 자바스크립트 라이브러리를 타입스크립트 프로젝트에서 사용하는 방법을 알아보았다!