TypeScript로 시작하는 웹 개발: 설치부터 예제 실행까지

TypeScript의 특징 및 장, 단점을 알았다면 이제 시작해 봐야겠지요? TypeScript를 어떻게 설치할지 알아보고 간단한 예제들을 통해 어떻게 시작할 수 있는지 확인해 보겠습니다. 일단 TypeScript를 사용하기 위해서는 먼저 Node.js와 npm(Node Package Manager)이 설치되어 있어야 합니다. 그 후, typeScript  컴파일러를 설치할 수 있습니다. 이제 시작합니다~

혹시 TypeScript의 특징 및 장,단점을 아직 보지 못하셨다면 아래의 글에서 참고해 보세요. TypeScript를 이해하는 데 도움이 될 것입니다.

JavaScript 개발자를 위한 TypeScript 입문: 타입 시스템과 활용법

 

TypeScript를 쓰기 Visual Studio Extension를 통해 편하게 쓰기 위해서는 Visual Studio라는 코드 편집기가 필요합니다. Visual Studio 제품 군은 Windows에서 .NET 및 C++ 개발자를 위한 Visual Studio와 Windows, macOS 및 Linux에서 실행되는 독립 실행형 소스 코드 편집기인 Visual Studio Code 두 가지로 나뉘는데요, 우리는 프론트엔드 개발자용을 쓸 거니깐 Visual Studio Code를 방문하면 될 것 같아요.

TypeScript로 시작하는 웹 개발: 설치부터 예제 실행까지

TypeScript 기본 셋팅

· TypeScript 기본 설치(Installing TypeScript)

TypeScript는 사용 목적에 따라 크게 두 가지 설치 경로를 통해 설치할 수 있습니다.

• Node.js 및 npm 설치: 타입스크립트를 사용하기 전에 Node.js를 설치해야 합니다. Node.js 설치는 공식 웹사이트에서 다운로드할 수 있고, 프로젝트에서 MSBuild를 사용하는 경우 NuGet 패키지 또는 Visual Studio 확장이 필요합니다. npm은 Node.js와 함께 자동으로 설치됩니다.
• TypeScript의 Visual Studio 플러그인 설치: Visual Studio Extension을 이용하여 설치할 수 있습니다. TypeScript를 Visual Studio과 함께 설치하지 않았다면 TypeScript 공식홈페이지에서도 다운로드 할 수 있습니다.

 

· npm(Node Package Manager) 업데이트

npm은 Node.js와 함께 설치되므로 이미 설치되어 있지만 npm의 버전이 최신인지 확인하는 것이 좋습니다. 터미널 또는 명령 프롬프트를 열고 다음 명령을 실행하여 npm을 최신 버전으로 업데이트할 수 있습니다.

npm install -g npm

 

 

· TypeScript 설치

Node.js와 npm이 설치되었다면, 터미널 또는 명령 프롬프트를 열고 다음 명령을 실행하여 TypeScript 컴파일러를 설치합니다. 이렇게 설치하면 어디서든 tsc 명령어를 사용하여 TypeScript 파일을 컴파일할 수 있습니다.

npm install -g typescript

 

 

· 설치 확인

TypeScript가 성공적으로 설치되었는지 확인하기 위해 다음 명령어를 사용하여 TypeScript의 버전을 확인합니다.

tsc –version

 

TypeScript를 설치한 후에는 TypeScript 파일을 작성하고 컴파일할 준비가 되었습니다!

 

기본 예제 실행

TypeScript를 설치한 후, 간단한 예제 코드를 작성하고 실행해 보는 것으로 시작할 수 있습니다.

· VS Code(Visual Studio Code)로 TypeScript를 사용할 프로젝트 생성

• 새 폴더를 만들고 해당 폴더로 이동합니다.
• VS Code를 실행하고 "파일" 메뉴에서 "열기"를 선택한 후, 생성한 폴더를 선택합니다.
• ‘파일’ 메뉴에서 ‘새 파일’을 열고, 언어 선택에서 ‘TypeScript’를 선택 후 ‘greet.ts’ 이름으로 파일을 저장합니다.

 

· 첫 번째 TypeScript 파일 만들기

greeter.ts 파일에 다음의 JavaScript 코드를 입력하세요.

function greet(person: string) {
    return "Hello, " + person;
}

let message = greet("World");
console.log(message);

 

 

· 코드 컴파일하기

.ts 확장자를 사용했지만 코드 자체는 JavaScript 코드이기 때문에 typeScript 파일로 컴파일이 필요합니다. 이런 식으로 JavaScript 코드를 바로 .ts 파일에 넣을 수 있습니다.
터미널 또는 명령 프롬프트를 열고 다음 명령어를 입력하여 typeScript 파일을 컴파일합니다.

tsc greet.ts

 

위 명령을 실행하면 TypeScript 컴파일러가 greet.ts 파일을 처리하여 JavaScript 파일(greet.js)과 해당 파일의 타입 선언 파일(greet.d.ts)을 생성합니다. 이는 TypeScript 파일을 JavaScript로 변환하고, TypeScript의 정적 타입을 유지한 채로 사용할 수 있도록 합니다.

 

· 결과 확인

터미널 또는 명령 프롬프트를 열고 다음 명령어를 입력하여 typeScript 파일을 컴파일합니다.

node greet.js

 

 

typeScript를 처음 시작하시는 분들에게 도움이 되길 바라며, 더 많은 예제와 학습 자료는 typeScript 핸드북  공식 문서에서 찾아볼 수 있습니다.

---

참조(Reference)

• 5분 안에 보는 TypeScript
  (https://typescript-kr.github.io/pages/tutorials/typescript-in-5-minutes.html)