[TypeScript] 타입스크립트 시작하기

node.js 런타임 환경에서 TypeScript를 사용해 REPL(Read Eval Print Loop, 한 줄씩 명령어를 입력해서 실행하는 환경) 하기 위해 먼저 ts-node 패키지를 설치하겠다.

 

혹시 이 글을 읽으면서 같이 공부를 시작하려는 사람이 있다면,

지난 포스팅의 연장선 이기 때문에 개발환경은 나와 동일하게 맞춰져 있는 상태로 본다.

지난 포스팅: https://artistjay.tistory.com/13

vscode설치: https://artistjay.tistory.com/3

[VSCode] Visual Studio Code 설치 및 한글설정 방법

나처럼 CMD창에서 무언가를 하는 것이 익숙하지 않은 사람들을 위해서 에디터를 VSCode로 사용하겠다.

 

 

 

 

우선 vscode를 실행하여 프로젝트의 root폴더를 연다.

 

VSCode의 터미널을 열어서 아래 명령어를 입력한다.

>> npm i -D ts-node

 

node.js를 설치했음에도 vscode에서 위와 같이 에러가 뜨는 사람은 아래 포스팅 참고..

https://artistjay.tistory.com/14

 

에러 해결 후 정상적으로 되는 것을 확인할 수 있다.

 

설치가 완료되었다면, ts-node를 실행하자.

아래 명령어를 입력하면 된다.

>> npx ts-node

 

우선, TypeScript를 대표로 하는 기능에 대해서 보겠다.

 

만약 위 코드에서 보이는 sum이라는 메서드를 javascript에서 구현했다면, 아래와 같이 코드를 작성했을 것이다.

function sum(x, y) {
	return Number(x) + Number(y);
}

 

코드에서 보시다시피 Type을 사용하면 불필요한 예외처리를 줄일 수 있다.

이것이 TypeScript의 큰 장점인 듯하다.

사실 이게 전부인가..?

 

 

 

 

ts-node에서 작성한 코드를 실제 test.ts파일을 생성하여 코드를 작성해보자.

root 폴더에 test.ts 파일을 생성한다.

그리고 아래 코드를 입력한다.

const x = 10;
const y = 'hello world';

function sum(x: number, y: number) {
    return x+y;
}

sum(x, y);

그럼 y 인자에 에러가 나는 것을 확인할 수 있다.

이렇게 TypeScript 코드를 작성할 수 있는 것 같다.

 

그럼 이렇게 작성한 코드를 어떻게 js파일로 변환하여 실행할 수 있을까?

. ts파일은 tsc명령을 사용하여 컴파일할 수 있다.

 

먼저 vscode 터미널에 아래 명령어를 입력하여 tsc를 설치한다.

>> npm i tsc

 

그리고 아래 명령어를 입력한다.

>> tsc -t es5 test.ts

 

그랬더니 아래와 같은 오류 메시지가 출력된다.

error TS1008: Unexpected token; 'module, class, interface, enum, import or statement' expected.

 

원인은 굉장히 이상한 곳에 있었다.

기존에 깔려있던 typescript버전과 vscode에서 local로 설치한 typescript 버전이 맞지 않아서라고 하는데..

 

해결방법은 기존에 설치되어 있는 typescript 삭제한 후 vscode에서 다시 설치하면 된다.

C:\Program Files (x86)\Microsoft SDKs\TypeScript 삭제한 후 아래 명령어 실행

>> npm i -g typescript

 

그리고 아래 명령어를 다시 입력한다.

>> tsc test.ts

 

그럼 test.js 파일이 생성된 것을 볼 수 있다.

 

아무것도 안 한 상태에서 단순하게 코드 작성해서.. 컴파일하는 과정까지 한 번 해봤는데 오류가 이렇게나 많이 발생하다니.. 시작부터 쉽지 않은 것 같다.

 

컴파일 시 tsc -m, tsc -t 등 옵션을 사용하여 컴파일 옵션도 설정을 할 수 있다.

ex) tsc -m 'es2015' , tsc -t 'ES5' 등

 

tsconfig.json파일을 생성하여 옵션을 관리할 수도 있다.

다음 포스팅에서 하나씩 알아가 보자.

 

하다 보면 익숙해지고 더 쉽게 할 수 있는 방법이 있겠지.