Typescript에서 설치된 라이브러리를 불러오지 못할 때

VS code는 코드를 작성하는 동안에도 자동완성이 지원되고, 만약 자동완성 창이 안 뜬다면 ctrl + space를 입력해 창을 직접 띄울 수 있고, ①과 같이 나온다. 이 자동완성에서 enter를 입력하면 미리 함수를 import하지 않았더라도 자동으로 import문이 윗쪽에 추가되며, 함수 혹은 변수를 활용할 수 있게 된다.

하지만 Typescript로 프로그램을 작성한다면, npm에서 받은 패키지에 빌트인으로 d.ts 파일이 존재하지 않는다면 ②와 같이 패키지명이 뜨지 않는다. 심지어 직접 import를 해도 첫 번째 이미지처럼 오류 표시로 빨간줄이 그어진다.
이럴 때 대부분의 경우, 패키지 이름 앞에 types를 붙여서 검색하면 Typescript용으로 d.ts 파일이 포함된 타입 패키지의 npm 링크가 나오고, 이 패키지를 같이 설치하면 정상적으로 자동완성이 된다.
(참고로 이 경우에는 첫 번째 이미지에 있는 문구 중 두 번째 단락에 있는 "Try npm i --save-dev @types/mapbox__mapbox-gl-draw"로 어떤 @types 패키지를 받아야 할지 바로 알려준다. 저 명령어를 터미널에 입력하면 해결된다.)

예를 들어, @mapbox/mapbox-gl-draw 패키지를 받는다면, types @mapbox/mapbox-gl-draw 로 검색을 해보고, 여기에서 나온 패키지인 @types/mapbox__mapbox-gl-draw를 같이 받으면 된다. 즉 npm i @mapbox/mapbox-gl-draw 와 npm i -D @types/mapbox__mapbox-gl-draw 를 각각 입력해서 패키지를 설치하면 된다.
여기서 @types 패키지만 D 옵션을 준 이유는, 일반 의존성이 아닌 개발 의존성에 추가해서, 배포 시에 불필요하게 설치되는 것을 막기 위함이다.

참고로 npm install 은 npm i 와 같고, npm i -D 은 npm i --save-dev 와 같다.
또한, 배포 시에 devDependencies를 제외한 패키지를 설치하려면 npm i --omit=dev 명령어를 입력하면 된다.

그럼 마저 즐거운 코딩 하시길!