TypeScript 기초: 기본 타입(Basic Type)

TypeScript 기초: 기본 타입(Basic Type)

타입스크립트(TS: TypeScript)에서는 기본적으로 제공하는 타입이 존재 한다. 하지만, 항상 염두를 해야 하는 것이 최종적으로 빌드 되었을때는 자바스크립트(JS: JavaScript)가 됨을 잊지 말아야 한다.

기본 타입

JS에서 제공되는 기본 타입과 같은 타입

1. undefined

2. null

3. number

4. string

5. boolean

undefined 와 null은 JS에서 내부적으로 구분이 되기 때문에 역시 타입으로 정의가 가능하다. 주의해야 할 점은 이러한 기본타입은 변수 선언시 초기값이 주어질 경우 굳이 타입을 정의 하지 않아도 된다.

확장된 타입

TS에서 등장한 타입이다. 다만, 지금도 업데이트가 꾸준히 되고 있는 언어이기 때문에 필요에 따라서 새로운 타입이 추가될 가능성이 없는 건 아니다.

1. Tuple

2. enum

3. any

4. never

Tuple

JS에서는 기본적으로 제공되는 타입이 아니다. 대신 Array를 이용해서 간접적으로 구현을 타입스크립트에서는 이를 타입으로 만들어서 정형화를 시켜주는 것이다. 사용방법은 다음과 같다.

예시)

var foo: [string, number];
foo = [5, "hello"]    // error
foo = ["hello", 5]    // no error 

여기서 타입스크립트의 역할은 해당 변수의 튜플의 순서에 대한 문법검사를 해준다는 것을 알 수 있다. 이 문법은 자바스크립트에서는 에러가 나지 않는다는 점을 기억하자.

enum

컴파일러형 언어(C, C++, JAVA, C# 등)에 있는 enum과 동일한 역할을 한다. 선언된 키워드는 따로 정의 하지 않는다면, 선언된 순서대로 0부터 1씩 커진다. 만약 첫 번째 선언된 키워드에 숫자를 정의 하면, 이후 키워드는 강제로 선언된 키워드의 숫자에서 부터 1씩 커진다. 사용방법은 다음과 같다.

예시)

enum NUM{ one = 1, two, three };
var flag = NUM.two
switch(flag)
{
    // ...
    case NUM.two:    // execute this line
    // ...
    break;
    // ...
}

enum으로 호출된 값들은 실제 number형을 갖고 있다. 그리고 자바스크립트로 이러한 형태를 구현을 해주는 것을 타입스크립트의 컴파일러가 코드를 작성을 해준다. 어떻게 코드가 작성되는지 확인하고 싶다면, 타입스크립트 공식 홈페이지의 PlayGround에서 임으로 작성하여 확인을 해봐도 된다.

any

JS에서는 변수를 선언할때 모든 값을 참조하게 할 수 있다. 타입스크립트에서는 자바스크립트에서 내부적으로 갖고 있는 타입을 명시 해주면서 타입검사를 할 수 있다. 하자만, 웹 개발 환경의 경우 종종 어떤 타입이 오는지 알지 못하는 상태에서 개발을 해야 하는 경우가 있다. 이러한 유연성을 위해서 기존의 자바스크립트처럼 모든 타입을 받을 수 타입이다. 사용방법은 타입을 선언을 변수뒤에 ": any"를 작성하면 된다.

예시)

var foo: any;
foo = 5;
foo = "five";    // No Error

이러한 타입으로 자바스크립트와 타입스크립트를 비교하자면, 자바스크립트는 암묵적으로 any타입으로 선언이 되어 있고, 타입스크립트는 참조되는 값에 타입으로 자동선언이 되기 때문에 any타입을 명시 해줘야 자바스크립트와 똑같이 사용할 수 있다.

never

함수의 반환형에서 선언시 사용되는 타입이다. 최근(2016년 버전 2.0 업데이트)에서 논의 되어 추가 되었다. 비동기 방식으로 네트워크 작업이 많은 웹 개발환경에서는 콜백함수를 많이 활용한다. 또한 네트워크는 컴퓨터 또는 디바이스 바깥과 입출력을 하기 때문에 예외(에러) 처리가 필요로 하게 되는데, 타입스크립트에서 이렇게 반환할 수 없는 함수에서 사용하기 위한 서브타입으로 도입하였다.

예시1)

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

function fail()
{
    error("fail");
}

예시2)

function infinLoop(): never
{
    while(true){}
}

 그렇다면, 타입스크립트에 이미 있는 void 타입과 겹치게 되는데, 이러한 void 타입은 엄밀하게 따지면, 자바스크립트에서는 undefined를 반환을 하지만 never타입은 이 조차 반환 하지 않는다(할 수 없는 상황이다).

자세한 설명은 아래의 영문 블로그에서 확인을 할 수 있다.

블로그(영문) The never Type  링크

만약 지금 이해가 안된다 하더라도 걱정하지 말자. 해당 타입은 특별한 경우에만 사용하기 때문에 예시에 나온 경우에만 적용하면 된다.

참고자료

타입스크립트 공식 홈페이지의 핸드북(Basic Type)