[땅콩코딩] 첫번째 수업, 두번째 수업

첫번째 수업 - 타입스크립트란 무엇일까?

제가 이번에 JavaScript를 이용하여 프로젝트를 진행하였습니다. 근데, 요즘 TypeScript 추세이기 때문에 JavaScript로 작성해서 완성한 프로젝트를 TypeScript로 변환하기 위해 공부하려고 합니다!

 

JavaScript와 TypeScript

자바스크립트와 타입스크립트의 차이

자바스크립트의 경우에는 에러가 발생하지 않는다. 하지만 타입스크립트는 저 경우에 에러가 발생한다. 왜냐하면 a, b의 데이터 타입을 선언할 때 숫자로 선언하고, 사용할 때 문자열로 사용하였기 때문에 에러가 난다.

 

컴파일이란?

어떤 언어의 코드를 다른 언어로 바꿔주는 변환 과정이다.

 

TypeScript

• 객체지향적이다.
• 컴파일 타임 오류를 잡을 수 있다. 컴파일 시 나타나는 오류를 잡아준다.
• 프로그래밍 언어인 동시에 타입스크립트를 자바스크립트로 변환해주는 컴파일러이기도 하다.
• 브라우저가 이해할 수 있게 TypeScript를 JavaScript로 바꿔준다.

 

두번째 수업 - 설치와 환경설정

익스텐션 설치하기

Visual Studio Code에 Third party plugins 설치하기

 

TypeScript 설치하기

 npm install -g typescript (g: global)

 

TypeScript Compiler

tsc 명령어를 사용해서 타입스크립트를 자바스크립트로 변환가능!

 

 

app.ts js로 변환하기

tsc app.ts를 쳐서 TypeScript로 작성되어져 있는 코드를 JavaScript로 바꿔준다.

 

 

app.ts에서의 에러

app.ts

 

app.ts와 app.js 둘 다 존재할 때, 나타나는 visual studio code 일종의 에러라고 할 수 있습니다. 이때 터미널에 tsc --init을 쳐주면 tsconfig.json 파일이 생기면서 에러가 사라진다.

 

app.ts와 app.js w 설정

app.ts를 수정했을 때, app.js가 적용되지는 않는다. 이때, 적용할 코드는 tsc -w app.ts이다. w는 watch로 감시하다라는 뜻이다. 그럼 app.ts를 수정하고 저장했을 때 자동으로 컴파일된다.

 

 

• File change detected. Starting incremental compilation... : 감시모드의 컴파일 프로세스가 시작되었다는 뜻!