타입스크립트 [패스트캠퍼스 챌린지 13일차]

TypeScript란 무엇인가?

Typed JavaScript at any Scale

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

TypeScript

= Language

= Typed Superset of JS 자바스크립트의 기능을 강화

= compiles to plain JS

• TS는 programming Language
• TS는 Compiled Language
• 전통적인 Compiled Language와는 다른 점이 많다
• 그래서 Transpile이라는 용어를 사용하기도 함
• JS는 Interpreted Language

Compiled

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

Interpreted

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

자바스크립트 실행 환경 설치

node.js

Chrome's V8 JavaScript Engine을 사용하여, 자바스크립트를 해석하고 OS 레벨에서의 API를 제공하는 서버사이드 용

자바스크립트 런타임 환경

browser

HTML을 동적으로 만들기 위해 브라우저에서 자바스크립트를 해석하고, DOM을 제어할 수 있도록 하는 자바스크립트 런타임 환경

• 크롬 추천

node.js 설치

https://nodejs.org

버전 LTS : 안정적임
버전 Current : 최신 기술

node.js version manager

nvm : 이거 사용 중
n : ?

타입스크립트 컴파일러 설치

npm (권장)

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

Visual Studio plugin 설치 (윈도우?)

• Visual Studio 2017/2015 Update3 이후로는 디폴트로 설치됨

간단한 컴파일러 사용 예제

타입스크립트 컴파일러를 글로벌로 설치 후

• cli 명령어로 파일 컴파일
• 특정 프로젝트 폴더에서 타입스크립트 컴파일러 설정에 맞춰 컴파일
• 특정 프로젝트 폴더에서 타입스크립트 컴파일러 설정에 맞춰 컴파일(watch 모드)

프로젝트에 타입스크립트 컴파일러를 설치 후, (선호)

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

Visual Studio Code

TypeScript Compiler

VS Code에 컴파일러가 내장되어 있다

내장된 컴파일러 버전은 VS Code가 업데이트 되면서 올라간다

→ 그래서 컴파일러 버전과 VS Code의 버전은 상관관계가 있다

내장된 컴파일러를 선택할 수 있고, 직접 설치한 컴파일러를 선택할 수도 있다

---

//npm 프로젝트 시작
npm init -y 

npm i typescript -g // 쌤은 선호하지 않음
npm i typescript    // package.json에 디펜던시 안에 들어감
npm i typescript -D // 개발용. 실제 런타임 필요 없을 때. package.json dev디펜던시로 들어감

---

타입스크립트 두근두근
어떻게 생겨먹은 녀석일까

https://bit.ly/37BpXiC
본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.
#직장인인강 #직장인자기계발 #패스트캠퍼스 #패스트캠퍼스후기 #패캠챌린지 #한번에끝내는프론트엔드개발초격차패키지Online