[Typescript] 타입스크립트 개발환경 세팅

타입스크립트

타입 스크립트는 언어(language)이다. 

superset이라고 해서 자바 스크립트의 기본적 문법과 모두 호환이 되고 그 위에 타입 스크립트만의 문법이 적용된다.

타입스크립트는 컴파일 언어(Traditional Complie Language)이다. 그러나 전통적 컴파일 언어와는 다르다. 

엄밀하게 말하자면 컴파일 언어와는 조금 다르다. 

좀 더 정확하게 말하자면 트랜스파일러의 느낌이 강하며, 예를 들어 Babel등이 이에 속한다. 

트랜스파일이 적용되면 다른 언어로 변환된다. 

미리 helper 함수가 구현되었기 때문에 타입스크립트를 컴파일하여 자바스크립트로 코드로 변환하면 코드가 길어진다. 

이것이 단점이지만, 보완하기위한 노력이 계속되고 있다.

C와 같은 컴파일 언어는 타입체크, 최적화, 링킹, 바이너리 생성 등의 일을 한다. 

타입스크립트도 컴파일 하는 시점의 특정 업무가 실행되는데, 가장 중요한 요점은 타입 체크이다. 

그래서 이름도 타입스크립트이다.

타입 스크립트를 이해하기전에 언어의 특성에 따른 구분을 알아보자

프로그래밍 언어는 정적 타입과 동적 타입이 있는데, 

정적 타입은 타입을 못박아놓고 시작하는 C와 같은 계열이며, 

동적 타입은 타입 자체가 변형되는 자바스크립트와 같은 계열이다. 

동적 타입의 단점은, 타입의 변환이 자동으로 이루어지기 때문에 디버깅이 어렵다는 것이며, 

이러한 단점을 보완하기 위해 타입 스크립트가 개발된 면이 있다.

타입스크립트는 리액트와 함께 사용하는 경우가 많다.

리액트를 타입 스크립트로 사용하면 초기 설정이 조금 복잡하고 짜증나지만, 

모듈 사용에나 다른 작업 과정에서 이점이 상당히 많다.

컴파일러는 nodeJS의 npm 모듈을 사용하거나, visual studio의 내장 기능을 사용한다. 

될수 있으면 nodeJS의 npm 모듈을 사용하자.

컴파일러 설치

npm i typescript -g
 
// package.json의 transpile을 다음과 같이 설정해준다
"scripts": {
    "transpile":"tsc",
    "test": "echo \"Error: no test specified\" && exit 1"                                                
},
 
// 사용법은 다음과 같다. tsc 이후 파일명을 입력하면 js파일로 변환이 된다.
tsc source.ts

에디터 설치

vs code나 intelliJ, web storm을 사용한다. 

vs code는 타입스크립트로 만들어진 IDE이므로 강력한 지원이 된다. 

vs code는 타입스크립트의 새 버전이 나오면 해당 코드를 넣어서 새 버전을 릴리즈하면서 성장하고 있다. 

intelliJ도 같은 방식으로 타입스크립트가 내장되어있다.

개인적으로 vs code 사용을 선호한다.

tsc 설정 파일 생성

// 아래의 명령어 입력하면 tsconfig.json 파일이 생성된다.
// tsc 컴파일러의 초기 세팅을 하겠다는 뜻이된다.
tsc --init
 
// tsc --init을 입력했다면 앞으로 밑의 코드만 입력하면 된다.
tsc
 
// tsc에서는 왓치 모드를 사용할 수 있다. 변경되면 감지해서 새로 컴파일을 시켜주는 모드이다.                                  
tsc -w

초기에 config 파일을 만들면 3줄이 딸랑있다. 

target은 어떤 문법으로 변환할 것인지를 명시하는 키워드이다. 

예를 들어 es6나 es5등으로 변환이 가능하다. 

결과물이 어떤 module이 되는지 지정하는 키워드이다. 

초기에는 commonjs가 명시되어있다. strict는 타입 체크에 대한 설정이다.

내부 컴파일러

npm i typescript tslint                                                                                   
tslint --init

tsConfig의 프로퍼티

• json.schemastore.org/tsconfig 참조

• compileOnSave, extends, complieOptions, files, include, exclude

• compileOnSave : 파일을 저장하면 자동으로 저장하는 옵션(true/false)

• extends : 설정을 확장함

• complieOptions : 제일 많은 옵션 설정 프로퍼티

• file : 상대 혹은 절대 경로의 리스트 배열, exclude 보다 강력함

• include : exclude 보다 약함, *를 사용하면 .ts/.tsx/.d.ts만 include(allowJS)

• exclude : 설정안하면 4가지(node modlues, bower componets, jspm pacages, )를 default를 제외한다.