타입스크립트 기초 - 2

모듈

다음의 예제 코드를 보자

let MAX_AGE = 100

interface IPerson{
    name: string,
    age: number,
}

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

const makeRandomNumber = (max: number = MAX_AGE) =>{
    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()

실행결과
2-2@1.0.0 dev
ts-node src
{ name: 'Jane', age: 7 } { name: 'Jack', age: 42 }

비록 24줄 밖에 안되는 코드긴 하지만
만약 이게 더 길었더라면 이코드는 좋은 코드가 아닐것이다.
그래서 모듈화를 시켜야한다.
모든코드를 하나의 파일에 몰아넣는것은 좋은 행위가 아니다.

import/export

let MAX_AGE = 100

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

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

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

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

person.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()

index.ts

모듈화를 진행시킨 모습이다.
import와 export를 이용해서 모듈화를 시킬 수 있다.

import * as

먼저 난수 발생기를 따로 모듈화 시킨다.

let MAX_AGE = 100

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

makeRandomNumber.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})

person.ts

U라는 심벌을 주고 모듈화를 시킨다.

export default

export defalut는 중괄호 없이 불러올 수 있다.
한모듈이 내보내는 기능중 오직 한개에만 붙일 수 있다.

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

IPerson.ts

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

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


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

person.ts

외부모듈의 사용

먼저 npm chance와 npm ramda 패키지를 설치한다.
npm chance는 랜덤생성기로 이름이던 숫자던 랜덤으로 생성해준다.
npm ramda는 함수형 유틸리티 패키지이다.

아래코드에서 외부모듈을 사용하는 방법에 대해 보자

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

IPerson.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})

person.ts

import IPerson from './person/IPerson'
import Person 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)

index.ts

index.ts를 보면 알 수 있듯이 외부 모듈은 이렇게 사용한다.
chance 패키지는 chance 클래스 하나만 export default 형태로 제공하므로 import에 {}를 빼고 사용한다.
실행을 하게되면

실행결과
[
Person { name: 'Eva Olson', age: 52 },
Person { name: 'Delia Bowen', age: 57 }
]

이런식으로 나오게된다.

문제발생

빌드를 했는데 이와같은 오류가 계속 발생한다.
리스트가 뭐지? 하면서 계속 찾던도중 아무래도 package쪽에 문제가 있는것같아서 찾다보니..

dev는 잘 되는데 왜 build만 안되는거지? 해서 보니

지금은 수정했지만 dist가 아닌 list로 되어있어서 그걸 못찾아서 계속해서 오류가 났던것이다.
이런 바보같은 실수를 하게되다니..
이런실수를 하지않도록 조심해야겠다.

tsconfig.json

{
  "compilerOptions": {
    "module": "commonjs", 
    "esModuleInterop": true,
    "target": "es2015",  
    "moduleResolution": "node",
    "outDir": "dist",
    "baseUrl": ".", 
    "sourceMap": true, 
    "downlevelIteration": true, 
    "noImplicitAny": false, //
    "paths": { "*": ["node_modules/*"] }
  },
  "include": ["src/**/*"] //
}

차례로 무엇을 의미하는지 보자

module

웹브라우저 일때는 amd node.js일때는 commonjs

esModuleInterop

chance와 같은 패키지의 경우 AMD 방식을 전제로 했기때문에 CJS방식으로 작동하는 타입스크립트에서 true로 해줘야한다.

target

트랜스 파일할 자바스크립트의 버전 위 파일에서는 현재 ECMAScript 2015로 설정

moduleResolution

CJS일때는 node로 AMD방식일때는 classic

outDir

타입스크립트에서 자바스크립트로 변환된 파일이 나올 디렉토리

baseUrl

현재 디렉토리를 의미하는 .으로 설정하는게 일반적인 베이스 디렉토리

sourceMap

변환된 코드의 맵을 제공할지에 대한 여부를 선택한다 true일때 map파일이 만들어지는데 이는 디버깅할때 사용한다 타입스크립트의 어디코드가 어디코드로 연결되어있는지 알 수 있다

paths

import문에서 from 부분을 해석할때 따로 디렉토리를 지정해 주지 않을경우 설정해 줘야하는것으로 보통은 node_modules에 들어있기때문에 이렇게 설정해 주었다.

downleverIteration

제너레이터를 사용하려고 할때 정상적으로 작동하게 하기 위해선 true로 설정해야한다.

noImplicitAny

타입스크립트 코드의경우 타입을 지정해주지않으면 기본적으로 any타입이 설정되지만. 이는 타입스크립트의 존재의의와 맞지않으므로 에러를 띄우게 된다.
따라서 이 오류를 보이지 않게 하려면 noImplicitAny의 value를 false로 해줘야한다.