모듈

export / import

타입스크립트는 CommonJS/AMD/UMD 방식의 모듈을 위해
export = ABC, import ABC = require('abc') 문법도 제공함
이것은 ESM 기본 내보내기 (export default)와 같음

컴파일 옵션에서 "esModuleInterop": true 설정 시 ESM 기본 내보내기 방식으로 사용 가능

// CommonJS/AMD/UMD 방식
import ABC = require('abc');
import * as ABC from 'abc';

// "esModuleInterop": true 설정 시 
// ESM 기본 내보내기 방식
import ABC from 'abc';

 

외부 모듈의 타입 선언

모듈 구현 + 타입 선언이 동시에 이루어지는 타입스크립트와 다르게
구현만 존재하는 자바스크립트 모듈 사용 시
컴파일러가 이해할 수 있는 모듈의 타입 선언이 필요함

이것을 .d.ts 파일로 만들어 제공 가능

import _ from 'lodash'; // Error. 'lodash' 모듈을 찾을 수 없음

console.log(_.camelCase('import lodash module'));

// types/lodash.d.ts

declare module 'lodash' {
  interface Lodash {
    camelCase(str?: string): string;
  }
  export const _: Lodash;
}

 

방법 1. 타입 선언 경로 설정

// 타입스크립트 구성 옵션으로 /types 폴더를 타입 선언(d.ts) 경로로 설정
{
  "compilerOptions": {
    // 기본값
    // "typeRoots": ["./node_modules/@types"]
    
    // 덮어쓰기
    "typeRoots": ["./types", "./node_modules/@types"]
  }
}

 

방법 2. 트리플 슬래시 참조 사용

컴파일 프로세스에 추가적인 파일을 포함하도록 컴파일러에게 지시함

/// <reference path="./types/lodash.d.ts"/>
import _ from 'lodash';

 

방법 3. 자동으로 .d.ts 파일 연결하기

1. 자바스크립트 모듈 이름과 .d.ts파일의 모듈 이름이 같아야 함
2. tsconfig 파일의 include 속성의 경로 안에 .d.ts파일이 있어야 함

 

하지만 매번 직접 타입 선언을 작성하는 것은 매우 비효율적임
다른 사용자들이 만든 모듈 타입을 사용하는 것이 효율적 !

# 타입 정의 설치
npm install -D @types/모듈이름

# 타입 정의 존재 확인
npm info @types/모듈이름

Definitely Typed

GitHub - DefinitelyTyped/DefinitelyTyped: The repository for high quality TypeScript type definitions.