[TypeScript] 정의 파일(Declaration Files) d.ts 파일은 뭐지?!

파일 정의를 하는 이유!

프로젝트를 시작하면 여러 라이브러리를 설치한다.
대부분 자바스크립트로 만들어진 패키지 혹은 라이브러리다.
만약 타입스크립트로 프로젝트를 시작했을 때 타입스크립트는 설치되는 JS 파일을 읽지 못한다.
타입이 정의되어 있지 않기 때문에 에러를 발생시킨다.
따라서 JS 파일 설치시 TS에게 JS 파일의 모양을 설명해줘야 한다.

이렇게 설명 되어 있는 파일을 Declaration File이라고 한다.
이것이 TS에게 특정 라이브러리의 모양을 설명해주고 TS는 그것을 바탕으로 동작한다.

strict 모드

strict 모드를 설정하지 않으면 nodemodules에 있는 JS 파일을 그냥 import 해와도
에러가 나지 않지만 TS로부터 보호 받을 수 없다.

TS를 사용하는 이유가 더 엄격하게 코드를 관리하여 나타날 수 있는 에러를 막기 위해서이기 때문에 TS 쓸 때는 strict 모드를 주로 사용한다. tsconfig.json에서 strict 모드 설정이 가능하다.

정의 파일은 그래서 뭔데?!

d.ts파일에 사용하려는 라이브러리의 타입들이 지정되어져 있고 TS는 이걸 바탕으로 자동완성 기능을 제공한다.

• 변환할 JS 파일

// myLibrary.js 파일
export function init(config) {
  return true
}

export function exit(code) {
  return code + 1
}

• JS 타입을 정의한 d.ts 파일

// myLibrary.d.ts 파일 내부
interface Config {
    	url: string
    }

declare module "모듈" {
	function init(config: Config): boolean
    function exit(code: number): number
}

TS는 위와 같은 형식으로 JS 파일의 내용을 이해한다.
만약 TS 프로젝트에서 localstorage를 사용하게 되면, TS는 이미 누군가 만들어 놓은
localStorage.d.ts 파일에서 설명되어져 있는 localStorage의 메서드를 사용할 수 있게 된다.

사용만 하는 입장에서 d.ts 파일을 정의할 일은 없지만 그래도 어떻게 TS가 JS 파일을 어떻게 읽어서 동작하는지 알아야 한다!

메서드 사용시 자동완성 되는 안내

이런 안내 또한 d.ts 파일에서 작성한 주석의 내용이 그대로 출력되어 나오는 것이다!

기본적으로 TS프로젝트에서는 d.ts 파일을 하나하나 지정해줄 필요는 없다. 왜냐하면 누군가가 이미 다 작성해 놨고 npm으로 패키지를 설치하면 nodemodules 폴더에 이미 포함되어 있기 때문이다.