본문 바로가기
TypeScript

[Typescript] 타입스크립트 모듈이해

by Seong-Jun 2023. 11. 10.
728x90
반응형
SMALL

타입스크립트에서는 소스파일을 모듈(module)이라고 합니다. 코드관리와 유지/보수를 편리하게 하려고 모듈마다 고유한 기능을 구현하는 방식으로 소스코드를 분할합니다. 이러한 방식을 모듈화(modulization)라고 합니다.

 

소스코드를 여러 개 모듈로 분할하면 어떤 모듈에서 다른 모듈을 불러와서 사용할 수 있습니다.

 

import 키워드

다른 모듈의 기능을 이용하는 쪽에서 사용하는 키워드입니다.

import {심벌목록} from '파일의 상대경로'

export 키워드

기능을 제공하는 쪽에서 사용하는 키워드입니다. function, interface, class, type, let, const 키워드 앞에 붙일 수 있습니다.

 

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

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

testMakePerson()

 

다음의 코드를 실행시키면

 

위와 같은 결과가 나옵니다. 그런데 코드내용이 너무 길고 복잡하기 때문에 아래와 같이 모듈화를 해줄 수 있습니다.

먼저 디렉터리를 만들어줍니다.

IPerson.ts

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

 

export default 키워드는 JS와 호환하기 위해 제공되는 키워드입니다. 이 키워드는 한 모듈이 내보내는 기능들 중 한 개에만 붙일 수 있습니다. 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()): IPerson => ({name, age})

 

makeRandomNumber.ts

let MAX_AGE = 100

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

 

index.ts

import IPerson from "./person/IPerson"
import Person, { makePerson } from "./person/Person"
import Chance from 'chance'
import * as R from 'ramda'

const chance = new Chance()
let persons: IPerson[] = R.range(0, 2)
    .map((n: number) => new Person(chance.name(), chance.age()))

console.log(persons)

 

외부 패키지 chance와 ramda를 설치했습니다.

chance: 가짜 데이터를 만들어 주는 패키지

ramda: 함수형 유틸리티 패키지

 

콘솔 출력결과

 

728x90
반응형
LIST

'TypeScript' 카테고리의 다른 글

[Typescript] 타입스크립트 변수 선언  (0) 2023.11.10
[TypeScript] 개발환경 구성하기  (0) 2023.11.10
타입스크립트의 주요 문법  (1) 2023.11.01
ESNext의 주요 문법  (1) 2023.11.01
TypeScript란?  (1) 2023.11.01

댓글