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은 중괄호가 있는 모습을 확인할 수 있습니다.

 

위의 파일을 실행해보세요.

 

 

모듈화를 통해 파일이 쪼개졌지만 여전히 잘 동작하는 것을 확인할 수 있습니다.

 

 

 

 

 

'Typescript' 카테고리의 다른 글

[Typescript] 02. 모듈  (0) 2020.04.22
[Typescript] 01. Typescript란? - Typescript개발 준비  (0) 2020.04.20

타입 스크립트와 타입 스크립트를 개발하기 위한 준비를 합니다.

 

 

 

1. Typescript

 

TypeScript는 오픈 소스 순수 객체 지향 프로그래밍 언어입니다.  TypeScript는 Apache2 라이선스에 따라 Microsoft에서 개발 및 유지 보수됩니다.

TypeScript의 위치는 위 그림과 같습니다. Javascript로 컴파일 되는 Javascript의 수퍼셋이라고 합니다. 컴파일이 필요하므로 타입 스크립트를 브라우저에서 바로 사용할 순 없습니다. 

타입 스크립트는 컴파일이 필요한 새로운 언어입니다. 대부분의 사람들이 JS를 사용할 수 있는데 굳이 새로운 언어를 다시 배워야 하는 것에 대한 거부감이 타입 스크립트 도입에 가장 큰 결점일 것입니다.

그러나 타입 스크립트를 도입하게 되면 그동안 js에서 느꼈던 결점을 대부분 보완해 줍니다. 인텔리센스를 통해 자동완성 기능을 제공해주며 명시적 형식의 선언으로 인해 컴파일 단계에서 오류를 줄일 수 있습니다. 또한 C# 및 Jave와 유사한 문법 스타일을 갖고 있으며 큰 규모의 js 프로젝트의 경우 복잡도를 많이 낮출 수 있습니다.

 

 

 

2. 타입스크립트 컴파일러 설치

 

이제 타입스크립트를 사용하기 위한 준비를 해봅시다. 물론 이 과정을 수행하기 전에 NodeJS를 먼저 설치해야 합니다. NodeJS설치 과정은 별도로 다루지 않겠습니다.

 

파워 셸 또는 터미널을 열고 다음 명령어를 수행합니다.

 

> npm i -g typescript

 

설치가 완료되었다면 다음 명령어를 통해 설치된 타입 스크립트의 버전을 확인할 수 있을 것입니다.

 

> tsc -v

 

 

이제 설치한 타입 스크립트 컴파일러를 이용해 ts파일을 js파일로 컴파일해봅시다. hello.ts파일을 만든 뒤 다음과 같이 코드를 작성해 주세요.

 

console.log(`Hello world!`);

 

이제 다음 명령어를 실행시켜 ts를 js로 컴파일 해 봅시다.

 

> tsc hello.ts

 

 

파일 목록에 hello.js가 생성된 것이 보이시나요? 제대로 컴파일되었습니다. 컴파일된 js파일은 다음 명령어로 실행할 수 있습니다.

 

> node hello.js

 

 

 

3. ts-node 사용하기.

 

위의 tsc는 ts를 js로 변환만 해줍니다. 변환과 실행까지 한 번에 하기 위해 ts-node를 사용해 봅시다. 다음 명령어를 통해 ts-node를 설치합니다.

 

> npm i -g ts-node

 

마찬가지로 다음 명령어를 통해 버전을 확인 해 제대로 설치되었는지 알 수 있습니다.

 

> ts-node -v

 

 

이제 ts-node를 사용해 봅시다. 다음 명령어를 실행하면 자동으로 ts파일을 js파일로 컴파일할 뿐 아니라 컴파일된 js파일을 실행시켜줍니다.

 

> ts-node hello.ts

 

 

 

4. 타입스크립트 프로젝트 생성하기.

 

타입스크립트 프로젝트는 NodeJS 프로젝트를 만든 뒤 개발 언어를 ts로 설정하는 순서로 생성합니다. 우선 원하는 폴더를 생성, 이동 한 뒤 NodeJS 프로젝트를 생성합니다.

 

