TypeScript 특징 및 환경셋팅

타입스크립트 특징

• 변수 값에 데이터 타입 지정 가능
• 객체지향적
• 프로그래밍 언어인 동시에 컴파일러
  • 컴파일 타임 오류를 잡을 수 있다
    • 타입스크립트를 자바스크립트로 변환해주는 과정이 필요(브라우저는 자바스크립트로 돌아가기 때문)

타입스크립트 환경셋팅

NPM 설치

Node Package Manager

• 모듈 설치 도구

• Node JS의 한 부분

• npm으로 Typescript 설치

  # cmd
  npm install -g typescript

  
  

VS Code 설치

• 코드 에디터(코드 작성 프로그램)

• VS Code Extension (확장 프로그램) - 📥설치!

  • Prettier : 코드를 보기 좋고 읽기 쉽게 만듦

  • ESLint : 코드 품질 도구로 코드 검사 및 잠재적인 문제 알림

  • Path Intellisense : 로컬파일을 빠르게 참조할 수 있도록 자동 완성 ex) 경로에 있는 이미지 이름 띄움

  • Bracket Pair Colorizer : 짝이 맞는 괄호끼리 색을 입혀 읽기 쉽게 만듦

  • Material Icon Theme : 프로젝트 아이콘들을 이쁘게 만듦

    • 🔔 html 파일의 아이콘이 django 아이콘으로 보이는 문제!

      →

      setting -> 검색창에 file association -> Add item

      

  • Live Server : 로컬 서버로 파일 내용을 바로 실행할 수 있고 파일이 수정되면 바로바로 반영

    • 사용법 : html파일을 오른쪽 클릭 후 Open with Live Server 클릭 or 하단의 Go Live 클릭
    • 브라우저가 열리고 화면에 결과가 반영

TypeScript Compiler 사용

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

  # VS Code의 bash 창에서 명령어 입력
  tsc app.ts

  • 타입스크립트 확장자는 .ts

  • 명령어 입력 시 타입스크립트가 변환되어 자바스크립트 파일이 하나 생성

• ts 파일 내용이 변경될 때마다 자동으로 js로 컴파일 (이거 사용하자!)

  # bash
  tsc -w app.ts

JavaScript 실행

# bash
node app.js

TypeScript 함수명 빨간줄 에러

• VS의 단순한 버그

  # bash
  tsc --init

• tsconfig.json가 생성되고 에러 해결

• tsconfig.json은 컴파일의 여러 옵션을 설정할 수 있는 파일

  • 옵션 설명 참고 : https://geonlee.tistory.com/214

실습 코드 : https://github.com/cijbest/TIL/tree/master/TypeScript/%EC%8B%A4%EC%8A%B5/Day_1

공부 영상 출처 : [땅콩코딩] https://youtu.be/VJ8rvsw2j5w , https://youtu.be/PTKsW6YtAYU