컴파일러 & tsc

컴파일러?

: 프로그래밍 언어로 작성된 소스 코드를 다른 프로그래밍 언어로 변환하는 도구

tsc?

: Typescript 컴파일러

• JavaScript는 기계어로 변환될 필요가 없다
  -> JavaScript는 동적 언어(=인터프리터 언어)이기 때문
• 정적 언어(=컴파일 언어) → 기계어로 변환이 되어야 함
• 동적 언어(=인터프리터 언어) → 엔진이 코드를 한 줄씩 실행하면서 동적으로 해석

tsconfig.json?

: TypeScript 프로젝트의 설정 파일
-> 주로 프로젝트의 컴파일 옵션 및 입력 파일들을 정의하는데 사용

.d.ts 파일

: TypeScript 타입 정의 파일
= JavaScript 라이브러리에 대한 타입 정보를 제공한다

• .d.ts 파일로 TypeScript 컴파일러는 다음을 알 수 있다
  • 외부 라이브러리의 함수 타입 정보
  • 외부 라이브러리 클래스 타입 정보
  • 외부 라이브러리 객체 타입 정보
• 뿐만 아니라, .d.ts 파일로 외부 라이브러리의 타입 추론도 할 수 있다
  • 타입 추론이란 타입이 명시가 되지 않았을 때 컴파일러가 알아서 해당 타입에 대해 추론을 하는 것이다

TypeScript 셋팅

1. 프로그램이 위치할 프로젝트 디렉토리를 새로 만든다

2. 해당 디렉토리에 가서 다음의 명령어들을 복사 + 붙여넣기해서 터미널에서 실행

   npm init -y

   tsc --init --rootDir ./src --outDir ./dist --esModuleInterop --module commonjs --strict true --allowJS true --checkJS true

3. package.json의 “scripts” 항목을 다음과 같이 변경한다. TypeScript 프로젝트 실행을 편하게 하고자 함

   "scripts": {
       "start": "tsc && node ./dist/index.js",
       "build": "tsc --build",
       "clean": "tsc --build --clean"
   },

4. 'src 디렉토리도 생성'
   ex) first_typescript라는 프로젝트 디렉토리를 생성

   ░▒▓ ~/w/first_typescript ▓▒░ ls -al                     ░▒▓ ✔ │ 08:01:29 PM ▓▒░
   total 32
   drwxr-xr-x   5 chris  staff    160  5  4 20:11 .
   drwxr-xr-x  32 chris  staff   1024  5  4 18:35 ..
   -rw-r--r--   1 chris  staff    230  5  4 19:08 package.json
   drwxr-xr-x   3 chris  staff     96  5  4 20:11 src
   -rw-r--r--   1 chris  staff  11298  5  4 20:10 tsconfig.json

5. 해당 디렉토리 위치를 기반으로 편집기를 열어서 코딩 시작

   code .