[Vue.js] VSCode import 오류가 발생하지 않는 상황 해결하기

✨ Intro

• 분명 createLayer라는 함수를 useMap.ts 파일에 작성 후 export까지 선언했음에도 VSCode에서 오류가 발생하지 않았다. (실행시 localhost에서는 Uncaught ReferenceError: createLayer is not defined 오류가 발생히며 실행되지 않는다.)
• createLayer 함수에 마우스 hover시 빠른 수정(auto import) 안내가 뜨지 않았다.

 

✅ 해결하기

위 문제는 TypeScript의 타입 체크 설정과 관련이 있다고 한다. tsconfig.app.json 파일에서 아래 설정을 확인한다.

// tsconfig.app.json

"compilerOptions": {
    "allowJs": true,
    "checkJs": true,
}

• allowJs : true로 설정되어 있으면 JavaScript 파일을 허용한다.
• checkJs : true로 설정되어 있으면 JavaScript 파일의 타입 체크를 한다.

나는 checkJs 가 false로 되어 있었는데 true로 변경하니 아래와 같이 VSCode에서 import 오류를 알려주었다.

import 가 추가되어있지 않아 오류를 발생시켜준다.

마우스 hover시 빠른수정(auto Import)가 활성되었다.