step 1

실행 환경

node.js

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

자바스크립트 런타임 환경

browser

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

컴파일러

npm (권장)

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

Visual Studio plugin 설치

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

간단한 컴파일러 사용 에제

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

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

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

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

npm이 설치된 환경에서 (VScode에서 npm을 설치하였다.)

참고

https://medium.com/@sym1945/visual-studio-code%EC%97%90%EC%84%9C-npm%EC%9C%BC%EB%A1%9C-javascript-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC-%EC%84%A4%EC%B9%98%ED%95%98%EA%B8%B0-11790a97fff9

명령어 입력: npm i typescript -g

vscode에서 TypeScript를 사용하기 위해 프로젝트 폴더를 만들어주고

해당 폴더를 열어준다.

명령어: npm init -y 를 입력

package.json 파일이 생성된다.

명령어 입력: npm i typescript -D

typescript 패키지를 다운 받는다.

명령어: npx tsc --init

타입스크립트 컴파일 옵션 사용 명령어(tsconfig.json 파일 생성 확인)

type annotation

let 변수: 형식

let b: String;

예제

let b: String;

b = 'String';

b= 00;

문자를 입력할때는 에러가 발생안하지만 숫자를 입력하면 에러 발생

function 함수명(변수: 형식) {

}

function hello(b: number){

}

예제

function hello(b: number){

}

hello('String')
hello(99)

String에 마우스를 올리면 에러 내용을 확인 할 수 있다.