모듈화란 쉽게 말해서 다른 파일에 있는 자바스크립트의 기능을 특정 파일에서 사용할 수 있는 것을 의미합니다.
타입스크립트의 모듈 시스템은 자바스크립트에서 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'
'개발이야기 > Typescript' 카테고리의 다른 글
| 유틸리티 타입 - Partial (0) | 2021.03.13 |
|---|---|
| 타입 호환 (Type Compatibility) 이란 (0) | 2021.03.08 |
| 타입 단원(Type Assertion) & 타입 가드 (Type Guard) (0) | 2021.03.07 |
| 타입 추론 (Type Inference) (0) | 2021.03.03 |
| 타입 스크립트 타입 선언 연습 (0) | 2021.03.02 |
