개발이야기/Typescript

타입스크립트 모듈시스템

cafe-jun12 2021. 3. 9. 23:31
반응형

모듈화란 쉽게 말해서 다른 파일에 있는 자바스크립트의 기능을 특정 파일에서 사용할 수 있는 것을 의미합니다.

타입스크립트의 모듈 시스템은 자바스크립트에서 ES6+모듈 시스템과 겉의 같다고 볼수가 있습니다. 우선 자바스크립트에서 왜 모듈화가 필요한지에 대해서 보겠습니다. 

<!-- index.html -->
<body>
  <script src="a.js"></script>
  <script src="b.js"></script>
  <script>
    getTotal(); // 200
  </script>
</body>
// a.js
var total = 100;
function getTotal() {
  return total;
}
// b.js
var total = 200;

기본적으로 자바스크립트의 파일 유효범위가 전역으로 설정이 되기 때문에 위 코드와 같이 각 파일에서의 변수명이 동일하다면 이후 실행되는 변수나 함수등에 대해서 겹쳐쓰게되는 현상이 발생하여 기존 코드가 오작동을 발생할수가 있습니다. 이러한 문제를 해결하기 위해 자바스크립트에서는 네임스페이스 모듈화 패턴이나 Require.js 와 같은 모듈화 라이브러리르 사용하여 구현을 했습니다. 

추후 자바스크립트에서는 별도의 모듈화 라이브러리를 사용하지 않고도 자바스크립트 언어 자체에서 모듈화를 지원하는 Import & Export 가 지원이 되었습니다. 

 

Import & Export 

 

기본 문법 

먼저 export 문법입니다.

export 변수, 함수

 

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

import 문법을 보겠습니다.

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

 

자바스크립트에서  Import & Export 는 타입스크립트에서도 동일하게 적용이 되기 때문에 전화번호부에 작성되어 있던 타입들을 분리해여 모듈화를 해보겠습니다. 

 

// 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 { Contact, PhoneType }

인터페이스 왼쪽에 export를 작성해도 상관은 없지만 관례는 제일 하단에 export 할 타입을 전부 명시하는것 입니다. 

그리고 아래 코드와 같이 import로 불러올 변수와 함수입름을 작성하고 파일 경로를 넣어주면 끝납니다. 

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

 

반응형