2. Typescript 설치 및 만들기

VSCode를 설치하고 몇가지 Extension을 설치해준다.

 

1. prettier 내가 쓰는 코드를 보기 좋게 읽기 쉽게 정돈 해준다.

2. ESLint 코드를 검사하고 잠재적인 문제에 대해서 경고해준다.

3. Path in localfile을 빠르게 참조할 수 있도록 자동완성을 해주는 기능이다.

4. bracket parint colori 괄호끼리 색을 맞춰주어 보기 쉽게 만들어준다.

5. material icon theme 아이콘을 좀 더 이쁘게 만들어주어 코딩의욕을 샘솟게 만든다.

 

TypeScript: JavaScript With Syntax For Types. (typescriptlang.org)

JavaScript With Syntax For Types.

위 사이트에 접속하여 Typescript를 설치 해줄 수 있다.

 

npm install -g typescript을 실행 시키기 위해서

npm을 설치해야하고 또 npm을 실행시키기 위해 nodejs가 필요하다

nodejs만 설치하면 npm도 알아서 설치가 되기에 nodejs만 설치해주자

 

타입스크립트는 프로그래밍 언어임과 동시에 컴파일러이다!

방금 다운로드 받은것은 컴파일러를 받은 것이고 tsc명령어를 통해서 타입스크립트를 자바스크립트로 변환시켜줄 수 있다.

타입스크립트는 자바스크립트를 기본으로 한 언어이기에 자바스크립트에서 유효한 코드는 타입스크립트에서도 유효함을 알 수 있다.

 

function logName(name: String) {
  console.log(name);
}
logName("taehyeki");

app.ts라는 파일을 만들고 위와 같이 함수를 만들어준다.그런다음 tsc(typescript conpiler) app.ts 를 해주면app.js로 컴파일된 자바스크립트가 생긴다.

 

그런 뒤 node app.js를 해보면 콘솔창에 taehyeki가 출력되는 것을 알 수 있다!!!

 

app.ts를 눌러보면 logName에 중복된 함수라는 오류메시지가 떠있는데 일종의 버그라고 말한다.tsc --init을 해주면  tsconfig.json이라는 파일이 생기는데 이 이후로는 오류메시지가 뜨지 않는다

 

또 수정 할 때마다 계속 tsc app.js를 해야하는 번거로움이 있지만 -w(watch)옵션을 줘서tsc -w app.ts 를하면 수정할 때마다 app.js가 자동적으로 수정갱신 되는 것을 확인할 수 있다.