TypeScript(타입스크립트) 설치 및 개요

2023Stateofjs

• TypeScript는 JS의 Super-Set언어

• 앤더스 하일스버그(C언어 개발 창시자) 개발자가 만듬

• Javascript 언어 < Java언어 < C언어 (객체지향)

• 기존 JS언어 문법을 그대로 흡수 & 수용 + @
  - Type을 사전에 지정하는 기능 더한 것!!

• C언어 & Java : B/E
  - 변수 선언 => 값(사전 변수 타입)
  - 변수 = 숫자 // 문자

Node.js의 탄생

• Google Chrome 브라우저 탑재 V8검색엔진

• V8 => Node.js // JS 브라우저가 아닌 환경에서도 JS를 사용할 수 있음

• JS => Server

• JS를 Strict Mode => TS

• 모든 프로그래밍언어는 타입 시스템을 가지고 있음

• C, Java : 정적 타입 시스템(코드를 실행하기 전에 모든 변수의 타입을 고정적으로 선 결정 => 값 할당)

• TS : 점진적 타입 시스템 (변수안에 값을 넣으면, 자동으로 값을 추론 // 변수의 타입을 바로 고정)

• JS : 동적 타입 시스템(코드를 실행하고 나서 해당 변수안에 담긴 값을 유추해서 변수 타입을 결정)

웹브라우저가 인식할수 있는 언어 3가지

• HTML, CSS, JS
• 그외에는 컴파일러가 필요

TS의 컴파일링 작동 프로세스

1) JS(인간 친화적인 언어) => 브라우저(AST 구조) => 바이트 코드 (실행)
2) TS(인간 친화적인 언어) => 1차 AST구조 (기계 친화적인 언어) => 타입검사 성공 => JS(컴파일링) => 2차 AST 구조(기계 친화적인 언어) => 바이트 코드(실행)

수동적 세팅

터미널에서

npm init -y (packge.json 생성)

npm i typescript -g (최초 딱 한번만)
npm i typescript TS를 JS로 컴파일링 시켜줄 수있는 컴파일러 세팅하는 작업

npm i @types/node (node 타입정의, node_modules 생성)

tsc -v 컴파일러 설치여부를 확인(버전확인)

tsc src/index.ts  : 컴파일링 (js 파일 생성)
node src/index.js : 노드 기반에서 터미널 내 실행시키고자 하는 JS파일을 테스트

npm i tsx -g (최초 딱 한번만)
npm i tsx

tsx src/index.ts

tsc --init : 타입스크립트 컴파일러 옵션 설정 명령어 (아래 자세히 옵션 설명)

모듈 Module : 복수의 자바스크립트 파일을 각 기능에 따라서 개별적으로 생성해놓고 상황에 따라서 가져다가 사용하기 위해서 만든 시스템

---

JS => TS 컴파일링 & Node에서 실행

TS 컴파일링 환경설정 세팅!

tsc --init

package.json 에서 타입 명시

  "type": "module"

tsconfig.json 설정 옵션들

{
  "compilerOptions": {
    "target": "ESNext", // 컴파일링될 파일들의 JS 버전 정의
    "module": "ESNext", // 컴파일링될 파일들의 모듈시스템 버전 정의
    "outDir": "dist", // 컴파일링될 파일들을 저장할 공간 정의, 쓸필요없음
    "strict": true, // 컴파일링 하고자 하는 파일에 타입을 엄격하게 검사 여부
    "strictNullChecks": true, // 타입지정 시, null 타입 사용에 대한 여부 
    "moduleDetection": "force", // 타임스브립트 각 파일을 독립적인 모듈로 인식, 선언시 지역변수화
    "skipLibCheck": true // 외부 라이브러리를 설치할 때, 타입지정 검사 생략하고자 할때
  },
}

타입스크립트는 기본적으로 각각의 파일들을 전역요소로 인식! (파일이 달라도 글로벌 선언)
=> "moduleDetection": "force" 가 필요