vscode에서 javascript 외부 모듈 자동완성이 안되는 경우

AMD(Asynchronous Module Definition) 방식으로 동적로딩되는 모듈의 경우, 그러니까 Javascript에서 define() 혹은 require()로 외부 모듈을 끌어다쓰는 경우, vscode에서 자동완성이나 기타 코드정보가 나타나지 않는 문제가 있는데, 이를 해결하려면 require를 define안에 선언하고 외부모듈에서는 module.export를 명시해줘야 한다.

 

하지만 이렇게하려면 구버전 라이브러리 같은 소스들은 각 코드를 쫒아 직접 하나하나 수정해줘야해서 난감해진다.

이를 보완할 간단한 방안이 하나 있다. 

/** 
 * @typedef {import("manager").PageManager} pagemanager  
 * @typedef {import("eventmanager")} eventmanager
 * @typedef {import("utils")} utils
 */

 

위와 같이 require되는 외부 모듈에 대해 jsdoc으로 선언을 해주는 방법인데, 매우 간단하고 빠르게 이 문제를 보완할 수 있다. jsdoc에서 @typedef로 선언하고 @type으로 가져다 쓰는 것이다.

예를들어, 어떤 class의 특정 멤버변수를 통해 외부모듈의 객체를 대입하는 경우, 다음과 같이 사용할 수 있다.

/** 
 * 뷰어 클래스
 * @typedef {import("manager").PageManager} pagemanager 
 */
class Viewer {
    /**
      * 페이지관리자
      * @type {pagemanager}
      */
    pagemanager_ = null;
(중략...)

 

위와 같이 선언해주면 vscode에서 어떤 방식으로 코드를 작성했건간에, Viewer.pagemanager_는 외부모듈인 manager.js의 PageManager class의 자료형이 적용되며 자동완성은 물론 객체나 변수의 정보까지 모두 볼 수 있을 것이다.