그냥 불러오면 되는거 아님?
- 나도 그런줄 알았는데 아니였다.
나의 경우
- uuid 라이브러리를 사용하기 위해 하던대로
npm i uuid로 설치 후에 import 문법을 이용하여 해당 라이브러리를 불러왔는데, 타입에 대한 에러가 발생했다. - 위의 경우에는 이전에 초기 설정을 하면서 설치했던
@types/라이브러리 이름이 기억나npm i를 이용하여 설치해주었고, 잘 얻어걸려 실행이 잘 되었기 때문에 큰 의문 없이 넘어갔다. - 하지만 현재 프로젝트에
react-router-dom라이브러리를 적용시켜야 했고, 이전의 일이 생각나 구글링을 조금 더 해봤다.
라이브러리와 타입 불러오기
- 라이브러리의 설치는 기존과 동일하지만, 해당 라이브러리의 타입을 정의해둔 패키지를 함께 설치해주어야 한다.
npm i react-router-dom
# 위의 내용만 작성해서는 TS 환경에서 작동되지 않는다.
npm i @types/react-router-dom
# 라이브러리의 타입을 정의해둔 패키지를 설치해야 정상 작동!결론
- 처음에 헷갈렸던 것은
@types/라이브러리 이름인 패키지들이 해당 라이브러리가 타입스크립트에서 작동될 수 있도록 리팩토링 된 하나의 독립적인 라이브러리인가? 였다. - 이를 알아보기위해 원본 라이브러리는 설치하지 않고
@types/???만 설치해 보았으나, 사용 할 수 없었다. - 즉,
라이브러리와라이브러리에서 사용되는 타입을 정의한 문서의 관계라는 것. - 결론적으로 내가 이해한 내용은 이렇다.
일반 자바스크립트 환경에서 잘 작동되던 라이브러리들도 타입스크립트 환경에서 작동되기 위해서는 타입지정이 필요하고,
이에 대한 타입을 정의해둔 패키지들을 npm을 이용하여 불러와줘야만 해당 라이브러리를 타입스크립트 환경에서 사용할 수 있게된다.
+
- 위처럼
@types/???패키지를 설치해주어야만 작동하는 라이브러리가 있는 반면, 그냥 잘 작동하는 라이브러리도 있는 듯 하다.
→ 타입지정이 필요없이 단순히 아이콘(svg) 만을 제공하는react-icons라던가, css 속성을 저장해둔styled-reset이 내가 만난 경우. - 그렇기 때문에 사용이 필요한 라이브러리가 있다면 해당하는 라이브러리가 타입스크립트 환경을 지원하는 지에 대한 고민도 필요 할 것 같다.
- 대체적으로 라이브러리 이름 앞에
@types/를 붙혀 검색하면 되는 듯 하다.
