모듈 이해하기

Gmini.Y·2020년 6월 1일
0

보통은 코드 관리와 유지, 보수를 위해 각 모듈마다 고유한 기능을 구현하는 방식으로 소스코드를 분할합니다. 이러한 작업을 Moduliazation이라고 합니다. 타입스크립트는 Modulization을 위해 export와 import라는 키워드를 제공합니다.
아래는 module을 설명하기 위한 코드입니다.
코드에 대한 자세한 이해는 지금은 하지 않아도 되지만 import와 export가 어떻게 사용되는지 확인해보세요.
<Person.ts>

const MAX_AGE =100;

interface IPerson {
  name: string
  age: number
};

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

function makeRandomNumber(max: number = MAX_AGE): number {
  return Math.ceil((Math.random() * max));
};

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

<index.ts>

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

testMakePerson();

이 상태로 코드를 실행하면 IPerson과 makePerson 을 찾을 수 없다는 오류가 발생합니다. 타입스크립 컴파일러가 IPerson과 makePerson이라는 심벌의 의미를 알 수 없어서 발생한 것입니다.

export
앞서 작성한 index.ts 파일을 동작하게 하기위해서는 IPerson과 makePerson이라는 심벌의 의미를 index.ts에 전달해야 합니다. 이때 export를 사용합니다.
<Person.ts>

const MAX_AGE =100;

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

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

function makeRandomNumber(max: number = MAX_AGE): number {
  return Math.ceil((Math.random() * max));
};

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

import
export로 내보낸 심벌을 다른 파일에서 받아서 사용하기 위해서는 import 키워드를 사용해야합니다.

import { ..symbols } from 'path';

<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();

import * as
import as 키워드를 사용하면 모듈을 다른 이름으로 사용할 수 있습니다.
<makeRandomNumber.ts>

const MAX_AGE = 100;

export function makeRandomNumber(max: number = MAX_AGE): number {
  return Math.ceil((Math.random() * max));
}

<Person.ts>

import * as U from '../utils/makeRandomNubmer';

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()): IPerson => ({ name, age });

난수 발생 기능을 makeRandomNumber.ts 파일로 분리한 후 U라는 심벌로 Person.ts에서 사용하고 있습니다.

export default
export default 키워드는 한 모듈이 내보내는 기능 중 오직 한 개에만 붙일 수 있습니다. export default가 붙은 기능은 import 문으로 불러올 때 중괄호 없이 사용할 수 있습니다.
<IPerson.ts>

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

<Person.ts>

import { makeRandomNumber } from '../utils/makeRandomNumber';
imnport 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()): IPerson => ({ name, age });
}

<index.ts>

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

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

testMakePerson();

* Do it 타입스크립트 프로그래밍(전예홍 지음)을 학습 목적으로 정리하였습니다.

0개의 댓글