[실습] JavaScript 라이브러리를 TypeScript에서 사용해보기

1. 셋팅

(터미널)

1. mkdir [폴더명] : 폴더 만들기
2. cd [폴더명] : 폴더로 이동
3. npm init -y : package.json이 생성됨
4. tsc --init : tsconfig.json을 생성해서 타입스크립트 프로젝트로 변환
5. ls : 현재 파일 확인

 

(tsconfig.json)

아래 옵션 2개를 주석 해제하여 true로 설정

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

 

 

---

2. JSDoc 작성

JavaScript 소스코드에 JSDoc를 통해 타입 힌트를 제공할 수 있음.

JSDoc은 API의 시그니처 (인자, 리턴 타입)를 설명하는 HTML 문서 생성기.

 

(test.js)

// JsDoc
// 주석으로 인자의 타입을 명시
/**
 * @param {number} a
 * @param {number} b
 * @returns {number}
 */
export function add(a, b) {
  // export를 넣어야 import 할 수 있음
  return a + b;
}

 

JSDoc으로 타입 힌트가 제공된 (test.js)의 .d.ts 파일을 만들기

명령어를 통해 자동으로 (types/test.d.ts)파일을 생성해줌

(터미널) npx tsc test.js --declaration --allowJs --emitDeclarationOnly --outDir types

 

 

---

3. 결과 확인

test.js 파일을 참조할 foo.ts 파일을 만들기

 

(foo.ts)

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

 

ts-node 파일 실행해서 결과 확인

(터미널) npx ts-node foo.ts