TypeScript(타입스크립트) 설치 및 개요
작년에 썼던 타입스크립트 글은 사실 강의 들으면서 메모했던 필기에 가까웠기에..

약 1년반이 지난 지금 나조차도 못알아보는 글이 되어버려서... 다시 작성해보는 타입스크립트 정리!
어쩌다 여유도 생겨서 한 입 크기로 잘라먹는 타입스크립트 강의를 들으면서 부족한 부분도 채워보고자 한다~!
이 링크를 통해 구매하시면 제가 수익을 받을 수 있어요. 🤗

타입스크립트 개론

타입스크립트란?

타입스크립트는 JavaScript의 Super-Set 언어이다.

그리고 C언어의 창시자인 앤더스 헤일스버그(위 사진) 라는 분이 만드셨다는데... 이것까지는 안중요
그렇지만 창시자가 같기때문에 타입스크립트는 자바나 C# 같은 정적 언어의 문법과 유사한 점이 많다고 한다. (이건 중요? 아마도?)

기존의 JS의 문법그대로 흡수 및 수용한 언어이고, type을 사전에 지정하는 기능을 더한 언어라고 할 수 있다.

타입시스템

언어들은 크게 두가지의 형태로 나뉘게 된다.

정적타입과 동적타입으로 나뉘게 되는데 각자의 특성은 아래와 같다.

정적 타입 시스템

• 코드 실행 이전에 모든 변수의 타입을 고정적으로 결정 (ex.c, java)
• 엄격하고 고정적인 타입
• 타입 오류가 있으면 실행이 되지않음.

동적 타입 시스템

• 코드를 실행하고 나서 그때마다 유동적으로 타입을 결정 (ex.python, javascript)
  - 아래의 예제처럼 할당되는 값에 따라 반영됨

 let a = "string" // string
 a = 123 // number

• 자유롭고 유연함

그리고 우리가 사용하는 타입스크립트는 독특한 타입 시스템을 가진다

스크립트의 독특한 타입 시스템

동적 타입 시스템 + 정적 타입 시스템

• 변수의 타입을 실행 전에 결정, 타입 오류를 실행 전에 검사한다.
• 모든 변수에 타입을 일일이 지정할 필요 없음 → 타입추론이 가능하다.
  ⇒ 점진적 타입 시스템 (Gradual Type System)

타입스크립트는 어떻게 실행될까?

일반적인 컴파일 개념

• 컴파일: 사람이 짠 코드를 컴퓨터가 이해하는 기계어로 변환하는 과정
• JS 변환: JS 코드 → AST(추상문법트리) → 바이트코드

TS의 실행 과정

1. TS 코드 작성
2. AST (추상문법트리) 변환
3. 타입 검사 (Type Checking) (여기서 실패하면 컴파일 종료)
   // 컴파일 종료 런타임 시작
4. JS 코드 변환 (타입 검사를 통과한 안전한 JS)
5. 실행

일반적인 컴파일러와 타입스크립트 컴파일 과정을 비교하면 아래와 같다

타입스크립트 실행하기

아~주 기본적인 타입스크립트를 알았다면 타입스크립트 실행 및 기본적인 옵션들도 알아야지!
요즘같은 시대에는 vite나 nextjs를 init 하면 다 기본으로 깔리긴 하지만,
옵션들이나 실행방법은 알아야지~

package.json 생성

npm init -y

TS를 JS로 컴파일링 시켜줄 수있는 컴파일러 세팅하는 작업

npm i typescript -g

node 타입정의

npm i @types/node

tsx 설치하기

npm i -D tsx

컴파일러 하기

tsc src/index.ts

컴파일된 js 터미널에서 실행하기

node src/index.js

터미널에서 바로 ts 실행하기

tsx src/index.ts 

tsx가 뭐지?

원래 브라우저나 Node.js는 TypeScript를 직접 이해하지 못해서 tsc로 변환(컴파일) 후 node로 실행해야 하는 번거로움이 있었다.

tsx는 이 과정을 한 번에 처리해 주는 도구라고 한다!
ts-node도 많이 사용했지만, 23년 10월 이후에는 Node.js LTS가 20대로 업데이트 되며 tsx위주로 사용한다고 한다. 내부적으로 esbuild라는 것을 사용해서 엄청 빠르다고 한다!

ts 초기화 및 tsconfig init

tsc --init

컴파일러 옵션

• 얼마나 엄격하게 검사할지, 자바스크립트 코드의 버전은 어떻게 할지... 등등 설정하는 파일
  tsconfig.json

{
  "compilerOptions": {
    "target": "esnext", // 컴파일된 결과 버전
    "module": "esnext", // 모듈 버전
    "outDir": "dist", // 컴파일된 파일이 저장되는 루트
    "strict": false, // 엄격한 타입 검사
    
   // 타입스크립트는 모든 파일을 전역 모듈로 취급
   // but export, import가 있으면 독립된 모듈로 취급
   "moduleDetection": "force", // 자동으로 export {} 생성
   "skipLibCheck": true // 외부 라이브러리를 설치할 때, 타입지정 검사 생략하고자 할때

    "strictNullChecks": true, // 타입지정 시, null 타입 사용에 대한 여부 
  },
  "ts-node": {
    "esm": true // ts-node가 esm 모드로 실행됨
  },
 "include": ["src"] // src 이하에 있는 파일 컴파일 
}

이 중에서 유의할 부분은 moduleDetection 인데 타입스크립트는 기본적으로 각각의 파일들을 전역요소로 인식한다! 파일이 달라도 var처럼 글로벌 스코프 선언이 되어 버리기 때문에 "moduleDetection": "force" 가 필요하다!