module 이해하기

타입스크립트에서는 index.ts와 같은 소스파일을 모듈이라고 한다. 원래 소스 파일 하나로 구현해도 되지만, 보통은 코드 관리와 유지,보수를 편리하게 하기 위해 모듈마다 고유한 기능을 구현하는 방식으로 소스코드를 분할한다.

그런데 이처럼 소스코드를 여러 개 모듈로 분할하면 어떤 모듈에 어떤 내용이 있는지 알게 해줘야 하는데 TS는 이를 위해 export와 import라는 키워드를 제공한다.
export는 기능을 제공하는 쪽에서 사용하고 import는 다른 모듈의 기능을 이용하는 쪽에서 사용하는 키워드이다.

아래 코드는 이름과 랜덤한 나이를 출력하는 코드를 소스파일 하나로 구현한 것이다.

let MAX_AGE = 100

interface IPerson {
    name: string
    age: number
}

class Person implements IPerson {
    constructor(public name: string, public age: number) {}
}

function makeRandomNumber(max: number = MAX_AGE): number {
    return Math.ceil((Math.random()*max))// Math.ceil() ->소수점 이하를 올림한다.
  										// Math.floor() ->소수점 이하를 버림한다.
                                       // Math.round() ->소수점 이하를 반올림한다.
}

const makePerson = (name: string,
    age: number = makeRandomNumber()) => ({name, age})

const testMakePerson = (): void => {
    let jane: IPerson = makePerson('Jane')
    let jack: IPerson = makePerson('Jack')
    console.log(jane, jack)
}

testMakePerson()

여러 function과 클래스가 있다보니 가독성이 떨어진다. index.ts 내용을 분리해서 모듈화해보자. person 디렉토리를 추가해서 Person.ts를 만들어준다.

ch02-2/src/person/Person.ts

let MAX_AGE = 100

interface IPerson {
    name: string
    age: number
}

class Person implements IPerson {
    constructor(public name: string, public age: number) { }
}

function makeRandomNumber(max: number = MAX_AGE): number {
    return Math.ceil((Math.random() * max)) //Math.floor() : 소수점 이하를 버림한다.
    //Math.ceil() : 소수점 이하를 올림한다.
   //Math.round() : 소수점 이하를 반올림한다.
}

const makePerson = (name: string,
    age: number = makeRandomNumber()) => ({ name, age })

그러면 index.ts 파일은 다음처럼 내용이 간단해진다.

ch02-2/src/index.ts

const testMakePerson = (): void => {
    let jane: IPerson = makePerson('Jane')
    let jack: IPerson = makePerson('Jack')
    console.log(jane, jack)
}

testMakePerson()

하지만 이 상태로 코드를 실행해 보면 IPerson과 makePerson이름을 찾을 수 없다는 오류가 발생한다. 이 오류는 TS컴파일러가 둘의 심벌의 의미를 알 수 없어서 발생한 것으로, TS의 export와 import 구문을 통해 해결 할 수 있다.

export 키워드

위에서 작성한 index.ts가 동작하려면 Person.ts에서 선언한 IPerson과 makePerson이란 심벌의 의미를 index.ts에 전달해야한다. 이때 export 키워드를 사용한다.

export interface IPerson {
    name: string
    age: number
}
...생략...
export const makePerson = (name: string,
    age: number = makeRandomNumber()) => ({ name, age })

import 키워드

export 키워드로 내보낸 심벌을 받아서 사용하려면 import키워드로 해당 심벌을 불러와야한다.
'import {심벌 목록} from '파일의 상대 경로'

import {IPerson, makePerson} from './person/Person'
...생략...

import * as 구문

import구문의 또 다른 형태는 다음처럼 as 키워드를 함께 사용하는 것이다.
src/utils 디렉토리를 만들어 makeRandomNumber.ts파일을 만들고 Person.ts에서 다음과 같은 내용으로 옮겨 적는다. export를 꼭 써주자.
src/utils/makeRandomNumber.ts

let MAX_AGE = 100

export function makeRandomNumber(max: number = MAX_AGE): number {
    return Math.ceil((Math.random() * max)) //Math.floor() : 소수점 이하를 버림한다.
    //Math.ceil() : 소수점 이하를 올림한다.
   //Math.round() : 소수점 이하를 반올림한다.
}

그리고 Person.ts 파일을 열고 첫 줄에 다음과 같은 import * as 구문을 작성한 후 마지막 행에서 makeRandomNumber함수 이름 앞에 U.코드를 추가한다.
ch02-2/src/person/Person.ts

import * as U from '../utils/makeRandomNumber'

export interface IPerson {
    name: string
    age: number
}

class Person implements IPerson {
    constructor(public name: string, public age: number) { }
}


export const makePerson = (name: string,
    age: number = U.makeRandomNumber()) => ({ name, age })

난수 발생 기능을 makeRandomNumber.ts파일로 분리했으며, Person.ts파일에서 U라는 심벌로 접근할 수 있도록 지정했다.

export default 키워드

TS는 JS와 호환하기 위해 export default구문을 제공한다.
person 디렉토리에 IPerson.ts파일을 만들고 아래 코드를 작성한다.
ch02-2/src/person/IPerson.ts

export default interface IPerson {
    name: string
    age: number
}

export default 키워드는 한 모듈이 내보내느 기능 중 오직 한 개에만 붙일 수 있다.
export default가 붙은 기능은 import문으로 불러올 때 중괄호{} 없이 사용할 수 있다.
Person.ts파일을 열고 코드를 다음처럼 수정한다.

import { makeRandomNumber } from '../utils/makeRandomNumber'
import IPerson from "./IPerson"

export default class Person implements IPerson {
    constructor(public name: string, public age: number = makeRandomNumber()) { }
}


export const makePerson = (name: string,
    age: number = makeRandomNumber()) => ({ name, age })

다음 코드는 최종적으로 반영된 index.ts이다