TypeScript : 배열과 튜플

배열

배열 타입 정의 방법

타입스크립트에서는 다음과 같이 배열 타입을 정의합니다.

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

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

만약 문자열을 담는 배열의 타입을 정의한다면 다음과 같이 하면 됩니다.

let strArr: string[] = ["hello", "im", "winterlood"];

배열 요소의 타입이 string이므로 이번에는 string[] 으로 문자열 배열 타입을 정의 했습니다.

또는 다음과 같은 형식으로도 배열의 타입을 정의할 수 있습니다.

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

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

 

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

만약 다음과 같이 다양한 타입의 배열 요소를 갖는 배열 타입을 정의해야 할 때에는 어떻게 할 수 있을까요?

let multiArr = [1, "hello"];

이럴 때에는 다음과 같이 소괄호와 바(|) 를 이용해 배열 요소가 둘 중 하나의 타입에 해당하도록 타입을 정의하면 됩니다.

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

이때 (…)[] 형식에서 소괄호는 앞서 배열 요소의 타입을 의미하고 소괄호 내부의 number | string은 배열 요소의 타입이 stirng이거나 number 일 것을 의미합니다.

따라서 이렇게 정의한 배열 타입은 요소가 number 타입이거나 string 타입이어야 합니다.

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

 

다차원 배열 타입 정의하기

다음과 같이 []를 연달아 작성해 다차원 배열 타입도 간단하게 정의할 수 있습니다.

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

 

튜플

• 튜플은 자바스크립트에는 없는 타입스크립트의 특수한 타입으로 길이와 타입이 고정된 배열을 의미합니다.
• 튜플 타입을 이용하면 쉽게 고정된 길이를 갖는 배열 타입을 정의할 수 있습니다.
• 길이가 2로 고정된 2개의 number 타입 요소를 갖는 튜플(배열) 타입은 다음과 같이 정의합니다.

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

또 다음과 같이 다양한 타입을 갖는 튜플 타입도 정의할 수 있습니다.

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

 

튜플은 결국 배열입니다.  

tsc를 이용해 튜플 타입이 정의된 타입스크립트 코드를 컴파일 해 보면 결국 튜플은 자바스크립트 배열로 변환되는 것을 확인할 수 있습니다. 튜플은 결국 배열입니다. 그러므로 배열 메서드인 push나 pop을 이용해 고정된 길이를 무시하고 요소를 추가하거나 삭제할 수 있습니다.

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

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

따라서 튜플을 사용할 때에는 최대한 배열 메서드를 이용해 요소를 추가하거나 삭제하는 등의 연산을 할 때에는 각별히 주의하는 게 좋습니다.

튜플을 왜 쓰는걸까?

다음과 같이 회원 정보를 2차원 배열로 저장하는 상황을 가정해 보겠습니다.

const users = [
  ["이정환", 1],
  ["이아무개", 2],
  ["김아무개", 3],
  ["박아무개", 4],
];

 

각 배열의 0번 인덱스에는 회원의 이름, 1번 인덱스에는 회원의 아이디를 저장해 두었는데 만약 눈치 없는 동료 중 한명이 다음과 같이 순서를 잘 못 배치해 요소를 추가할 경우 문제가 될 수 있습니다.

const users = [
  ["이정환", 1],
  ["이아무개", 2],
  ["김아무개", 3],
  ["박아무개", 4],
  [5, "조아무개"], // <- 새로 추가함
];

 

자바스크립트에서는 이런 문제를 확인할 방법이 없습니다. 그러나 타입스크립트에서는 튜플을 사용하면 위와 같은 실수를 빨리 바로잡을 수 있습니다.

const users: [string, number][] = [
  ["이정환", 1],
  ["이아무개", 2],
  ["김아무개", 3],
  ["박아무개", 4],
  [5, "조아무개"], // 오류 발생
];

 

 

출처 : 한 입 크기로 잘라먹는 타입스크립트(TypeScript)