[Typescript] 01. Typescript란? - Typescript개발 준비

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

 

 

 

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파일이 함께 생성됨을 확인할 수 있습니다.

 

 

 

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