타입스크립트 요약

타입스크립트란?

타입스크립트 -> 자바스크립트를 기반으로 한 정적 타입 언어

 

타입스크립트의 주요 특징

 

 

정적 타입 시스템 -> 프로그램이 실행되기 전에 모든 변수와 함수의 타입을 확인하고 고정하는 방식 

• 컴파일 타임에 모든 변수와 표현식의 타입을 확인하고 고정하여 런타임 오류를 방지함
• 함수의 매개변수와 반환 값에 타입을 명시하여 잘못된 타입의 데이터가 전달될 경우 컴파일러가 이를 감지하고 오류를 발생시킴

• 자바스크립트의 상위 집합:
  • 자바스크립트의 모든 기능을 포함하고 있기에 자바스크립트 코드가 타입스크립트에서 그대로 동작함
  • 자바스크립트로 트랜스파일되며 모든 브라우저에서 실행될 수 있는 자바스크립트 파일을 생성함
• 향상된 개발 경험:
  • 코드 자동 완성, 실시간 오류 감지, 리팩토링 지원 등 다양한 도구를 통해 개발 경험을 향상.
  • 큰 규모의 프로젝트에서 코드의 일관성을 유지 및 협업 시 발생할 수 있는 문제를 줄임

 

타입스크립트 컴파일러 동작 원리

1. tsc 명령어를 사용하여 타입스크립트 컴파일러를 실행하고, tsconfig.json 설정 파일을 참고함
2. 컴파일러가 모든 입력 파일과 import된 파일을 로드
3. 코드를 읽어들여 프로그램 구조를 나타내는 AST(추상 구문 트리)를 만듦
4. 변수와 함수 등 모든 요소의 관계를 정리한 심볼 테이블을 생성
5.  AST를 바탕으로 타입스크립트 코드를 자바스크립트 코드로 변환
6. 컴파일러가 코드를 검사하여 타입 오류를 찾고, 오류가 없으면 최종 자바스크립트 파일을 생성

요약

타입스크립트 컴파일러가 코드를 분석→

분석 이후 오류가 없다면 Javscript 코드로 “전부” 변경→

즉, 런타임 (↔ 컴파일 타임)에는 전부 javascript 와 동일하게 동작

 

 

React + TypeScript 프로젝트 생성

 

//Vite 프로젝트 생성
npm create vite@latest my-react-ts-app -- --template react-ts
//프로젝트 디렉토리로 이동 및 종속성 설치
cd my-react-ts-app
npm install
//Vite 개발 서버 실행
npm run dev

 

 

 

마치며

 

이제 next.js와 타입스크립트를 배우기 시작하는데 떨리기도하고

잘 배울 수 있을지 모르겠다 살짝 걱정되는데 타입스크립트를

자바라고 생각하고 배우면 좀 더 쉽지 않을까..? 이렇게라도 최면을 걸어야겠다