[TS] TypeScript 정의, 설치 및 사용

 

📘 TypeScript란?

 

https://www.typescriptlang.org/

JavaScript With Syntax For Types.

Typed JavaScript at any Scale

• TypeScript extends JavaScript by adding types.
• By understanding JavaScript,
  • TypeScript saves you time catching errors and providing fixes before you run code.
• Any browser, any OS, anywhere JavaScript runs. Entirely Open Source.

 

TypeScript = Language

= Typed Superset JavaScript

= complies to plain JavaScript

• 타입스크립트는 'Programming Language 언어' 입니다.
• 타입스크립트는 'Complied Language' 입니다.
  • 전통적인 Complied Language 와는 다른 점이 많습니다.
  • 그래서 'Transpile' 이라는 용어를 사용하기도 합니다.
• 자바스크립트는 'Interpreted Language'입니다.

 

Complied

• 컴파일이 필요 O
• 컴파일러가 필요 O
• 컴파일하는 시점 O
• ⇒ 컴파일 타임
• 컴파일된 결과물을 실행
• 컴파일된 결과물을 실행하는 시점

Interpreted

• 컴파일이 필요X
• 컴파일러가 필요 X
• 컴파일하는 시점 X
• 코드 자체를 실행
• 코드를 실행하는 시점 O
• = 런타임

Type Script Compiler : TS(Editor) ⇒ JS(Browser, Node.js) 을 해주는 프로그램

 

 

📘 TypeScript 설치 및 사용

 

JS 실행환경

• node.js
  • Chrome's V8 JavaScript Engine을 사용하여, 자바스크립트를 해석하고 OS 레벨에서의 API를 제공하는 서버사이드 용 자바스크립트 런타임 환경
• browser
  • HTML을 동적으로 만들기 위해 브라우저에서 자바스크립트를 해석하고, DOM을 제어할 수 있도록 하는 자바스크립트 환경

간단한 컴파일러 사용 예제

• 타입스크립트 컴파일러를 글로벌로 설치 후,
  • Cli 명령어로 파일 컴파일
  • 특정 프로젝트 폴더에서 타입스크립트 컴파일러 설정에 맞춰 컴파일
  • 특정 프로젝트 폴더에서 타입스크립트 컴파일러 설정에 맞춰 컴파일(watch 모드)

# npm으로 설치

npm i typescript -g
node_modules/.bin/tsc
tsc source.ts

# Visual Studio plugin 설치

Visual Studio 2017 / 2015 Update 3 이후로는 디폴트로 설치되어 있음, 아니면 설치.

# TypeScript 사용하는 명령어(TS -> JS)
tsc [파일명] 

# 예시
## 간단하게 파일 생성
nano test.ts
## 컴파일, 문제없으면 아무것도 안뜸.
tsc test.ts
# 코드 확인
cat test.js
cat test.ts

# 폴더 생성
mkdir tsc-project

# 폴더 이동
cd tsc-project

# 간단하게 파일 생성
nano test.ts

# 자동으로 설정파일 생성 => tsconfig.json(프로젝트 루트)
tsc --init

# JS로 변환(tsconfig.json의 설정에 맞게) => test.js가 생김.
tsc

# ts 파일이 변경되면 즉시 js가 변경되도록 설정
tsc -w

 

• 프로젝트에 타입스크립트 컴파일러를 설치 후,
  • .bin 안의 명령어로 파일 컴파일
  • npm 스크립트로 파일 컴파일
  • 프로젝트에 있는 타입스크립트 설정에 맞춰, npm 스크립트로 컴파일
  • 프로젝트에 있는 타입스크립트 설정에 맞춰, npm 스크립트로 컴파일(watch 모드)

 

# 글로벌로 설치된 TS 삭제
npm uninstall typescript -g

# 프로젝트에 npm 설치
npm init -y

# json 파일 확인 => dependencies : typescript : ^4.2.3
cat package.json

# node_modules => typescript
npx tsc

# tsconfig.json file 설치
npx tsc --init

# watch 모드
npx tsc -w

# npx tsc 로 실행할 스크립트 등록 : "scripts"
npx tsc 
# "build": "tsc" => tsc tlfgod
npm run build
# build에 watch 기능 추가.
npm run build:watch