타입스크립트 컴파일 및 실행

---

[1] 개요

---

문득, 자바스크립트와 타입스크립트로 짠 프런트엔드 프로젝트를 보면서 문득 생각이 들었습니다.

아니 생각해보니 자바스크립트랑 타입스크립트 파일을 로컬에서 어떻게 실행하지?

문득 생각이 드니 정말 창피한 일이 아닐 수가 없습니다.

언어를 사용하면서 웹을 만드는 사람이 언어 자체 실행 방법은 모른다니..

원의 넓이를 구하는 공식은 아는데 정작 곱셈이라는 게 뭔지도 모르는 꼴입니다.

당장 찾아봤습니다. Nodejs가 컴파일러의 역할을 하는 듯 합니다.

[2] 방법1

---

당연하지만, Nodejs, Typescript(전역 설치)가 설치되어 있어야 합니다.
Typescript 는 터미널에서 npm i typescript -g 로 설치합니다.

아무대나 ts 파일을 생성합니다. 저는 hello.ts 라고 하겠습니다.

그리고 vscode에서 해당 파일의 경로로 가서 파일을 열고 코드를 추가합니다.

hello.ts

let hello: string = "hello world";
console.log(hello);

그 후 해당 hello.ts 파일이 있는 위치에서 터미널을 열고,

아래와 같이 ts 파일을 자바스크립트로 컴파일(번역) 합니다.

Terminal(cmd)

C:\Users>tsc hello.ts

그러면 다음와 같이 js 파일이 생성됩니다.

어쨋든 js 파일이 생성되었으면 이제 node로 실행합니다.

Terminal(cmd)

C:\Users>node hello.js

그럼 아래와 같이 뜹니다.

C:\Users>node hello.js
hello world

[3] 방법2

---

헌데, 위의 방법은 컴파일 후 실행이라는 귀찮음이 있습니다.

따라서 ts 파일에서 바로 실행해주는 ts-node 패키지를 지역으로 설치하여, 이것을 컴파일러로 씁니다.

그리고 폴더 하나 만든 후에 터미널에 아래의 코드를 입력합니다.

Terminal(cmd)

C:\Users\test>npm i ts-node
C:\Users\test>tsc --init

tsc –init은 ts-node를 실행하기 위함입니다.

설치 완료 후 위와 같이 폴더내에 hello.ts를 만들고 아래의 코드를 입력합니다.

Terminal(cmd)

C:\Users\test>npx ts-node hello.ts
hello world

[4] 여담

---

만약 간단한 Javascript를 실행하고자 한다면,

그냥 브라우저 개발자도구로 실행하시면 됩니다.

크롬이라면 F12 눌러서 나오는 개발자 도구 창에서 콘솔을 들어가시면 그게 편집기입니다.

파이어폭스도 동일합니다

나머지 브라우저는 비슷한 곳에 있거나, 없다면 찾아보시길 권합니다.

[5] 참조 사이트

---

1. JS Compile과 Build
2. [typescript] 1. 설치
3. [ typescript ] ts-node를 사용하여 ts를 js로 컴파일 하기전에 터미널에서 출력해보는 방법.
4. 자바스크립트로 컴파일러 만들기