Typescript 타입 정의 파일

typescript는 컴파일 과정을 거쳐 타입 검증을 하는데, 검증을 하려면 타입이 정의된 파일이 있어야 한다.

typescript로 작성한 모듈이라면 문법 자체에 타입이 있으니 문제없지만 javascript로 작성된 모듈을 사용하려면 컴파일러가 타입 검증을 할 수 없게 된다. 모듈의 타입을 알려주기 위해 .d.ts 파일을 두어 타입을 선언해 줘야 한다. 하지만 이 파일은 타입스크립트의 컴파일 과정에 필요한 거라서 npm 같은 저장소에 공개된 모듈들의 필수사항이 아니다.

 

따라서 typescript 프로젝트에서 .d.ts파일이 없는 외부 javascript 모듈을 받아온다면 문제가 발생한다. 다행히도 요새는 @types/{module_name}의 타입 정의 파일도 배포되기 때문에 타입 전용 모듈도 받음으로써 컴파일 문제를 해결할 수 있다. 하지만 아무래도 실제 구현체가 아닌 타입 정의 파일이라 아예 만들지 않았다던지, 잘못 정의되어 있다던지 발목을 잡는다. 이 때는 직접 타입 정의를 해줘도 된다.

 

그럼 직접 타입 관련 문제를 겪어보고 해결해 보자.

 

$ npm install uuid

 

import { v4 } from 'uuid'

console.log(v4())

 

흔한 uuid 모듈을 가져와 v4로 uuid를 출력하도록 작성했다. 타입스크립트에서 사용해보면 uuid의 타입 정의 파일이 없어서 에러가 발생한다.

error TS7016: Could not find a declaration file for module 'uuid'.
Try npm install @types/uuid if it exists or add a new declaration (.d.ts) file containing declare module 'uuid';

 

제시해주는 해결책을 보면 역시 @types/uuid를 사용하거나, 타입 정의 파일인 .d.ts를 만들라고 쓰여있다.

 

$ npm install @types/uuid

 

타입 정의 파일을 설치해보면 예상한 대로 ./node_modules/@types/uuid/index.d.ts 파일이 존재한다.
export const v4: v4;로 v4를 export 하고 있고 v4 type을 따라가다 보면 아래 코드에 정의되어 있다.

 

export type v4String = (options?: V4Options) => string;
export type v4Buffer = <T extends OutputBuffer>(options: V4Options | null | undefined, buffer: T, offset?: number) => T;
export type v4 = v4Buffer & v4String;

 

타입 모듈을 설치한 후 실행하면 컴파일에 성공하고 uuid도 잘 출력된다.

 

그러면 다시 npm uninstall @types/uuid로 타입 모듈을 지우고 직접 만들어 보자.
./src/@types/uuid폴더를 만들고 여기에 index.d.ts파일에 타입을 정의한다. 실제로는 파라미터도 있고 추가적인 타입이 필요하지만 가장 간단하게만 설정했다.

 

declare module 'uuid' {
  const v4: () => string

  export { v4 }
}

 

이처럼 최소한으로 v4라는 함수 타입을 선언해주면 타입스크립트 컴파일에 성공하고, javascript는 ./node_modules/uuid를 수행하며 문제없이 동작한다.