[TypeScript] 타입스크립트와 설치

TypeScript란?

타입스크립트(TypeScript)는 자바스크립트의 슈퍼셋인 오픈소스 프로그래밍 언어이다. 마이크로소프트에서 개발, 유지하고 있으며 엄격한 문법을 지원한다. C#의 리드 아키텍트이자 델파이, 터보 파스칼의 창시자인 Anders Hejlsberg가 개발에 참여한다.[4] 클라이언트 사이드와 서버 사이드를 위한 개발에 사용할 수 있다.

타입스크립트는 자바스크립트 엔진을 사용하면서 커다란 애플리케이션을 개발할 수 있게 설계된 언어이다.[5] 자바스크립트의 슈퍼셋이기 때문에 자바스크립트로 작성된 프로그램이 타입스크립트 프로그램으로도 동작한다.

타입스크립트에서 자신이 원하는 타입을 정의하고 프로그래밍을 하면 자바스크립트로 컴파일되어 실행할 수 있다.
타입스크립트는 모든 운영 체제, 모든 브라우저, 모든 호스트에서 사용 가능한 오픈 소스이다.

 

https://ko.wikipedia.org/wiki/%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8

타입스크립트 - 위키백과, 우리 모두의 백과사전

 

왜 TypeScript가 등장했을까?

타입스크립트는 결국 자바스크립트로 "컴파일" 되는 언어입니다. .ts 확장자를 사용하긴 하지만 결국 최종 산출물은 .js 파일이 됩니다.

그렇다면, 여기서 의문점이 생기게 된다 왜 es6 이후 자바스크립트로도 충분히 개발 가능할텐데 굳이 번거롭게 무언가를 사용하는 것일까요? 여러가지 해석이 있을 수 있지만 직접 사용해보면서 느낀 생각은 사람이 할 수 있는 여러 실수들을 잘 잡아주는 역할을 해주는건 확실한 것 같습니다. .ts 파일 만들고 문법을 지켜야 해서 귀찮지만, 그 규칙을 잘 지켰다면 사람의 실수로 발생할 수 있는 여러가지 버그나 치명적인 오류를 발생시키는 것을 줄여주는 효과는 분명한 것 같습니다. 구체적으로 사례를 들면 이런 식입니다. 자바스크립트는 변수를 선언하고 그 변수에는 모든 것이 들어갈 수 있습니다. 정말 모든 것 말입니다.  숫자, 불리언, 문자, 함수, 클래스 등등 정말 모든 것이 들어갈 수 있어서 자유도가 높은 것은 확실한데 모든 것이 들어갈 수 있어서 감도 안잡히는 여러가지 런타임 오류와 버그를 발생시킬 수 있습니다. 가령 카운트 계수를 올리는 함수를 만들었는데 알고보니 string 문자열로 입력값이 들어와서 +1 이 되는 것이 아니라 "1" 이라는 문자열에 합쳐지는 연산을 해서 런타임 오류가 발생했다는 등의 정말 사소한 실수를 많이 할수 있습니다. 이런 상황에서 타입스크립트는 엄격한 타입 체크를 통해서 실수를 잡아주고 런타임 오류가 발생할 부분들을 교정해주는 역할을 해줍니다. 번거로운 규칙이 능률이 떨어뜨릴 것 처럼 느낄 수 있지만, 오히려 규칙을 지킴으로써 몇시간, 며칠 씩 디버깅하느라 쏟는 시간을 줄여준 것이라면 그게 오히려 이득이 아닐까요? 개발자의 시간 또한  비용인데, 디버깅에 쏟는 시간을 조금이라도 줄여주는 것은 곧 막대한 개발 비용을 줄여주게 되는 것이라고 할 수 있겠습니다.

 

---

TypeScript의 설치

타입스크립트는 Vscode와 같은 IDE 통해 설치할 수 있습니다. (물론 cmd 와 같은 cli 환경에서도 사용 가능합니다.)

Vscode의 터미널을 열어 아래의 명령어를 입력하고 엔터를 누르면 손쉽게 설치 가능합니다.

 

npm install -g typescript

 

추가로 타입 스크립트는 설치후 사용할 때 설정 파일이 필요합니다.

이때 생성해야할 설정 파일은 tsconfig.json 이다. 리액트 등에서 타입스크립트를 사용하여 어플리케이션을 만들면 보통 자동으로 생성해줍니다. 만약 디렉토리에 tsconfig.json 이 없다면 아래 처럼 작성하여 직접 추가해주면 됩니다.

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "noImplicitAny": true,
    "strictNullChecks": true
  }
}

 

 

타입스크립트를 html과 함께 사용하고자 한다면 컴파일 작업을 해주어야 합니다.

아래의 명렁어를 입력하면 타입스크립트 파일을 자바스크립트 파일로 바꾸어 줍니다.

 

tsc --watch MyScript.ts

 

 

해당 명령어를 작성하면 디렉토리 하단에 다음과 같이 자바스크립트 파일이 잘 생성된 것을 확인할 수 있습니다.

 

 

이외에도 특정 디렉토리에 있는 모든 타입스크립트 파일을 컴파일 하고 싶다면

아래와 같이 파일명을 빼고 명령어를 입력하면 해당 디렉토리에 있는 모든 타입스크립트 파일을 자바스크립트로 변환해주며, 타입스크립트 파일에 변경사항이 있을 경우 저장버튼을 누르면 실시간으로 업데이트 해줍니다.

 

tsc --watch

 

 

자동 컴파일링 기능을 끄고 싶다면 Ctrl+C를 입력하여 종료하면 됩니다.