타입 모듈화

📖 타입 모듈화

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

타입스크립트의 모듈이라는 개념은 ES6+의 export, import를 사용하는 Modules 개념과 같다.

타입스크립트의 모듈의 필요성

실제 서비스를 구현하다보면 코드들이 많아지면서 혹은 특정 타입을 여러개의 파일에서 나누어 쓰게 되면서 한 곳에서 관리해서 사용하는 로직이 필요하게 된다.

이럴때 파일하나에 타입들을 정리해서 모듈 시스템을 사용한다면 가독성과 유지보수 측면에서 효율적으로 다룰 수 있다.

타입스크립트의 모듈 예제

• Todo라는 인터페이스 타입을 정의하는 types.ts 파일 생성 필요한 타입을 export해준다.

// types.ts
export  interface Todo {
	title:string;
	checked:boolean;
}

• 실제 app를 구현하는 app.ts파일에서는 Todo 타입을 import해서 사용해주면 된다.

// app.ts
import {Todo} from  './types'
const item:  Todo = {
	title:'할 일1',
	checked:false
}

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

Import & Export

• 자바스크립트 코드를 모듈화 할 수 있는 기능
• 이전에는 AMD나 commonJs와 같은 모듈로더, 모듈화 시스템들이 있었다.
• 최신 자바스크립트 문법은 import와 export로 표준화되었다.

모듈화 필요성

파일마다 자바스크립트의 고유한 영역이 나누어지는게 아니라서, 이런 부분들이 실제로 html파일을 로딩하더라고 변수의 유효범위가 분리가 되어있지 않기 때문에 변수가 중복되어 에러가 발생하거나 기타 예기치못한 상황들이 발생할 수 있었다. 그런 부분을 해결하기 위해 모듈화가 필요했다.

Import & Export 기본문법

export

export 변수, 함수

import

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

참고출처

• 타입스크립트 입문 - 기초부터 실전까지
• 타입스크립트 모듈
• ES6 Modules