Typescript에서의 모듈과 그 사용법에 대해 알아봅니다.
1. 모듈(Module)
타입스크립트에서 index.ts와 같은 소스파일을 모듈이라고 합니다. 앞선 글에서 우리는 index.ts와 makePerson.ts파일 두 개를 만들었으므로 두 개의 모듈을 만든 셈입니다.
물론 하나의 소스코드에 모두 다 구현해도 됩니다. 하지만 유지보수 등 소스 코드 관리를 위해서 모듈마다 특정 기능을 구현하는 방식으로 소스코드를 분할하는 게 일반적인 방식입니다. 이러한 작업을 모듈화라고도 합니다.
index.ts 모듈에서 어떻게 makePerson.ts 모듈의 정보를 알고 가져다 쓸 수 있는 걸까요? 앞서 작성한 코드를 보면 아시겠지만 한 모듈이 다른 모듈에 어떤 내용이 있는지 서로 알게 해 주기 위해 타입스크립트에서는 export와 import라는 키워드를 제공합니다.
기능을 제공하는 모듈에서 export를, 기능을 사용하는 모듈에서 import를 사용해 다른 모듈의 기능을 가져다 쓸 수 있습니다.
2. 모듈화 예시
이제 실제 하나의 index.ts 모듈이 어떻게 모듈화가 이루어지는지 보도록 합니다. 이전 글을 참고하여 타입스크립트 프로젝트를 생성합니다.
다음처럼 index.ts파일에 모든 기능을 다 넣어두게 코딩합니다.
//// ./src/index.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));
};
const makePerson = (name: string, age = makeRandomNumber()) => ({name, age});
const testMakePerson = ():void => {
let jane: IPerson = makePerson('Jane');
let jack: IPerson = makePerson('Jack');
console.log(jane, jack);
};
testMakePerson();
위와 같이 코딩했으면 다음 명령어를 통해 한번 실행해 봅시다.
> npm run dev
정상적으로 실행이 되시나요? 이제 이 모듈을 몇 가지 내용에 맞춰 모듈화 작업을 진행해 보겠습니다.
우선 위에 작성한 코드를./src/person/Person.ts로 먼저 한번 나눠보겠습니다.
//// ./src/person/Person.ts
let MAX_AGE = 100;
export 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));
};
export const makePerson = (name: string, age = makeRandomNumber()) => ({name, age});
//// ./src/index.ts
import {IPerson, makePerson} from './person/Person';
const testMakePerson = ():void => {
let jane: IPerson = makePerson('Jane');
let jack: IPerson = makePerson('Jack');
console.log(jane, jack);
};
testMakePerson();
이전 코드와 달라진 점이 보이시나요? 앞서 설명한 것처럼 한 모듈에서 다른 모듈을 사용하기 위해선 위처럼 export와 import를 사용해 어떤 기능을 내보내고 가져와 쓸지 명시해 줘야 합니다.
3. export default
타입스크립트는 자바스크립트와의 호환성을 위해 export default 키워드를 제공합니다. 이 키워드는 한 모듈에서 단 하나의 기능에 붙일 수 있습니다. 이렇게 내보내진 기능은 import문으로 불러올 때 중괄호 없이 사용 가능하며 export 키워드와 함께 사용될 수 있습니다.
위의 코드를 아래와 같이 수정해 줍니다.
//// ./src/person/IPerson.tx
export default interface IPerson{
name: string,
age: number,
};
//// ./src/utils/makeRandomNumber.ts
let MAX_AGE = 100;
export function makeRandomNumber(max: number = MAX_AGE): number{
return Math.ceil((Math.random() * max));
};
//// ./src/person/Person.ts
import IPerson from './IPerson';
import {makeRandomNumber} from '../utils/makeRandomNumber';
export default class Person implements IPerson{
constructor(public name: string, public age: number){
}
};
export const makePerson = (name: string, age = makeRandomNumber()) => ({name, age});
//// ./src/index.ts
import IPerson from './person/IPerson';
import Person, {makePerson} from './person/Person';
const testMakePerson = ():void => {
let jane: IPerson = makePerson('Jane');
let jack: IPerson = makePerson('Jack');
console.log(jane, jack);
};
testMakePerson();
IPerson은 export default를 사용해 가져올 때 중괄호가 생략된 것을 확인할 수 있습니다. Person.ts에서는 export와 export default가 동시에 사용되어 index.ts에서 Person을 가져올 때 Person은 중괄호가 없고 makePerson은 중괄호가 있는 모습을 확인할 수 있습니다.
위의 파일을 실행해보세요.
모듈화를 통해 파일이 쪼개졌지만 여전히 잘 동작하는 것을 확인할 수 있습니다.
'Programming > Typescript' 카테고리의 다른 글
| [Loopback] MongoDB 연결하기. (0) | 2020.11.12 |
|---|---|
| [LoopBack] 02. Loopback4와 Postgresql 연결하기 (0) | 2020.04.23 |
| [Typescript] 01. Typescript란? - Typescript개발 준비 (0) | 2020.04.20 |
| [LoopBack] 01. 루프백 사용하기 (0) | 2020.04.13 |
