[TS] Typescript 알아보기

타입스크립트(TypeScript)란?

타입스크립트는 자바스크립트의 확장된 언어로, 자바스크립트에 타입(Type)을 부여한 언어이다.
자바스크립트와는 다르게 브라우저에서 실행시 컴파일(compile)과정을 통해 한번 변환해 주어야 한다.

타입스크립트의 등장 배경

자바스크립트는 클라이언트측 언어로 도입되었지만, Node.js의 개발로 인해 서버측 기술로도 활용할 수 있게 되었다.

하지만, 자바스크립트의 코드가 커질수록 소스코드가 복잡해져 유지관리 및 재사용이 어려워졌고 Type 검사 및 컴파일시 오류검사의 기능을 수용하지 못해 본격적인 서버측 기술로 성공하기가 어려워 졌다.
이런 단점 보완을 위해 Typescript가 등장했다.

Type System 특징

• 개발환경에서 에러 발견을 도와준다.
• type annotations를 사용해서 코드 분석이 가능하다.
• 오직 개발 환경에서만 활성화 된다.
• 타입스크립트와 성능 향상과는 관계가 없다.

타입스크립트를 사용하는 이유

• 오픈소스이다.
• 자바스크립트 코드를 단순화하여 더 쉽게 읽고, 디버그를 쉽게 도와준다.
• 정적검사와 같은 JS IDE 및 사례를 위한 생산적인 개발 도구를 제공한다.
• 코드를 더 쉽게 읽고 이해할 수 있다.
• 일반 JS 코드 개선이 가능하다.
• ES6의 모든 이점과 더 많은 생산성을 제공한다.
• 코드 유형 검사를 통해 JS를 작성할 때 개발자가 겪는 버그를 줄일 수 있다.

typescript의 기본 타입

타입스크립트의 기본 타입은 크게 12가지가 있다.

• Boolean
• Number
• String
• Object
• Array
• Tuple
• Enum
• Any
• Void
• Null
• Undefined
• Never

let str: string = 'hi';

타입스크립트에서는 이렇게 : 를 이용하여 타입을 정의하는데, 이를 타입 표기(Type Annotation) 라고 한다.

기존 자바스크립트에서 쓰이던 타입들도 있는 반면 튜플, 이넘 등 다른 언어에서는 흔히 쓰이지만 자바스크립트에서는 볼 수 없었던 타입들도 등장한다.

---

Tuple

튜플은 배열의 길이가 고정되고, 각 요소의 타입이 지정되어 있는 배열 형식을 의미한다.

let arr: [string, boolean] = ['hello world', true]

Enum

이넘은 특정 값(상수)들의 집합을 의미한다. 기본적으로 값은 0부터 1씩 증가하도록 설정된다.

enum Color { Red = 0, Green = 1, Blue = 2 }
let c: Color = Color.green

또는 모든 값을 수동으로 직접 설정해줄 수도 있다.

enum Color { Red = 2, Green = 4, Blue = 8 }
let c: Color = Color.green

enum은 그 자체로 객체이기도 하다. 그래서 Object.keys 를 사용하면 key값이 배열에 담겨 나오기도 한다.
하지만 차이점도 존재한다.

object와 enum의 차이점

• object 는 코드내에서 새로운 속성을 자유롭게 추가가 가능하나 enum은 선언 이후 변경할 수 없다.
• object의 속성값은 JS의 모든 타입이 올 수 있지만, enum은 string 혹은 number 만 가능하다.

Any

any는 의미 그대로 모든 타입에 대해서 허용하는 타입이다. 모든 타입이 가능하기 때문에 별도의 타입 검사를 하지 않는다.

let str: any = 'hello world'
let num: any = 26
let arr: any = ['a', 'b', true, 22]

any 타입은 주로 모든 타입을 알지 못할 때 유용하게 쓰이며 기존 JS 코드에 타입스크립트를 점진적으로 적용시킬 때에도 유용하게 쓰인다.

let arr: any[] = [2, 4, true, false, 'jelly']

하지만 타입스크립트 자체가 타입을 정확하게 지정해 개발과정에서 오류를 줄이는 것이 목적이므로 any 타입을 남발하는 것은 당연히 좋지 않다.

Void

변수에는 undefined 와 null 만 할당하고 보통 함수에서 반환 값이 없을 때 반환 타입을 표현하기 위해 쓰인다. 어떤 타입도 존재할 수 없음을 나타내기 때문에 any 타입과 반대된다.

function addString(): void {
  console.log('addString')
}

Never

절대 발생할 수 없는 타입으로, 함수의 끝에 절대 도달하지 않는다는 의미를 지닌 타입이다.

function error(message: string): never {
  throw new Error(message)
}

function fail() {
  return error('something failed');
} // 반환 type은 error 로 추론

function infiniteLoop(): never {
  while(true) {
  }
} //never를 반환하는 함수는 함수의 마지막에 도달할 수 없음

---

tsc(typescript compiler)

tsc란 타입스크립트로 작성된 코드를 자바스크립트 코드로 변환해주는 컴파일러이다.

컴파일이란 소스 코드를 특정 플랫폼에서 실행 가능한 형태로 변환하는 과정을 의미하는데, 기존 자바스크립트는 별도의 컴파일 과정이 필요 없는 대표적 인터프리터 언어로 브라우저나 Node.js가 바로 이해하고 실행할 수 있었다.

하지만 타입스크립트의 코드는 브라우저에서 이해하고 실행할 수 없기 때문에 타입스크립트로 작성된 코드는 한번 컴파일해주는 과정이 필요하게 되었다.

설치

$ npm i -D typescript

// hello.ts

function add(a:number, b:number):number {
  return a + b
}

위 예제처럼 typescript 문법으로 작성된 add함수를 tsc로 컴파일하려면 터미널에 tsc 커맨드의 인자로 ts 파일명을 넘기면 된다.

tsc hello.ts

컴파일이 완료되면 해당 파일에 저장된 코드가 js로 변환되어 hello.js 파일이 새로 생기게 된다.

tsconfig.json

하지만 매번 tsc 명령어를 입력해서 컴파일하기엔 너무 불편하고 귀찮은 일이다. 그래서 명령어를 매번 입력하지 않고 컴파일 설정 파일(tsconfig.json)을 별도로 만들어 사용할 수 있다.

tsconfig.json 은 타입스크립트를 JS파일로 컴파일할 때의 설정을 한꺼번에 정리해놓는 파일이다.

{
	"compilerOptions": {
    	"target": "es6",
        "module": "commonjs",
   }
}

// 터미널에 입력시 자동 변환
$ tsc -w

프로젝트를 컴파일하는데 필요한 root 파일이나 컴파일 옵션 등 설정이 가능하고, 보통 루트폴더에 위치한다.