sanguk.dev
작성완료
타입스크립트 모듈 시스템

타입스크립트 모듈 시스템

타입스크립트의 모듈 시스템은 ES6+의 모듈 개념과 유사하며, export와 import 키워드를 사용하여 다른 파일에서 접근할 수 있는 자체 유효 범위를 가진다. export 문법을 사용하여 변수나 함수를 내보내고, import 문법을 통해 다른 파일에서 이를 불러올 수 있다. 예를 들어, types.ts 파일에서 정의된 인터페이스와 열거형을 index.ts에서 가져와 사용할 수 있다.

TypeScript

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

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

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

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

export 문법

typescript
export 변수, 함수

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

import 문법

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

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

모듈화 예제

types.ts

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

index.ts

typescript
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
}