@types/ 패키지는 뭘 하는걸까?

타입스크립트 프로젝트에서 패키지들을 보면 개발 의존성에 @types/.. 패키지들이 있는 것을 주로 볼 수 있다.

이런 패키지들이 라이브러리의 type을 제공 해준다는것은 어렴풋이 알고 있어서 이번 기회에

왜 생기게 되었고 어떤 문제를 해결 하는지에 대해 한번 알아보자

---

어떤 문제를 해결하려 했을까 ?

타입스크립트가 출시되기 이전 많은 라이브러리들은 자바스크립트로만 작성되었고, 동적 타입 언어인 자바스크립트는 정적 타입 정보를 기본적으로 제공하지 않았다. 이로 인해 TypeScript 환경에서 해당 라이브러리를 사용할 경우, 타입 안정성과 자동 완성 등의 TypeScript 이점을 온전히 활용하기 어려운 것이다.

 

이 문제를 해결하기 위해, 커뮤니티 주도의 타입 정의 저장소인 DefinitelyTyped가 등장한 것이다.

DefinitelyTyped에서는 각 라이브러리에 대한 타입 정의 파일(. d.ts)을 작성하여 중앙 집중적으로 관리하며,
이 파일들은 NPM의 @types 스코프로 발행되어, 개발자들이 쉽게 설치하고 사용할 수 있도록 제공된다.

또한, TypeScript는 ndde_Modules/@types에 자동으로 타입 정의를 찾아 준다.

 

@types/react도 DefintelyTyped 저장소에서 확인할 수 있다.

 

TypeScript는 node_modules/@types에서 자동으로 타입 정의를 찾으므로 프로그램에서 이러한 타입을 사용할 수 있도록 하기 위해 다른 단계가 필요하지 않습니다.

자체 정의
라이브러리가 자체 타입을 번들로 제공하지 않고 DefinitelyTyped에 정의가 없는 드문 경우, 선언 파일을 직접 작성할 수 있습니다. 부록 선언 파일 작성하기에서 가이드를 참조하세요.

선언 파일을 작성하지 않고 특정 모듈에 대한 경고를 무음화하려면 프로젝트의 .d.ts 파일에 해당 모듈에 대한 빈 선언을 넣어 모듈을 아무 유형으로 빠르게 선언할 수도 있습니다. 예를 들어 일부 유형이 없는 모듈이라는 이름의 모듈을 정의 없이 사용하려는 경우 다음과 같이 작성하면 됩니다:

이러한 방식 덕분에, TypeScript 환경에서도 자바스크립트 라이브러리를 안전하게 사용할 수 있으며, 효율적인 개발이 가능해진 것이다.

@types는 뭘 해주는 걸까?

자주 사용하는 React를 통해 하나씩 확인해 보자.

먼저 @types/react 패키지는 설치하지 않고 react만 설치한다.

 npm add react

 

React를 설치한 후 index.jsx 파일을 생성하여 간략하게 useState를 작성해봤을 때 useState에 타입이 없는 걸 확인할 수 있다.

 

그렇다면 @types/react를 설치한 이후에 타입이 생겼을지 확인해 보자.

역시 useState의 타입이 생기고 useState 경로를 타고 들어가 보면 nodeModules에 @types 폴더가 생기고 안에는 React 폴더와 index.d.ts 파일이 생성된 것도 확인할 수 있다.

index.d.ts의 파일 내부는 useState, MouseEventHandler 등 리액트에서 사용하는 타입들이 정의되어 있다.

위에서 말한 거와 같이 DefinitelyTyped에서 하나의 스코프로 발행하는지 React 말고 다른 라이브러리 @types를 설치해 봤다.

@types/express를 설치해봤더니 React 이외에 다른 폴더와 index.d.ts 파일이 생긴 걸 확인했다..!

이게 가능한 이유는 NPM에 scoped packages 기능 때문이다.

이 기능은 패키지 이름에 @접두사를 붙인다면 nodeModules는 해당 경로를 만들고 그 안에 설치하게 된다.

 

DefinitelyTyped에서는 이걸 컨벤션으로 맞춰 위처럼 @types라는 스코프(폴더) 안에 패키지들이 설치되는 것이다.

 

우린 이것으로 아래와 같은 정보를 알 수 있었다.

• @types/ 패키지는 타입 정의 파일(. d.ts)을 통해 라이브러리의 타입을 정의해 준다.
• @types/ 를 시작으로 패키지를 설치한다면 NPM scoped packages를 통해 하나의 폴더 안에서 관리된다.
• 위 동작들은 DefinitelyTyped 컨벤션을 통해 만들어진다.

잠깐의 트러블 슈팅..!

 

단계 별로 하나씩 확인하기 위해 테스트 중 이상한 문제가 있었다.

React만 설치하고 확인했을 때 예상한 동작은 useState의 타입이 없는 것을 예상했지만 타입이 존재했다

 

처음에는 내부적으로 타입이 존재한 건가 했지만 자세히 봐보면 경로가 사용 중인 IDE인 WebStorm 경로인걸 확인할 수 있었다.

 

경로에 /plugins 가 들어간 걸 확인하고 설정에서 보니 정말 아래와 같은 플로그인이 있는 걸 확인해볼 수 있었다.

 

비활성화를 하니 useState의 타입이 잡히지 않는 걸 확인할 수 있었다..!

 

만약, 내가 @types/react를 설치하지 않은 상태인데 타입이 나와서 그대로 사용하다 다른 작업자 같은 환경으로 시작했다면 경악을 했을 것이다. 또 기본 16 버전으로 되어 있기에 다른 버전에서의 타입 문제를 이상하게 헤매고 있었을 거 같다.

 

IDE의 기본 제공해 주는 게 많아서 좋지만 예상치 못한 것도 발생할 수 있다는 걸 생각하게 됐다.

 

 

참고 자료

https://www.typescriptlang.org/docs/handbook/2/type-declarations.html