TypeScript

• typed superset of javascript
• compiles to plain javascript
• javascript에 type을 추가
• 코드를 고치고 에러를 고치는 시간을 절약할 수 있음.

	compiled	interpreted
컴파일	필요	필요x
컴파일러	필요	필요x
	컴파일된 결과물을 실행	코드 자체를 실행

TS --(TypeScript Compiler) --> JS

typescript install

js 실행환경

• node.js
  • chrome's v8 javascript engine 사용
  • os 레벨에서 api를 제공하는 서버사이드용 javascript runtime 환경
• browser
  - HTML을 동적으로 만들기 위해서 브라우저에서 JS를 해석
  - DOM을 제어할 수 있도록 하는 js runtime 환경

node.js install

• nvm : node version manager, nodejs의 버전을 관리해줌
• node.js : https://nodejs.org/ko/download/

visual Studio plugin 설치

• 2017 버전 이후로는 기본적으로 설치 되어 있다.

typescript install global

npm i typescript -g

• node_modules/.bin/tsc
• tsc source.ts

tsc --init

• ts 설정 파일 생성 : tsconfig.json

tsc -w

• 파일이 수정될 때마다 컴파일

삭제 시 : npm uninstall typescript -g

typescript install in 개인 project

npm init -y

• package.json 파일 생성
• npm 프로젝트 형성

npm i typescript

• package.json에 의존형으로 typescript가 설치된 것을 확인할 수 있다.

node_modules.bin\tsc

• tsc 사용
• npx tsc --init//tsc로 프로젝트 생성(tsconfig.json)
• package.json 수정 => npm run build로 tsc 사용 가능

  "scripts": {
    "build": "tsc"
  },

ERROR

• 왜 실행이 안 되지 했는데 컴파일할 TS 파일이 없었음
• TS 파일을 만드니 해결!!

visual studio code

• typescript compiler 내장
• vs code와 컴파일러 버전과 상관 관계
• 내장된 컴파일러를 사용하거나 직접 설치한 컴파일러를 선택할 수 있음.

Type Annotation

let a = "aria";

a = 30; // a는 string이라 오류

let a:number; //number 타입 지정 

a= "aria"; //a는 number라 오류
a= 39;

function hello(b: number){}

hello('hi') // 오류, number 인수값만 입력 가능