TypeScript 시작하기: 환경 설정부터 Hello World 실행까지

0. 들어가기 전에

• TypeScript로 프로그래밍하기 위해 필요한 개발 환경 설정부터 패키지 설치, 코드 작성, 컴파일 및 실행까지의 과정을 단계별로 설명
• TypeScript는 자바스크립트의 슈퍼셋 언어로, 타입을 명시해 오류를 사전에 방지할 수 있는 장점이 있다.

 

 

1. 실습용 폴더 만들기

• 먼저 프로젝트 코드를 보관할 폴더를 만든다.
• `onebite-typescript`라는 폴더를 만들고, 그 안에 `section1`이라는 하위 폴더 생성한다.
• 폴더 이름은 자유롭게 정해도 되고, 포인트는 프로젝트별로 폴더를 나누어 관리하는 것.

 

 

2. Node.js 패키지 초기화하기

• Visual Studio Code를 열어서 위에서 만든 폴더를 열어준다.
• 터미널을 열고 아래 명령어를 입력해 Node.js 패키지를 초기화 한다.
• 여기서는 모두 디폴드 값으로 설정해도 무방하다. 필요한 경우 나중에 `package.json`을 수정하면 된다.

npm init

 

 

3. @types/node 설치하기

• Node.js의 기본 타입 정보를 제공하는 `@types/node` 패키지를 설치해야 한다.
  이 패키지가 없으면 TypeScript에서 Node.js의 기능을 제대로 사용하지 못한다. 터미널에 아래 명령어를 입력하자.

npm i @types/node

• 타입스크립트를 사용할 때는 이런 타입 패키지를 설치하는 것이 매우 중요하다. 특히 `@types/node`는 필수라고 생각하자.

 

 

4. TypeScript 컴파일러 설치하기

• 이제 TypeScript 컴파일러를 설치한다. 전역으로 설치해야 어디서든 타입스크립트를 컴파일할 수 있다.

# windows일 경우
npm i -g typescript

# macOS일 경우
sudo npm i -g typescript

• 설치가 끝나면 컴파일러가 제대로 설치되었는지 확인하기 위해 버전을 출력해보자.
  버전이 잘 출력되었다면 성공적으로 설치된 것이다.

> tsc -v
Version 5.6.2

 

 

5. TypeScript 파일 작성하기

• 이제 실제로 타입스크립트 코드를 작성해보자. 먼저 프로젝트 루트 폴더 아래에 src 폴더를 만들고, 그 안에 `index.tx`파일을 생성한다. 그 안에 아래 코드를 작성한다.
• 간단한 코드지만, TypeScript에서 타입을 명시하는 것의 중요성을 확인할 수 있다.

console.log("Hello TypeScript");
const a: number = 1;

 

 

6. 코드 컴파일 및 실행

• 작성한 코드를 컴파일해보자. 터미널에 다음 명령어를 입력해 타입스크립트 코드를 자바스크립트로 변환한다.

tsc src/index.ts

• 이 명령어를 실행하면 src/index.js 파일이 생성된다. 이 파일을 node.js로 실행하면 된다.

node src/index.js

• 실행 결과는 아래와 같다.

Hello TypeScript

 

 

7. Tip: TSX로 한 번에 실행하기

• 타입스크립트로 컴파일하고 자바스크립트를 실행하는 두 단계를 줄이기 위해 tsx를 사용해볼 수 있다. tsx는 한 번의 명령어로 타입스크립트 파일을 바로 실행시킬 수 있다. 아래 명령어를 입력해 설치하자.

# Windows일 경우
npm i -g tsx

# macOS일 경우
sudo npm i -g tsx

• 설치가 완료되었다면 다음 명령어를 터미널로 입력해 설치 되었는지 확인해보자. 잘 설치 되었다면 아래처럼 버전이 출력된다.
  Node.js의 버전도 함께 출력된다.
• `ts-node` 는 Node 20 버전 이상에서는 더 이상 동작하지 않아서 `tsx`를 사용해야한다.

> tsx -v
tsx v4.19.1
node v20.15.1

• 이제 tsx 명령어를 사용해 한 번에 실행해보자.

tsx src/index.ts

 

 

8. 마무리

TypeScript 환경 설정과 간단한 Hello World 프로그램을 작성하고 실행하는 방법을 배웠다. TypeScript는 처음에 어렵게 느껴질 수 있지만, 익숙해지면 개발 속도도 빨라지고, 오류를 사전에 방지할 수 있어 매우 유용하다고 한다. 열심히 배워보자!