TypeScript / 타입 선언 파일

Type declaration file

자바스크립트 내장 객체, 또는 외부 라이브러리, API 등을 설명하는 파일로,  .d.ts 의 확장자를 가진다.

실제 구현은 포함하지 않으며. 특정 타입이 존재한다는 것을 선언한다.

 

 

 

console.log()에서 console에 대고 ⌘ 키를 누른채로 클릭해보면 우측처럼 lib.dom.d.ts 파일을 확인할 수 있다. 

파일을 보면 알겠지만 .ts 파일에는 실행이 가능한 구현 코드를 작성한다면,

 .d.ts  파일에는 타입 정보만 포함하고 있다.  .d.ts 파일은 타입 정보를 제공해 타입 검사를 진행하고 js 호환성을 제공하는 역할을 한다.

 

 

 

예시

외부 라이브러리를 설명하는 역할도 한다고 했으므로 임의의 라이브러리를 설치했다.

npm install lodash @types/lodash

 

 

declaration-files.ts

import _ from 'lodash';

let max = _.max([3, 2, 6, 4, 7, 9, 1]);
console.log(max);

let shuffledArray = _.shuffle([212, 2, 1, 6, 4, 3]);
console.log(shuffledArray);

 

 

 * 이대로 컴파일하고 실행하면 에러가 날 수도 있다.

그럴 때는 tsconfig.json에서 esModuleInterop 이 true로 되어있는지 확인해봐야한다. (false면 true로 변경하기!) 

 

{
  "compilerOptions": {
    "target": "es6", // 출력 JavaScript의 문법 버전 (예: async/await 가능)
    "module": "commonjs", // Node.js 환경에서 사용하는 모듈 시스템
    "esModuleInterop": true, // CommonJS 모듈을 ES6 스타일(import ...)로 사용할 수 있게 함
    "forceConsistentCasingInFileNames": true, // 대소문자 일관성 없으면 오류 (ex: import와 실제 파일명이 다를 때)
    "strict": true, // 엄격한 타입 검사 전체를 켬 (아래 모든 strict 계열 옵션 포함)
    "skipLibCheck": true, // node_modules 안의 .d.ts 파일 타입 검사는 생략 (빌드 속도 향상)
}

 

 

 

 

여기서 직접적으로 타입을 정의해줄 수 있다.

 

types.d.ts

declare module 'lodash' {
  function max(...args: any[]): number;
  function shuffle(...args: any[]): any[];
}

 

타입 정의를 해줬을 때

 

하지만 이 방법은 사용하는 메서드가 많아질수록 같이 추가해야해서 번거로운 작업이 될 수 있고, 직접 정의하는 것이라 정확하지 않을 수 있다.

두번째 방법은 타입 정의를 따로 설치하면 되는데, 위에서 함께 다운받았던 @types/loadash는 lodash에서 제공해주는 타입 선언 파일이라 얘를 사용하면 된다.

 

이제 types.d.ts가 없어도 아래와 같이 명확한 타입정의를 확인할 수 있다.