01 TypeScript - 개념 및 환경설정

1. 개념 및 환경설정

 

TypeScript 개념 및 환경설정에 대해 알아보자.

MS와 Google이 함께 만든 TypeScript는 JavaScript를 기반으로 만들어진 언어이다.

 

기존의 JavaScript는 변수의 타입이 없다.

TypeScript는 이런 점을 보완하기 위해 나온 언어이다.

그렇기 때문에 JavaScript를 기본으로 하고 있기 때문에 JavaScript와 ECMAScript에 대한 기본 지식을 익히고 이 글을 보길 추천한다.

 

- ECMAScript6 강좌

01 ECMAScript6란 (개요, 개념)

 

먼저 개발 환경부터 구축해보자.

 

(1) Node.js 설치

 

- Node.js 설치

Node.js

 

먼저 Node.js를 설치해야 한다.

위의 URI로 접속해서 자신의 운영체제에 맞는 node.js를 설치해주자.

설치할 때 웬만하면 어느정도 검증이 된 TLS 버젼으로 설치해주자.

 

 

Node.js를 설치하는 이유는 NPM을 이용해 TypeScript를 설치하기 위함이다.

Node.js와 NPM이 뭔지 모르는 분들은 단순히 TypeScript를 설치하기 위한 도구라고만 생각하자.

 

다음번에 기회가 되면 Node.js와 NPM에 대한 글도 게시하겠다.

 

 

(2) Visual Studio Code (VSCode) 설치

 

Node.js를 설치했다면, 사용할 IDE를 설치해보자.

IDE는 프로그래밍을 할 때 사용하는 개발 툴이다.

 

이 글에서는 Visual Studio Code(VSCode)를 사용할 것 이다.

IDE는 사용하고 싶은 걸 써도 상관없다.

 

- VSCode 설치

Visual Studio Code - Code Editing. Redefined

 

 

(3) TypeScript 설치

 

Node.js와 VSCode를 설치했다면 이제 TypeScript를 설치해보자.

먼저 Node.js command prompt로 접속해보자. 정상적으로 설치가 되었다면 해당 데스크톱 앱을 찾을 수 있을 것이다.

 

만약에 못 찾겠으면 cmd 창을 열어도 무관하다.

 

 

해당 앱을 실행하고 다음과 같이 쳐보자.

 

 

예전에 설치해놔서 버젼이 좀 다르긴 한데 설치한 버젼에 맞게 뜬다면 정상적으로 설치된 것이다.

여기까지 잘 진행되었다면 TypeScript를 설치해보자.

 

 

npm install -g typescript

 

여기서 반드시 -g를 쳐줘야 한다. -g는 해당 시스템 전체에서 사용할 수 있는 패키지를 받는다는 뜻이다.

added 1 package in ~ 이라고 뜬다면 정상적으로 TypeScript가 설치된 것이다.

 

 

(4) Hello World

 

모든 언어의 기본인 Hello World를 띄어보자.

먼저 VScode를 실행한다.

그리고 자신이 원하는 경로에 파일을 하나 만들고 VScode에서 열어주자.

 

파일 -> 폴더열기로 해당 파일을 열면 된다.

 

 

 

파일을 열었다면 그 안에 hello.ts라는 파일을 만들어보자.

 

 

위의 그림을 보면 TYPESCRIPT라는 파일을 만들었고, 연동시켜준 것이다.

해당 파일이름에 마우스를 가져가보면 옆에 저런 아이콘들이 생길 것이다.

 

처음부터 차례로, 새 파일 만들기 / 새 폴더 만들기 / 새로고침 / 모두 축소 라는 아이콘들이다.

 

이 기능을 이용해 01_basic이라는 폴더를 만들었고, 그 안에 hello.ts라는 파일을 만들었다.

파일을 만들 때 유의해야하는 점은 파일명만 적으면 안 되고, 꼭 .ts라는 확장자까지 적어줘야 한다.

 

hello.ts를 만들었다면 console.log("Hello World"); 를 작성해보자.

 

 

작성된 파일을 저장해주고, ts 파일을 실행해보자.

 

ts 파일을 실행하려면 먼저 컴파일을 해서 js 파일 형태로 변형시켜줘야 한다.

이 때는 tsc라는 컴파일러를 사용하며, 앞서 TypeScript 패키지를 설치하면서 같이 설치 되었다.

 

컴파일러는 cmd 창에서 실행시키면 되는데, VScode에서 cmd 창을 열어서 실행해보자.

 

 

보기 > 통합 터미널을 클릭하면 아래와 같은 창이 뜰 것이다.

 

 

준비는 다 됐다!

이제 tsc 컴파일러를 이용해 js 파일을 만들어보자.

 

위에서 만든 hello.ts 파일에 오른쪽 클릭을 하고 명령 프롬프트에서 열기를 클릭해보자.

 

 

그러면 아래와 같이 경로가 이동 될 것이고, tsc hello.ts를 입력하면 해당 폴더 밑에 js 파일이 생성된 것을 볼 수 있다.

js 파일이 생성 되었다면, node hello.js를 입력해서 js 파일을 실행해보자.

 

 

Hello World가 뜬다면 성공적으로 개발 환경을 세팅한 것이다.

 

다음 글부터는 본격적으로 TypeScript의 특징을 배우고 실습을 통해 배워보자.