[TS] #1 TS 등장 배경 및 개발환경 세팅

2024-09-17 1 분 소요

1. TypeScript 개요

Microsoft에서 개발한 오픈 소스 프로그래밍 언어이다.

JS의 단점을 상쇄하기 위해 등장했다.

1️⃣ 실행 시간에 결정되는 변수 타입 → 컴파일 시간에 변수의 타입을 체크하도록 변경

2️⃣ 약한 타입 체크 → vs Code에 코드를 입력하는 순간 에러 메세지 발생하도록 변경

3️⃣ 너무나도 물렁물렁한 객체 → vs Code에 코드를 입력하는 순간 에러 메세지 발생하도록 변경

이 외에도 높은 생산성 및 안정성 등 장점이 존재한다.

TS를 설치하기 전 먼저 node를 설치해야한다.

https://github.com/coreybutler/nvm-windows/releases 에 접속하여 asset 섹션에서 nvm-setup.exe 파일을 다운로드 받아서 실행하면 된다.

그리고 PowerShell에서 nvm install [설치할 노드 버전]명령을 실행하여 Node.js를 설치하면 된다. (ex. nvm install 18)

그 후, PowerShell에서 nvm use [설치한 노드 버전] 명령을 실행하여 Node.js를 활성화하자.

마지막으로 PowerShell에서 npm -v 명령어로 npm이 제대로 설치되었는지 확인하기!

window

yarn add typescript -g

mac

sudo yarn add typescript -g

➡️ 컴파일에 대한 자세한 설명은 [TSC 및 tsconfig↗️] 포스팅에서 확인할 수 있다.

① TypeScript 파일 작성

실행 테스트하기 위해 index.ts 파일 생성 후 아래 코드를 추가하자.

let a: number = 3;
a = 123123;
console.log("a", a);

② TypeScript 컴파일

브라우저가 ts를 인식하지 못하기 때문에, TypeScript로 작성된 파일을 실행하기 위해서 TypeScript 코드를 먼저 JavaScript로 컴파일한 후 node를 사용하여 실행해야 한다.
TypeScript 컴파일러(tsc)를 사용하여 JavaScript로 변환하자.

tsc index.ts

위 명령어로 index.js라는 JavaScript 파일이 생성된다.

③ JavaScript 파일 실행

node index.js

이제 index.js 파일이 변경될 때마다 tsc index.js 입력하여 TS 코드를 JS 코드로 컴파일 한 후 node index.js로 실행하면 된다!