TIL - TypeScript를 써야하는 이유? TypeScript 설치 step by step

이번 주부터는 TypeScript를 배우고 실습할 예정이다.

javaScript 기반의 언어로 한층 더 편리한 기능들을 제공한다고 하는데, 쉽게 발생할 수 있는 휴먼에러(오탈자 등)를 체크해주고 컴파일 타임에 변수를 체크한다고 하는데, 이런 기능들을 어떻게 사용할 수 있을 지 궁금하다.

TypeScript를 써야하는 이유?

• 브랜드 커뮤니케이션 관련 서비스 제작 가능
• 프론트엔드 백엔드 공통사용 언어
• 기존 JavaScript에서 TypeScrip로 전환하는 추세
• 더 높아지는 생산성과 안전성
• 자연스러운 고급 프로그래밍 개념
• 줄어드는 테스트코드

---

TypeScript는 JavaScript의 모든 기능을 포함하면서 추가적인 기능(단점을 상쇄하기 위한)을 제공한다!

JavaScript의 단점	TypeScript의 해결
실행 시간에 결정되는 변수타입	*컴파일 시간에 체크되는 변수 타입
약한 타입 체크; 문자열, 숫자 들어와도 개의치않음	타입검사를 해주는 컴파일러, tsc! → VS Code에서 입력하는 순간 문법적인 오류 체크
너무 쉬운 객체 변조	VS Code에서 입력하는 순간 문법적인 오류 체크 →정의되지 않은 property를 연산해서 NaN이 되는 현상 미리방지 가능

*컴파일시간이란?

Compile Time: 프로그램 코드를 기계어로 번역하는 컴파일러가 동작하는 시간을 의미. 컴파일러가 소스코드를 기계어나 중간 코드로 변환해서 실행 가능한 바이너리 파일을 생성, 이로 인해 큰 프로젝트일수록 컴파일 타임이 오래 걸릴 수 있다. 컴파일타임을 줄이는 것도 효율성과 생산성 측면에서 중요한 포인트.

빌드타임도 알아보자

Build Tile: 소프트웨어 프로젝트를 빌드하는 데 소요되는 시간을 의미. 소프트웨어를 개발할 때, 소스코드를 실행 가능한 형태로 변환하고 실행 가능한 파일을 생성하는 과정을 빌드라고 한다! 이때도 프로젝트의 구조나 사용하는 라이브러리에 따라 빌드타임이 달라지므로 이를 최소화하는 것 또한 중요.

---

✔알아두자

• 객체지향 프로그래밍(OOP)를 할 때도 TypeScript!
• d.ts라는 확장자를 가진 선언파일을 통해서 외부 모듈의 타입 정보를 제공할 수 있음! @types 패키지

 

TypeScript 개발환경 구축하기(Windows)

---

1. Node.js  프로그램 설치 (version 12 이상)

→ nvm-windows (기존 node.js는 가이드에 따라 완벽하게 삭제 후 설치)

GitHub - coreybutler/nvm-windows: A node.js version management utility for Windows. Ironically written in Go.

→ 버전 중 nvm-setup.exe 다운로드 & 설치

 

2. PowerShell 실행 노드 설치

→ 현재 node 버전 확인

 

→ 노드 설치

nvm install 18

 

→ 설치한 노드 버전 활성화

nvm use <설치한 노드 버전

 

→ 설치 상태 확인

npm -v

→ PowerShell 종료 명령 프롬프트 실행

 

3. TypeScript 설치

npm install typescript -g