TypeScript 배열과 튜플

배열

배열 타입 정의 방법

배열타입 정의 방법 첫번째

let numArr: number[] = [1, 2, 3];

배열을 저장하는 변수의 이름 뒤에 타입 주석의 시작을 의미하는 콜론(:)을 작성한 다음 배열요소타입[] 형식으로 배열 타입을 정의한다.
만약 문자열을 담는 배열의 타입을 정의한다면

let strArr: string[] = ["hello",  "kim", "potato"];

위와 같이 정의하면 된다.

배열타입 정의 방법 두번째

다른 방법으로도 배열의 타입을 정의할 수 있다.

let boolArr: Array<boolean> = [true false, true];

Array<배열요소타입> 형태로도 배열의 타입을 정의할 수 있다.
이렇게 꺽쇠(<>)와 함께 타입을 작성하는 문법을 타입스크립트에서는 '제네릭'이라고 한다.

배열의 타입을 정의하는 두 형식 모두 생긴 모양만 다를뿐 기능은 동일하다.
따라서 앞으로는 특수한 상황이 아닐때에는 좀 더 타이핑하기 쉬운 첫번째 방법으로 배열 타입을 정의하도록 하자.

다양한 타입 요소를 갖는 배열 타입 정의하기

let multiArr = [1, "hello"];

위와 같은 다양한 타입의 배열 요소를 갖는 배열 타입을 정의해야 할 때에는 어떻게 해야할까?

let multiArr: (number | string)[] = [1, "hello"];

위와 같이 소괄호와 바(|)를 이용하여 배열의 요소가 둘 둥 하나의 타입에 해당하도록 타입을 정의하면 된다.
이때 (...)[] 형식에서 소괄호는 앞서 배열 요소의 타입을 의미하고 소괄호 내부의 number | string 은 배열 요소의 타입이 string 이거나 number일 것을 의미한다.

이렇듯 바를 이용해서 여러 타입 중 하나를 만족하는 타입을 정의하는 문법은 유니온(Union)타입 이라고 부른다.

다차원 배열 타입 정의하기

let doubleArr = [
    [1, 2, 3],
    [4, 5],
];

위와 같은 다차원 배열의 타입을 정의해야 할때에는 어떻게 해야할까?

let doubleArr: number[][] = [
    [1, 2, 3],
    [4, 5],
];

위와 같이 정의해주면 된다.
하나씩 살펴보면 [1, 2, 3]과 [4, 5]는 number[] 로 타입을 정의할 수 있다.
그리고 이것들은 한번 더 배열로 감싸져 있기때문에 number[][]로 타입을 정의해주면 도니다.

튜플

튜플은 자바스크립트에는 없는 타입스크립트의 특수한 타입으로 길이와 타입이 고정된 배열을 의미한다.
위에서 배열 타입을 정의하는 방법에서 배열의 타입을 고정하는 방법은 살펴보았지만 배열의 길이까지 고정하는 방법은 모른다.

이번에 살펴볼 튜플 타입을 이용하면 쉽게 고정된 길이를 갖는 배열 타입을 정의할 수 있다.

let tup1: [number, number] = [1, 2];

위와 같이 튜플 타입을 이용하면 길이가 2로 고정된 2개의 number 타입 요소를 갖는 튜플(배열)타입을 정의할 수 있다.

let tup2: [number, string, boolean] = [1, "hello", true];

위와 같이 다양한 타입을 갖는 튜플 타입도 정의할 수 잇다.

위와 같이 길이를 변경하거나 순서를 바꾸는 경우 에러메세지가 발생하게 된다.

튜플도 결국은 배열이다

터미널에 tsc 명령어를 이용하여 컴파일 후 생성된 자바스크립트 파일을 확인해보자

이렇듯 튜플도 자바스크립트 배열로 변환되는 것을 확인할 수 있다.
튜플도 결국 배열이기때문에 배열 메서드인 'push', 'pop'을 이용하여 고정된 길이를 무시하고 요소를 추가하거나 삭제할 수 있다.

let tup1: [number, number] = [1, 2];

tup1.push(1);
tup1.pop();

하지만 한가지 주의해야할 점이 있다.

배열의 길이가 2인 tup1에 배열의 길이를 벗어나서 pop메서드를 사용해줘도 어떠한 에러메세지가 발생하지않는다.
튜플은 배열이기 때문에 배열메서드를 사용할 수 있지만, 배열메서드는 튜플의 길이제한을 무시하기 때문에 에러메세지를 발생시키지 않는것이다.
따라서 튜플로 정의된 타입에 배열메서드를 이용하여 요소를 추가하거나 삭제하는 등의 연산을 할 때 최대한 주의하는게 좋다.

튜플은 왜 쓰는걸까?

const users = [
    ["김감자", 1],
    ["박감자", 2],
    ["이포테이토", 3],
    ["최감자싹", 4],
]

위와 같은 회원 정보를 2차원 배열로 저장하는 상황을 한번 가정해보자.

const users = [
    ["김감자", 1],
    ["박감자", 2],
    ["이포테이토", 3],
    ["최감자싹", 4],
    [5, "강감자"],
]

각 배열의 0번 인덱스에는 회원의 이름을, 1번 인덱스에는 회원의 아이디를 저장해두었는데 만약 눈치없는 사람이 위와 같이 순서를 잘 못 배치하여 요소를 추가할 경우 문제가 될 수 있다.

자바스크립트에서는 이런 문제를 확인할 방법이 없었지만 타입스크립트에서는 튜플을 사용하면 실수를 빨리 잡을 수 있다.

 

 

관련 강의 - 한입 크기로 잘라먹는 타입스크립트