TypeScript 환경, 기초 준비

PARK·2021년 2월 19일
0

TypeScript

목록 보기
1/1
post-thumbnail

이 포스트는 typescript를 처음 접하면서 중요하게 느낀 것을 담았습니다. 자주 사용하지만 확실하지 않았던 개념들과 typescript 환경 준비 과정을 정리하고 복습하는 목적을 갖고 작성합니다.

1 TypeScript 컴파일러 설치 및 사용법

$ npm install -g typescript

로 TypeScript 컴파일러를 설치하고 tsc 명령어로 컴파일러를 사용합니다.

여기서 트랜스파일개념과 컴파일 개념을 한 번 짚고 넘어가겠습니다.

Transpilers are source-to-source compilers

Compilers are only different from transpilers by the level of abstraction between input language and output language.

트랜스파일과 컴파일의 정의는 위와 같습니다. 위키피디아에서는 트랜스파일보다 컴파일을 더 큰 범주로 설명하기도 합니다.

StackOverflow나 기타 포스트 글에는 TypeScript를 굳이 구분하자면 Transpile로 보는 의견이 많습니다. 하지만 마이크로소프트에 공식 문서에서는 “TypeScript compiler”로 사용합니다. 이처럼 개념 상 차이가 있긴 하지만 구분 짓는 것은 크게 중요하지 않는 것 같습니다. 그리고 많은 문서와 사람들이 구분해서 사용하지 않는다고 알게 되었습니다.

밑에 열띤 토론을 참고하시면 제 설명보다 이해가 잘 되시라 봅니다.

https://stackoverflow.com/questions/44931479/compiling-vs-transpiling

https://www.quora.com/Is-TypeScript-compiled-or-transpiled

https://en.wikipedia.org/wiki/Source-to-source_compiler

tsconfig.json

Typescript로 짜여진 코드를 JavaScript로 변환해서 사용해야 하는데, 변화을 도와줄 트랜스파일러(컴파일러)가 바로
tsc입니다. tsc명령어를 통해 .ts파일을 js로 컴파일합니다.

$ tsc 파일명.ts

컴파일할 때마다 옵션을 반복적으로 사용하는데 이 때 사용하는 것이 tsconfig.json입니다.

$ tsc --init

로 tsconfig.json을 생성할 수 있습니다.

  • 참고로 패키지를 먼저 생성해줘야합니다.

$ npm init -y // 명령어

명령어를 사용해 package.json을 생성해줘야합니다.

https://velog.io/@fdsa09876/npm

2 IntelliSense

먼저 Language Service Protocol을 알아볼 필요가 있습니다.
LSP(Language Service Protocol)는 프로그래밍을 할 때 자동 완성, 정의로 이동, 모든 참조 찾기와 같은 기능을 지원하기 위해서 사용되는 프로토콜입니다.

이것을 자바스크립트 혹은 타입스크립트에서 구현한 것이 바로 IntelliCode를 통한 IntelliSense입니다.

쉽게 정리해서 말씀드리면 랭귀지 서버가 VScode 내부적으로 존재하기 때문에 인텔리센스 기능이 제공되는 것입니다.

IntelliSense는 eslint, TypeScript, JsDoc 등등에 걸쳐서 전부 연관이 있을 수 밖에 없습니다.

제네릭, 타입 추론 등 TypeScript를 공부하면서 자주 등장하는 단어인 만큼 개념 정리를 확실히 하고 공부하는 것이 좋겠습니다.

https://docs.microsoft.com/ko-kr/visualstudio/ide/javascript-intellisense?view=vs-2019#JsDoc

https://github.com/Microsoft/TypeScript/wiki/Using-the-Language-Service-API

3 Prototype

자바스크립트를 접하면서 프로토타입은 한 번씩 접해보셨을 겁니다. 프로토타입 기반은 타입스크립트에서도 마찬가지입니다. ES6로 class 문법을 많이 사용하는 지금, 프로토타입을 완벽히 이해하기에는 어렵지만 계속 복습하고 공부하는 것이 클래스를 비롯한 JS, TS에 큰 도움이 될것입니다.

이 글이 도움이 많이 됐습니다.

https://medium.com/@bluesh55/javascript-prototype-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-f8e67c286b67

profile
익숙한 것에 작별을 고해야한다

0개의 댓글