AI 탐구노트

Typescript 초간단 사용법 본문

기술 팁

Typescript 초간단 사용법

42morrow 2024. 10. 5. 09:06

 

Typescript를 처음 접했는데, 일단 간단하게만 구동시키는 방법을 정리해 봅니다.

그래도 간단하게는 어떤 녀석인지 알아야 할 것 같네요. ^^

 

Typescript란

TypeScript는 Javascript의 상위집합으로 Microsoft가 개발한 오픈소스 프로그래밍 언어입니다.

Javascript 위에 정적 타입 시스템과 ECMAScript 기능을 추가해서 더 견고하고 유지보수가 쉬워졌다고 합니다. 

즉, Javascript의 약점이었던 타입 오류로 인한 런타임 오류, 코드 품질 등의 문제 해결을 위한 것이라고 보입니다.

 

주요 특징은 다음과 같습니다. 

  • 정적 타입 지정 (Static Typing) : 변수, 함수 등의 데이터 타입  명시적 지정 가능. 타입 오류 줄일 수 있음
  • 타입 추론 (Type Inference) : 명시적 지정 없이도 코드의 컨텍스트 기반으로 자동으로 타입을 추론
  • 객체 지향 프로그래밍 지원 
  • 호환성 : Javascript가 TypeScript의 하위집합(subset)이라... 
  • 컴파일러 : tsc 컴파일러로 Javascript 컴파일 후 실행. tsc 파일 -> (컴파일) -> js 파일

 

저는 처음에는 '컴파일'이라는 용어 때문에 변환 후에 더 빨라지거나 하는 줄 알았습니다.

하지만, TypeScript의 용도가 그런 실행 성능 향상이 아니란 걸 알고 상황은 정리되었습니다. ^^;

 

Typescript 컴파일러 설치

 

사전에 Node.js와 npm이 설치되어 있어야 합니다.

 

Node.js, npm 설치

 

Node.js 설치 사이트에서 각 OS 별로 CLI 설치 방식을 소개하고 있습니다. 

예를 들어 우분투의 경우는 다음과 같습니다.

nvm이라는 패키지 관리자를 이용하니 엄청 간단하고 편하네요. ^^

 

# installs nvm (Node Version Manager), 완료 후 터미널을 다시 여세요.
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.0/install.sh | bash

# download and install Node.js (you may need to restart the terminal)
nvm install 20

# verifies the right Node.js version is in the environment
node -v # should print `v20.18.0`

# verifies the right npm version is in the environment
npm -v # should print `10.8.2`

 

 

Typescript 컴파일러 설치

$ npm install -g typescript

 

 

TypsScript 이용 

 

1.tsc 파일 생성 

 

초간단 예시 하나를 만들어 봅니다.

터미널에 'Hello, World!'를 출력하는 app.ts 파일입니다.

 

let message: string = "Hello, World!";
console.log(message);

 

 

2.tsc 컴파일

 

이후 Typescript로 컴파일해서 js 파일을 생성합니다. 

$ tsc app.ts

 

 

위의 과정을 거치면 app.js 파일이 컴파일되어 생성됩니다.

'뭐야, 겨우 이게 만들어지는거야?' 라고 하실 수도 있는데 맞습니다. 

var message = "Hello, World!";
console.log(message);

 

 

3.실행

 

만들어진 js 파일은 node를 이용해서 실행합니다.

 

$ node app.js
Hello, World!

 

 

 

이번 글은 정~말 초보적인 TypeScript 사용법을 알아 봤습니다. 저를 위해서요. ^^