타입스크립트 | 타입 선언 파일(d.ts) 이란? 설치와 찾는법

자바스크립트의 역사가 긴 만큼 세상에 수많은 자바스크립트 코드가 존재합니다. 타입 선언 파일을 사용하면 자바스크립트 라이브러리를 타입스크립트 프로젝트에 쉽게 통합할 수 있습니다. 타입 선언 파일을 찾고 설치하는 법에 대해서 알아보겠습니다.

---

타입 선언 파일 이란?

타입 선언 파일은 사용하려는 라이브러리에 대한 타입 정보가 포함되어 있는 파일로서 프로젝트에 추가하는 파일입니다. 이 파일에는 세부 구현 정보가 포함되어 있지 않습니다. 주로 타입스크립트 컴파일러가 사용 중인 라이브러리에 대해 코드 타입을 검사할 수 있도록 하는 인터페이스로 구성됩니다.

타입 스크립트 코드에도 유용할 수 있지만, 주로 자바스크립트 라이브러리를 타입스크립트로 래핑 하는 래퍼로 사용됩니다. 이미 많은 인기 있는 자바스크립트 라이브러리 및 프레임워크에 대한 구조한 강력한 타입 검사를 제공하고 있습니다.

타입 선언 파일은 구현이 없기 때문에 주요 이점은 타입 검사 및 편집기 지원이라고 볼 수 있습니다. 타입 검사는 에러가 프로덕션에 적용되기 전에 에러를 찾는데 도움이 됩니다. 또한 타입스크립트를 지원하는 vscode와 같은 편집기 라이브러리에 대한 코드 완성을 제공하므로 객체에 필요한 속성과 메서드를 더 쉽게 찾을 수 있습니다.

이러한 타입 선언 파일은 모두 d.ts파일 확장자로 끝나게 됩니다.

 

타입 선언 파일 찾아 설치하기

타입 선언 파일은 익숙한 도구인 npm을 사용하여 설치합니다. 선언 파일은 Typed라는 이름의 GitHub 저장소에 저장되며 @types 에서 설치할 수 있습니다.

• @types/<library name>

주의해야 할 점은 선언 파일을 설치하는것이 라이브러리 자체를 설치하는 것을 대체하는 것이 아니라는 점입니다. 라이브러리를 감싸는 래퍼일 뿐이므로 둘 다 프로젝트에 포함 되어 있어야 합니다.

npm을 사용해서 lodash를 설치하고 lodash 선언 파일 설치 과정을 살펴보겠습니다. 공식 타입스크립트 사이트에서 필요한 특정 타입 선언 파일이 있는지 검색할 수 있습니다.

 

1. typescriptlang.org에 접속후 상단 메뉴의 Tools를 선택합니다.

 

2.Tools페이지에서 Type Search를 찾아 클릭합니다.

 

3. 원하는 패키지를 검색

lodash를 검색한 결과입니다. 노란 박스는 lodash 라이브러리 자체에 관한 것입니다. 주황 박스가 타입 선언입니다. @type 그룹에 속해있으며 / 다음으로 lodash 패키지 명과 같은 이름으로 되어있습니다. 오른쪽에 프로젝트에 추가하기 위해 실행할 수 있는 명령을 볼 수 있습니다.

 

4. 터미널에서 패키지 설치

lodash와 타입 선언 파일을 같이 설치하겠습니다.

npm i lodash
npm i @types/lodash --save-dev

 

lodash패키지와 lodash의 타입 선언 파일이 잘 설치되었습니다.

프로젝트의 @type폴더에 lodash를 보면 수많은 d.ts파일이 있는 걸 볼 수 있습니다.

---

타입 선언 파일의 효과

lodash를 import 해보면 타입 선언 파일의 효과를 바로 확인할 수 있습니다.

lodash를 import 하였고 _에 점으로 접근하여 쉽게 메서드를 찾고 타입형을 확인해 볼 수 있습니다. 우리는 upperCase가 string 타입을 매개변수로 받고 다시 string을 리턴할 것을 알고 쉽게 확인할 수 있습니다. 이러한 타입스크립트의 장점을 사용해 사전에 에러를 검출할 수 있습니다.
만약 타입 선언 파일이 없다면 아래와 같이 표시될 것입니다.

메서드를 찾기 어려울 뿐 아니라 어떤 타입이 필요하고 리턴되는지 알 수 없게 되어버립니다. 타입 스크립트를 사용하는 이상 타입 선언 파일은 선택이 아니라 필수라고 생각 됩니다.