[TypeScript]JavaScript Migration

01 개요

많은 패키지들이 자바스크립트로 만들어졌다. 이러한 경우 해당 패키지 내의 변수나 함수들은 타입을 알 수 없어 타입스크립트가 정보를 추론하기 어렵다. 본 문서에서는 이와 같은 기존의 자바스크립트 코드를 타입스크립트에서 이용하기 위하여 필요한 내용을 다룬다.

최종수정일 : 2023.10.25

---

02 d.ts : declaration file

MyPackage.js

export function init(config) {
	return true;
}

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

useMyPackage.ts : Dummy Code

import { init, exit } from "MyPackage"

init({
	url:"true"
})

exit(1)

MyPackage.d.ts : declaration file

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

Javascript로 작성된 라이브러리를 타입스크립트에서 타입안정성 있게 사용하기 위해서 타입에 대해 서술한 추가적인 파일이다.

03 JSDoc : @ts-check

tsconfig.json

{
	"include": ["src"],
	"compilerOptions": {
		...
		"allowJS": true
	}
}

myPackage.js

// @ts-check

/**
* Initialize the project
*@param {object} config
*@param {boolean} config.debug
*@param {string} config.url
*@return boolean
*/
export function init(config) {
	return true;
}

/**
* Exit the project
*@param {number} code
*@return number
*/
export function exit(code) {
	return code + 1;
}

위와 같이 작성하면 JSDoc 문법을 통해 자바스크립트 파일의 변형이나 오작동 없이 타입스크립트에서 임포트했을 때 타입을 안내해준다.