Typescript | 배열과 튜플

배열

 

배열 타입 정의 방법

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

• 변수이름: 배열타입[] 으로 배열 타입을 정의함

문자열을 담는 타입을 정의한다면

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

 

Array<타입> 형태로도 배열의 타입을 정의할 수 있다. TS 에서는 꺽쇠를 사용해 타입을 작성하는 문법을 제네릭 이라고한다. 

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

 

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

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

• 다양한 타입 요소를 갖는 배열 타입 정의이때 (…)[] 형식에서 소괄호는 앞서 배열 요소의 타입을 의미하고 
  소괄호 내부의 number | string은 배열 요소의 타입이 stirng이거나 number 일 것을 의미
• 이렇게 정의한 배열 타입은 요소가 number, string 타입이어야 한다.

다차원 배열 타입 정의

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

• []를 연달아 작성해 다차원 배열 타입도 간단하게 정의할 수 있다.

---

튜플

• 튜플은 JS 에 없는 TS의 특수한 타입으로 길이와 타입이 고정된 배열을 의미함

// 길이가 2로 고정된 2개의 number 타입 요소를 갖는 튜플 타입 선언 방법
let tup1: [number, number] = [1, 2];

// 다양한 타입을 같는 튜플 타입도 정의 가능
let tup2: [number, string, boolean] = [1, "hello", true];

 

튜플을 사용하는이유

// 만약 다음과 같이 회원정보를 2차원 배열로 만들어 저장하는 상황을 가정함
const users = [
  ["이정환", 1],
  ["이아무개", 2],
  ["김아무개", 3],
  ["박아무개", 4],
];

// 이런식으로 요소타입의 순서를 바꿔서 값을 넣게 되면 오류가 발생함
const users = [
  ["이정환", 1],
  ["이아무개", 2],
  ["김아무개", 3],
  ["박아무개", 4],
  [5, "조아무개"], // <- 새로 추가함
];

• 위 의 상황을 봤을 때 각 배열의 0번 인덱스에는 회원의 이름, 1번 인덱스는 회원의 아이디를 저장했다
• 마지막에 추가된 "조아무개" 는 인덱스 타입의 순서가 뒤바뀌어 오류를 발생시킴
• 튜플을 이용하면 이러한 문제를 바로잡을 수 있다