타입스크립트 | 타입 선언 파일(d.ts) 만들기

오래된 자바스크립트 코드를 타입스크립트 프로젝트에 사용하고 싶을 때가 있습니다. 라이브러리 개발자에 의해서 관리되는 타입 선언 파일( d.ts) 이 없다면 만들어 사용할 수 있습니다. d.ts 파일을 만들어 사용하는 과정을 알아보겠습니다.

---

타입 선언 파일 이란? (Type Declaration File)

자바스크립트 코드를 타입스크립트 프로젝트와 통합하는 데 사용할 수 있는 도구입니다. 일반 자바스크립트 파일에서 가져온 코드에 타입 정보를 추가해주는 해주는 파일입니다. 타입 선언 파일을 사용하면 코드를 참조할 때 힌트를 사용할 수 있습니다. 또한 타입 스크립트 프로젝트를 컴파일할 때 타입 검사 및 기타 여러 기능에 접근할 수 있습니다.

타입 스크립트에서 자바스크립트 라이브러리를 사용할 때는 같이 제공되는 타입 선언 파일도 함께 설치해서 사용하는 것을 권장합니다. 만약에 타입 선언 파일이 없다면 직접 추가할 수 있습니다.

제공되는 타입 선언 파일을 찾거나 인스톨 하는 과정은 아래 블로그 글을 참조해 주세요.

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

 

선언 파일 없이 사용했을 때 문제점

lib폴더의 language.js 파일에 아래와 같이 자바스크립트로 된 오래된 코드가 있습니다.

위의 함수는 두개의 매개변수를 받아 문자열을 리턴해 주고 있습니다. emphasize 함수는 문자열을 강조해 주는 함수로 문자열을 받아 magnitude의 개수만큼 문자열에 느낌표를 추가해주고 반환하는 함수입니다.

 

문제점을 알아보기 위해 타입 선언 파일 없이 타입 스크립트 코드에서 사용하겠습니다.

js파일을 import하였고, emphasize 함수를 호출하고 있습니다. 하지만 함수를 호출할 때 어떠한 힌트도 나오지 않습니다. 기존 emphasize 함수를 알고 있는 개발자라면 문제가 없겠지만 라이브러리를 사용만 하는 입장에선 코드를 찾아봐야 하니 매우 귀찮습니다.

 

이상태에서 브라우저에서 화면을 띄워보겠습니다.

재고파악 이라는 헤더에 느낌표를 붙여서 강조해 주고 싶었지만 실패했습니다. 어디가 잘못됐는지 자바스크립트 라이브러리 코드를 살펴보기 전까지 알아내기 어렵습니다.

 

d.ts 타입 선언 파일 만들어 사용하기

개선을 위해 타입 선언을 만들어 사용해 보겠습니다. lib폴더에 language.d.ts라는 새 파일을 만들겠습니다.

타입 선언 파일은 확장자를 d.ts로 만듭니다. 같은 디렉터리 안에 자바스크립트 파일과 같은 이름을 지정하고 d.ts파일로 지정하면 타입 스크립트가 해당 파일을 자동으로 감지할 수 있습니다.

d.ts 파일의 내용은 타입과 함께 함수를 선언해 주고 export 함수로 만들어 주면 됩니다. emphasize는 두 매개변수 string타입과 number 타입을 가지고 반환되는 값은 string입니다. 이것으로 타입 선언이 완료되었습니다.

이제 타입스크립트 코드로 돌아가서 emphasize 함수를 사용해 보겠습니다.

이전에 작성해 놨던 코드에서 빨간 줄로 잘못되었다고 표시되고 있습니다. 마우스 오버해보면 함수의 선언이 표시가 되고 두 번째 매개변수가 없는 걸 알려주고 있습니다. 바로 이러한 장점 때문에 타입 선언을 사용해야 합니다. 이제 두 번째 매개변수를 줘서 함수를 호출하겠습니다.

코드에서 에러가 사라졌습니다. 이제 화면에서 emphasize함수가 잘 작동하는지 확인해 보겠습니다.

느낌표로 헤더 문자열이 강조가 잘 되었습니다.

---

타입 선언 파일이 있음으로 타입 스크립트 프로젝트에서 효율적으로 자바스크립트 코드를 사용할 수 있었습니다. 프로젝트 내에서 오래된 js파일을 사용하고 있다면 순차적으로 d.ts파일을 만들어 프로젝트를 개선하는 것이 좋습니다.