타입스크립트란 무엇일까? + 개발환경설정

타입스크립트란 무엇일까?

 

1. 타입스크립트란?

• 자바스크립트를 기반으로 한 superset이다.
• 자바스크립트의 기능 + 자바스크립트에 없는 기능

2. 타입스크립트의 특징

• 타입표기 : 변수 값에 데이터 타입 지정 가능
• 객체지향적
• 컴파일 타임 오류를 잡을 수 있다. 타입스크립트로 작성된 코드가 자바스크립트로 컴파일 되어야 한다. 왜냐면 브라우저는 JS만 이해가능
• 프로그래밍 언어인 동시에 컴파일러!

---

개발환경설정

 

1. VS Code 설치

• 구글 검색해서 다운 고고 https://code.visualstudio.com/
• Extension 설치
  (1) Prettier : 코드를 포맷팅하는 것을 도와주는 것, 코드를 보기 쉽고 읽기 쉽게
  (2) ESLint : 코드 품질 도구, 코드 검사, 문제에 대해 경고
  (3) Path Intellisense : 로컬 파일을 빠르게 검색할 수 있게 자동완성으로 도와주는 애
  (4) Bracket Pair Colorizer : 짝이 맞는 괄호 끼리 색을 칠해서 쉽게 구분하게 해주는 것
  (5) Material Icon Theme : 프로젝트 아이콘을 이쁘고 보기 쉽게 만들어줌

 

 

2. 타입스크립트 설치

• 타입스크립트 홈페이지 에서 다운 https://www.typescriptlang.org/
• NPM 으로 설치한다. CMD창 열어서 npm install -g typescript
  NPM : Node Package Manager -> Node JS의 한 부분

 

3. 파일 만들어보기

• VS 코드에서 각자 폴더안에 index.html과 app.ts 생성
• 타입스크립트 안에 자바스크립트 언어를 사용해도 유효함
• Jerry 라는 이름 출력해보기, 우선 함수를 코딩한다.
  

  function logName (name: string) {
      console.log(name);
  }
  
  logName('Jerry');​

• 그 다음 vs code에서 터미널 실행 후 tsc app.ts 입력 (tsc가 컴파일한다는 명령어 이다.)
  

  

• 그럼 아래와 같이 app.js가 컴파일되어 나온다.
  

  

• 그 후 app.js 를 index에 스크립트 태그로 넣어서 실행해본다. 그럼 콘솔창에 출력된 것을 확인할 수 있다.
• 근데 vs 코드를 보면 아래와 같은 타입스크립트 오류가 나온다.
  

  

  이건 vs code의 버그 같은건데 터미널에서 타입스크립트의 configuration 파일을 추가해주는 것이다.
  터미널에 tsc --init 명령어를 쳐준다.
  
  그럼 폴더에 tsconfig.json 파일이 생성되는데 그러고 나면 해당 에러가 사라진다.
  
  
  
• 그리고 또 매번 ts -> js 를 컴파일하기가 번거로운 문제가 있다.
  (개발자는 모름지기 편안~~ 하게 코딩해야하기때문)
  이때는 터미널에 tsc -w 파일명.ts 명령어를 써준다. (watch 감시하다는 의미이다.)
  그리고 나서 코딩 후 저장하면 js 파일도 수시로 변경되는 것을 확인 할 수 있다.
  
  

---

본 포스팅은 땅콩코딩님의 유투브 강좌를 토대로 작성하였습니다.