> npm init --y

 

 

--y 옵션을 주고 프로젝트를 생성하면 위와 같은 기본 내용으로 알아서 프로젝트를 생성해 줍니다.

 

타입스크립트 관련 패키지 설치에 앞서 알아두어야 할 사항이 있습니다. 타입스크립트는 기본적으로 ESNext 자바스크립트 문법을 포함하지만 자바스크립트와는 완전히 다른 언어입니다.

타입스크립트에는 명시적 형식이 존재하기 때문에 추가적으로 타입 라이브러리가 필요합니다. 예를 들어 Promise와 같은 타입을 사용하기 위해서는 @types/node라는 패키지를 설치해야 합니다. 

 

이제 타입스크립트 관편 패키지를 설치합니다.

 

>npm i -D typescript ts-node @types/node

 

앞서 우린 typescript와 ts-node 패키지를 글로벌로 설치하였습니다. 우리의 개발환경에선 이 두 패키지를 별 문제 없이 사용할 수 있겠지만 만약 다른 유저가 우리의 프로젝트를 체크아웃 받아서 사용할 경우에 문제가 생길 수 있습니다. 따라서 -D 옵션을 주어 설치해 package.json에 패키지를 동록하도록 합니다.

 

이제 타입스크립트 컴파일러 설정파일을 생성합니다. 다음 명령어를 실행해 tsconfig.json파일을 생성합니다.

 

>tsc --init

 

tsconfig.json에는 수많은 옵션이 있지만 그 중에 우리는 다음과 같은 옵션만 우선 사용하도록 합니다.

 

{
  "compilerOptions": {
    /* Basic Options */
    "target": "es5",
    "module": "commonjs",
    "sourceMap": true,
    "outDir": "./dist",
    "downlevelIteration": true,

    /* Strict Type-Checking Options */
    "noImplicitAny": false,

    /* Module Resolution Options */
    "moduleResolution": "node",
    "baseUrl": "./",
    "esModuleInterop": true,

    "paths": {"*": ["node_modules/*"]}
  },
  "include": ["src/**/*"]
}

.

위의 설정에서 "include"은 해당 항목 내에 타입스크립트 파일이 존재함을 알려주는 항목입니다. 즉 우리는 ./src폴더 내에 타입스크립트 파일을 위치시켜야 합니다. 

 

다음과 같이 indes.ts파일과 makePerson.ts파일을 작성합니다. 생성할 폴더에 주의하세요.

 

//// ./src/utils/makePerson.ts
export function makePerson(name: string, age: number){
    return {name: name, age: age};
}

export function testMakePerson(){
    console.log(
        makePerson('Jane', 22),
        makePerson('Jack', 23)
    );
}

 

//// ./src/index.ts
import {testMakePerson} from './utils/makePerson';

testMakePerson();

 

다음은 node 실행 명령을 수정 할 차례입니다. 타입스크립트는 ts-node를 사용해 결국 js파일이 생성됩니다. 이 생성된 js파일은 node로 실행 되어야 합니다. 이를 위해 다음과 같이 package.json의 main과 scripts 항목을 수정합니다.

 

{
 ...
  "main": "src/index.js",
  "scripts": {
    "dev": "ts-node src",
    "build": "tsc && node dist"
  },
  ...
}

 

이제 명령어를 실행시켜 봅시다. 

 

> npm run dev

 

 

바로 ts파일이 실행되는 모습을 볼 수 있습니다. 이번에는 build 명령어를 실행 해 js파일을 만들어 봅시다.

 

> npm run build

 

위와 똑같이 ts파일이 실행되며 앞서 tsconfig에 정의한 dist 경로에 js파일이 함께 생성됨을 확인할 수 있습니다.

 

 

 

이제 우린 타입스크립트가 무엇인지 알았으며 개발환경을 준비하였습니다. 본격적으로 개발을 시작해 봅시다.

 

 

 

 

 

'Typescript' 카테고리의 다른 글

[Typescript] 02. 모듈  (0) 2020.04.22
[Typescript] 01. Typescript란? - Typescript개발 준비  (0) 2020.04.20

+ Recent posts