[TypeScript] 배열과 튜플

📌 배열과 튜플

배열

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

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

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

---

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

배열 요소의 타입이 string이므로 이번에는 string[]으로 문자열 배열 타입을 정의 해봤음

---

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

Array<배열요소타입>형태로도 배열의 타입을 정의할 수 있음.

이렇게 <>와 함께 타입을 작성하는 문법을 타입스크립트에서는 “제네릭”이라고 부름

---

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

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

let multiArr = [1, "hello"];

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

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

이렇듯 |를 이용해 여러 타입 중 하나를 만족하는 타입을 정의하는 문법을 “유니온 타입”이라고 부름

---

다차원 배열 타입 정의하기

다음과 같이 []을 연달아 작성해 다차원 배열 타입도 정의할 수 있음

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

let doubleArr2: (number | string)[][] = [
	[1, 2, 3],
	["hi", 4],
];

---

튜플

튜플은 자바스크립트에는 없는 타입스크립트의 특수한 타입으로 “길이”와 “타입”이 고정된 배열을 의미함.

길이가 2로 고정된 2개의 number타입 요소를 갖는 튜플 타입은 다음과 같이 정의함

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

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

---

튜플은 결국 배열임.

튜플은 결국 배열이므로 배열 매서드인 push나 pop을 이용해 고정된 길이를 무시하고 요소를 추가하거나 삭제할 수 있음

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

tup1.push(1);

따라서 튜플을 사용할 떄에는 최대한 배열 메서드를 이용해 요소를 추가하거나 삭제하는 등의 연산을 할 때에는 주의해야함.

---

튜플은 왜 씀?

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

const users: [string, number][] = [
  ["도서", 1],
  ["이도서", 2],
  ["김도서", 3],
  ["박도서", 4],
  // [5, "최도서"] -> string과 number의 위치가 틀림 -> 오류 발생
  // 순서를 지키는게 중요할 때 튜플을 사용해서 값을 잘못 넣는 것을 방지!
];

각 배열의 0번 인덱스에는 회원의 이름, 1번 인덱스에는 회원의 아이디를 저장해 두었는데,

동료 중 한명이 다음과 같이 순서를 잘 못 배치해 요소를 추가할 경우 문제가 될 수 있음.