TypeScript 사용을 위한 세팅3(feat.니꼬쌤)

TypeScript 사용을 위한 세팅2(feat.니꼬쌤) 포스팅에서 정의 파일을 사용하여 javascript 라이브러리를 typescript에서 사용 가능 하게 했다.

하지만 수백, 수천 줄의 코드를 완전히 typescript 프로젝트로 이주 하려고 한다면 힘든 작업이 될 것이다. 이럴 때는 JSDoc을 사용하자

tsconfig.json

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

allowJs 옵션의 추가해서 typescript에서도 javascript 파일을 사용 가능 하게 한다.

myPackage.js

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

//@ts-check 으로 인해 JSDoc을 읽을 수 있게 된다.

index.ts

import { init, exit } from "./myPackage.js";
init({
    url: "true",
    debug: true,
})
exit(1)

위와 같이 직접 javascript 파일로 부터 함수를 가져올 수 있다. 그리고 함수에 대한 설명을 보면 우리가 작성한 JSDoc이 그대로 있고 type이 적용된 것을 볼 수 있다.

typescript 파일에서 에러없이 javascript 파일의 함수 들을 사용할 수 있다. 이것은 서비스중에 있는 애플리케이션에 중지 없이 typescript를 적용할 때 유용할 수 있다.

이전과 비교하여 정리하자면 .d.ts 파일인 정의 파일에서 .js 파일에 대한 타입을 모두 지정해 주어서 typescript화 하여 사용 가능 하게 해주었다면

이번엔 //@ts-check, JSDoc을 이용해 typescript가 .ts 파일 뿐만 아니라 .js 즉, javascript 파일도 보호하며 사용 가능 하게 만들었다.

이렇게 한 프로젝트에서 typescript, javascript 파일을 동시에 사용 가능 하게 되고, 실제로 우리가 스스로 라이브러리에 대한 타입 정의 파일을 만드는 것보다 많이 맞닥뜨리게 되는 상황일 것이다.