chap.1 타입스크립트가 뭐라고 도대체

타입스크립트.. 정말 가깝게 느끼자면 가깝지만 막상 적용하지가 쉽지 않은 그것!!
다시한번 도전해 볼까요..!!

타입스크립트란?

타입스크립트란 타입을 가지고 있는 자바스크립트의 슈퍼셋이며, 어떠한 브라우저, 운영체제에서 구동되는 오픈소스입니다.

즉, 자바스크립트의 상위 집합이기 때문에 이전의 자바스크립트, 그리고 이후의 자바스크립트까지 모두 타입스크립트에 포함이 된다고 할 수 있어요!

하지만, 동적인 언어인 자바스크립트와 다르게 자바와 같은 정적언어이기 때문에 컴파일시간에 타입을 검사하며, 컴파일을 해주어야만 하겠죠?
이전과 다음의 자바스크립트를 포함한다는 것을 그림으로 본다면 아래와 같이 표현할 수 있습니다.

타입스크립트의 장점

• 강력한 타입으로 대규모서비스의 개발에 적합합니다.
• 유명한 자바스크립트 라이브러리와의 편리한 호환을 자랑합니다.
• vscode와 같은 개발도구에서의 자동완성과 같은 지원이 매우 강려크!! 합니다.

정리하자면 타입스크립트란 - 자바스크립트의 모든 문법을 지원하고 컴파일되서 자바스크립트로 만들어지는 정적 프로그래밍 언어입니다.

물론 개발시에 정적언어 vs 동적언어의 속도에는 여러가지 의견들이 갈리고 있어요.
개발당시의 단기간만 생각해본다면 타입지정없이 개발을 하게 된다면 정말 단기간에 개발을 끝낼 수 있다는 장점이 있겠지만,
그와 반대로 장기간적으로 생각해본다면 유지,보수를 포함해서 정적언어가 우위를 가지고 있겠죠?

내가 타입스크립트를 사용하고자 하는 이유

이부분은 지극히 객관적인 부분이에요..
사실 이전에도 타입스크립트를 리액트 프로젝트에 적극 도입하고 싶어서, 몇번 찾아보고 공부도 해봤지만, 오히려 다음과 같은 불편함만 느낄 수 있었어요.

• 라이브러리 선택시에 typesearch에서 @types/를 찾아가면서 해야한다. (이럴거면 npm..을.....)
• 라이브러리 안에 d.ts가 없을시에 타입스크립트 초보자인 나에게는 너무 난감했다.
• 함수형프로그래밍시에 파라미터와 리턴 타입이 자동으로 타입 추론이 되지 않아서 오히려 사용하기 껄끄러웠다.

그럼에도 이번기회에 타입스크립트를 꼭 학습해야겠다고 생각한 이유는 다음과 같은데,

• 정적언어인 자바에 대한 지식이 어느정도 자리잡았다.
• 끝없이 커지고 있는 타입스크립트의 커뮤니티..!
• 이제는 혼자하는 프로젝트가 아닌 협업을 위한 프로젝트를 대비해야만 한다.
• 트렌드를 놓칠수는 없으니까!

---

시작

이제 기본적인 타입스크립트의 개념부터 시작해서 리액트에 타입스크립트를 적용시키는 것까지, 한번 시작을 해볼까요 !!!!!!!!!!!

설치

먼저 개발환경 (Node.js)에 typescript를 전역으로 설치해 줍니다.

npm i -g typescript

전역으로 설치를 마치면 터미널에서 tsc 파일명 으로 컴파일을 해줄 수 있습니다.

---

타입스크립트 컴파일러

타입스크립트는 Node.js가 설치되어 있어야만 컴파일 해줄 수 있습니다.
컴파일시 지정한 다양한 옵션들이 적용되어서 .ts파일을 .js파일로 변환시켜주는 마법이죠.

한번 해볼까요?
hello.ts를 만들고 코드를 쳐줍니다.
타입스크립트는 모든 자바스크립트를 허용하기 때문에 var과 let을 모두 사용해 볼게요 .

//hello.ts
var hello = "hello";
let hello2 = "hello";

tsc hello.ts를 입력하면 다음과 같이 컴파일된 hello.js파일이 생성될 것입니다.

//hello.js
var hello = "hello";
var hello2 = "hello";

구형브라우저도 지원하기 위해 과거 문법으로 컴파일 된것을 확인할 수 있는데,
이때는 --target이라는 옵션을 다음과 같이 줄 수 있습니다.

tsc hello.ts --target es6
es6문법으로 컴파일을 부탁해 라는 의미가 되겠죠?

모듈시스템

자바스크립트에는 다양한 모듈시스템들이 존재하고 있습니다.
예를 들면 Node.js에서의 commonjs 프론트엔드쪽에서 자주 사용하는 esm 등이 있겠죠?
타입스크립트에서 이러한 모듈시스템을 지정해서 컴파일 해줄 수 있습니다.

//file1
export default function a(a, b) {
  return a + b;
}
====================================
//file2
import add from "./util";

const value = add(1, 2);
console.log(value);

위와같이 export된 함수 a를 다른파일에서 우리는 아래처럼 esm방식으로 import해서 사용할 수 있어요.
그렇다면 컴파일을 해본다면 어떻게 될까요? 일단 --target은 es2015로 지정이 되어있는 상태입니다.

"use strict";
exports.__esModule = true;
var util_1 = require("./util");
var value = util_1["default"](1, 2);
console.log(value);

export / import 가 require()로 변환된 것을 확인할 수 있는데 이는 es2015가 기본적인 모듈 시스템을 commonjs로 사용하고 있기 때문입니다.

또한 구버전의 node.js와 같은 경우에는 commonjs모듈시스템만 지원하기 때문에 es6로 컴파일하게 된다면 실행이 안될 수 있습니다.

이런 경우에는 tsc hello.ts --target es6 --modul commonjs 를 입력하면 되겠죠.

하지만 모든 옵션들을 명시해서 컴파일을 매번 진행해주는것은 너무나도 비효율적인 작업입니다.

tsconfig.js

프로젝트의 최상단폴더에 tsconfig.js파일을 위치시키면 작성한 설정에 의해 컴파일이 됩니다.

{
  "include":[
  	"src/**/*.ts"  
  ],
  "exclude":[
  	"node_modules"
  ],
  "compilerOptions":{
  	"module":"commonjs",
    "rootDir":"src",
    "outDir":"dist",
    "target":"es5",
    ”removeComments”: true,
    "sourceMap":true,
    "noImplicitAny": true,
  }
}

• include : src폴더안에 하위 모든 폴더의 .ts파일들을 컴파일 대상으로 하겠다는 의미입니다.
• exclude : node_modules는 제외하겠다는 의미입니다.
• compilerOptions에서는 컴파일시 적용할 옵션들을 지정할 수 있습니다.
• "sourceMap":true은 브라우저에서 ts원본파일을 확인할 수 있습니다.
• ”removeComments”: true,는 주석을 제거해 줍니다.
• ”noImplicitAny": true any설정을 주게되면 에러를 출력해줍니다.
  이밖에 lib이라는 옵션도 있는데 이것은 다음 게시글을 확인해주면 될것 같습니다.

tsconfig.json의 lib-norux

다음에는 타입스크립트에서의 변수선언과 기본타입들에 대하여 알아보도록 합시다~~