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)

JS : 배열 삭제(Array remove)

작성 계기

 일반적인 모듈에서 많이 사용하는 것에 비해서 자주 잊어 먹기때문에 정리를 해두려는 목적으로 작성하였다. 물론 w3s에서 제공하는 영문 문서에 가장 자세하게 기록이 되어 있다.

배열 삭제 메서드

JS는 어떠한 객체든지 기본적인 메서드를 갖고 있다. 그 중 배열타입(자료형: type)에서 제공 되는 삭제는 많이 갖고 있다. 이러한 메서드들은 객체에 귀속되어 있기 때문에 사용할 때에는 객체 뒤에 닷(dot: ".")을 찍어 줘야 한다.

pop()

 스택 자료형에서 들어 본적이 있다면, 익숙한 단어이다. 당연 배열의 가장 뒤에서 부터 삭제를 하는 메서드이다. 이때 삭제되는 원소가 반환된다.

var arr = [1, 2, 3, 4];
var one = arr.pop();   // one === 4

shift()

 큐 자료형에서 들어본적 있을 법한 단어이다. pop()과는 순서상 반대로 배열의 앞에 있는 원소를 반환하면서 삭제한다.

var arr = [1, 2, 3, 4];
var one = arr.pop();    // one === 1

delete

 엄밀하게는 메서드라 할 수 없다. 때문에 사용법도 다르다. 게다가 이 방법으로 삭제된 배열의 원소는 공백(undefined)이 생긴다. 가능하면 쓰지 말자. pop()과 shift()와의 차이점은 배열의 원하는 위를 바로 삭제할 수 있다.

var arr = [1, 2, 3, 4];
delete arr[2];    // arr === [1, 2, undefined, 4]

splice(index, number)

 앞의 pop()과 shift()는 맨앞이나 맨뒤의 요소만 삭제가 가능하다. 하지만 이 메서드는 배열의 중간에 삭제할 수 있다. index배열의 index 번호이고, 뒤의 number는 삭제할 개수이다. 해당 메서드는 삭제외에 삽입의 기능으로 사용도 가능하다. number이후에 추가되는 객체들은 배열에 삽입이 된다. 배열에서 원하는 위치에서 배열의 원소를 삭제하고 싶을 경우 사용이 가능하기 때문에 보통 일반적인 클래스를 만들때 사용하면 매우 유용하다.

var arr = [1, 2, 3, 4];
arr.splice(1, 2);    // arr === [1, 4]

참고자료

w3s : http://www.w3schools.com/js/js_array_methods.asp