📃 타입스크립트 입문 10 (마지막) : TS 모듈화

🎈 타입스크립트 모듈화란?

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

 

🎈 Import & Export

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

 

🎈 모듈화의 필요성

기본적으로 자바스크립트의 유효 범위는 전역으로 시작한다.

 

🎈 기본 문법

export 변수, 함수

다른 파일에서 가져다 쓸 변수나 함수의 앞에 export라는 키워드를 붙혀 사용한다.

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

 익스포트된 파일음 import로 불러와 사용할 수 있다.

 

🎈 타입스크립트 모듈화 예시

[types.ts]

export interface Todo {
  title: string,
  checked: boolean,
}

 

[app.ts]

import { Todo } from './types';

var item: Todo = {
  title: '할 일1',
  checked: false,
}

types.ts 라는 파일에 인터페이스를 다른 파일에 사용할 수 있도록 export[내보내기] 해주고, app.ts라는 파일에서 types를 import 시켜서 item 변수에 인터페이스 타입들을 불러왔다.