[타입스크립트 입문 - 기초부터 실전까지] 타입 모듈화

타입스크립트의 모듈 시스템

타입스크립트에서 가리키는 모듈이라는 개념은 ES6+의 Modules 개념과 유사하다.
모듈은 전역 변수와 구분되는 자체 유효 범위를 가지며 export, import와 같은 키워드를 사용하지 않으면 다른 파일에서 접근할 수 없다.

자바스크립트의 모듈 시스템

Import & Export
Import와 Export는 자바스크립트의 코드를 모듈화 할 수 있는 기능이다. 여기서 모듈화란 다른 파일에 있는 자바스크립트의 기능을 특정 파일에서 사용할 수 있는 것을 의미한다.

export 문법

export 변수, 함수

• 다른 파일에서 가져다 쓸 변수나 함수의 앞에 export 라는 키워드를 붙인다. 익스포트된 파일은 임포트로 불러와 사용할 수 있다.
  
  

import 문법

import { 불러올 변수 또는 함수 이름 } from '파일 경로';

• 익스포트된 변수나 함수를 {}에 선언한 뒤 해당 파일이 있는 경로를 적어준다.

전화번호부 애플리케이션에 모듈화 실습해보기

프로젝트 실습 파일:
실습자료 - learn-typescript - quiz - 2_address-book - src - index.ts , types.ts

index.ts

import { PhoneNumberDictionary, Contact, PhoneType } from './types';

types.ts

interface PhoneNumberDictionary {
    [phone: string]: {
      num: number;
    };
  }
  
interface Contact {
    name: string;
    address: string;
    phones: PhoneNumberDictionary;
  }
  
enum PhoneType {
    Home = 'home',
    Office = 'office',
    Studio = 'studio'
  }

export {
    PhoneNumberDictionary,
    Contact,
    PhoneType
}

---

💡 참고

• 타입스크립트의 모듈화
• ES6 Modules
• 자바스크립트 모듈화 역사