[TypeScript] 배열과 튜플

본 내용은 이정환님의 "한 입 크기로 잘라먹는 타입스크립트" 강의 내용을 바탕으로 작성되었습니다.

 

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

let numArr: number[] = [1, 2, 3]
let strArr: string[] = ["hello", "hi", "nice", "to", "meet", "you"];

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

배열을 저장하는 변수의 이름 뒤에 타입 주석(타입 어노테이션)의 시작을 의미하는 콜론(:)을 작성한 뒤,

배열요소타입[] 형식으로 배열 타입을 정의합니다.

Array<배열요소타입> 형태로도 배열의 타입을 정의할 수 있는데 이렇게 꺽쇠와 함께 타입을 작성하는 문법을

타입스크립트에서는 "제네릭" 이라고 부릅니다.

 

 

다음과 같이 다양한 타입을 갖는 배열 타입을 정의해야할 때는 어떻게 해야할까요?

let multiArr = [1, "hello"];

이럴 때에는 아래와 같이 소괄호와 바(|)를 이용하여 타입을 정의할 수 있습니다.

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

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

 

 

다차원 배열은 아래와 같이 []를 연달아 작성하여 정의할 수 있습니다.

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

 

 

 

튜플(tuple):  튜플은 자바스크립트에는 없는 타입스크립트의 특수한 타입으로 길이와 타입이 고정된 배열을 의미합니다.

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


// 튜플이 정의된 타입스크립트 코드를 컴파일하면 자바스크립트 배열로 변환
let tup1 = [1, 2];
let tup2 = [1, "hello", true];

사실 튜플은 결국 배열입니다.

tsc를 이용해 튜플이 정의된 타입스크립트 코드를 컴파일 해보면 자바스크립트의 배열로 변환됩니다.

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

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

튜플은 결국 배열이므로 위와 같이 push, pop을 이용해 고정된 길이를 무시하고 요소를 추가, 삭제할 수 있습니다.

따라서 튜플을 사용할 때에는 배열 메소드를 이용해 요소를 추가, 삭제하는 등의 연산을 주의해야합니다.

 

그렇다면 튜플을 쓰는 이유는 무엇일까요?

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

위와 같이 0번 인덱스는 이름, 1번 인덱스는 회원 아이디를 저장해 두었는데

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

실수로 순서를 잘못 배치해 요소를 추가할 경우,

0번 인덱스에 toUpperCase와 같은 메소드를 사용하는 등과 같은 상황에 문제가 발생할 수 있습니다.

 

이와 같은 경우에 튜플을 사용할 경우

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

오류가 발생하여 실수를 빠르게 바로잡을 수 있습니다.

 

 

 

출처 : https://www.inflearn.com/course/%ED%95%9C%EC%9E%85-%ED%81%AC%EA%B8%B0-%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8