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 |
댓글