React 프로젝트를 진행하면서 외부 라이브러리를 사용하다가 알수 없는 에러가 발생했다.
검색해도 무슨 에러인지 알 수 없어서 직접 코드를 뜯어보려고 ctrl 로 파고 들어갔는데, d.ts 파일만 나오고 인터페이스만 보여줄뿐 구체적인 코드는 안나오는 것이다.

결론적으로, 동작하는 코드는 해당 라이브러리의 여러 파일 중 어딘가에 자바스크립트 파일로 존재했다.
ctrl 로 들어갈 수 없었을 뿐 존재했다.

그럼 d.ts 파일은 뭐지?
왜 존재하는지 알아봤다.

TypeScript의 d.ts: 선언 파일

내가 들어갔던 d.ts 파일은 TypeScript 코드로 작성한 선언 파일이다.
d는 declaration, 선언을 의미한다.
선언 파일은 타입스크립트 코드가 타입을 추론할 수 있도록 선언해놓은 파일이다.

말그대로 선언 파일이어서 파일 안에 어떤 변수가 무슨 타입인지 선언해놓은 내용밖에 없다.
직접 d.ts 파일에 들어가보면 수많은 declare와 인터페이스들이 반겨준다.

왜 있지?

라이브러리는 자바스크립트 파일로 동작하는데 이 라이브러리를 타입스크립트 코드에서 사용하려면 타입을 추론할 수 없는 문제가 발생한다.
그래서 에러가 발생하지 않도록 d.ts 선언파일을 만들어 라이브러리에 사용되는 변수들의 타입을 선언해놓는다.

결론적으로, 타입스크립트 코드에서 자바스크립트로 작성된 라이브러리를 타입 에러없이 사용하기 위해 선언파일이 존재한다.

d.ts 선언파일이 없다면?

위에서 말한대로 타입 추론을 할 수 없어서 에러가 발생한다.
만약 외부 라이브러리를 사용하는데 라이브러리에 선언파일이 없어서 에러가 발생한다면, 선언파일을 따로 만들어서 에러를 해결할 수 있다.

d.ts 선언파일 만드는 방법 (d.ts 파일 정의하기)

  1. 직접 index.d.ts 파일을 작성하거나
  2. tsconfig.json 파일에서 옵션설정해주기
    compilerOptions의 allowjs, declaration 등이 선언파일과 관련된 옵션

외부 라이브러리를 사용하는 사용자 입장이라면 1번 방법대로 하고, 만약 라이브러리 개발자 입장이라면 1, 2 둘 중 하나를 선택할 수 있다.
2번 방법의 경우, 컴파일 시 index.d.ts 파일을 자동으로 생성해주는 방법이다.