VS Code typescript import 시 type으로 import되는 문제

개요

Typescript 기반 프로젝트에서 클래스나 타입 등을 import 할때 IDE(VS Code)에 의해 Auto suggestion 툴팁을 볼 수 있다.
해당 클래스를 import 하겠다고 enter를 입력하게 되면 import type으로 불러온다.

이때 문제점은 다음과 같다.

 

1. Controller에서 @Body 데코레이터에 클래스를 명시하고 클래스 프로퍼티에 class-validator를 통해 유효성 검사를 실시할 때 해당 클래스를 import type으로 타입을 명시한다면 validator가 동작하지 않는다.

2. Service, Repository 등의 의존성 주입이 필요한 객체를 사용하는데 이때도 역시 import type으로 의존성 주입이 실행될 경우 어플리케이션 실행 과정에서 에러가 발생한다.

이를 해결하기 위한 간단한 방법을 알아본다.

 

 

해결방법

Vscode Extension에서 'import'라고 검색하면 Auto import -ES6, TS, JSX, TSX가 나올 것이다. 이를 설치한다.

 

Visual Studio Code의 설정(Cmd + ,) 창으로 들어가서 Typescript > Suggest : Auto imports 에 체크박스가 돼있다면 이를 해제한다. 만약 이를 해제하지 않을 시 IDE와 Extension에 의해 2개의 Suggestion이 생기게 된다.

 

이렇게 설정을 끝마친 후에 툴팁에 의한 Auto import를 수행할 경우 import 문법으로만 각종 클래스, 타입들을 import 할 수 있다.