[TypeScript] 타입스크립트 배열과 튜플 (배열과 튜플의 차이점)

1. 배열

// 배열
let numArr: number[] = [1, 2, 3];
let strArr: string[] = ['hello', 'im', 'dohyun'];
let boolArr: Array<boolean> = [true, false, true];

 

배열을 선언하기 위해서는 : 다음에 배열 안 원소의 타입을 적어주고 []을 붙여주면 된다.
이러한 방식말고, : 다음 Array<배열안 원소 타입>을 적어주는 Generic문법으로 작성하는 방법도 존재한다.

 

그렇다면 배열에 들어가는 요소들의 타입이 다양한 경우에는 어떻게 선언해야 할까?

//배열에 들어가는 요소들의 타입이 다양한 경우
let multiArr: (number | string)[] = [1, 'hello'];

 

union타입으로 선언할 수 있다. [1, 'hello']와 같이 string과 number가 들어가는 배열이 존재한다고 할 때, ( | )로 묶어서 선언을 한 후 [ ] 배열 표시를 붙여주게 되면 된다.

 

다차원의 배열의 경우는 어떻게 선언할까?

//다차원 배열의 타입을 정의하는 방법
let doubleArr: number[][] = [
  [1, 2, 3],
  [4, 5],
];

 

number타입 뒤에 배열표시를 2개 연달아 사용한 것을 볼 수 있다.

 

이중배열이면 그냥 2개겠네? 가 아닌, 첫 원소인 배열이 [ 1, 2, 3]으로 존재하는데 이를 표현하면 number []이다.
그렇다면 전체적인 배열 관점에서 보면 원소타입이 number []인 배열인 것이기에, (number [])[] => number [][]라고 생각하면 된다.

 

 

2. 튜플

튜플이란? JavaScript에는 존재하지 않는 타입으로 TypeScript에 존재하는 타입이다.

1. 튜플

 

튜플이란? JavaScript에는 존재하지 않는 타입으로 TypeScript에 존재하는 타입이다.
튜플은 길이와 타입이 고정된 배열이다.

 

배열의 경우 타입은 고정된 상태로 선언하지만, 배열에 원소를 추가하면 배열의 길이는 계속 늘어난다. 하지만 튜플은 길이와 타입 모두 고정된 배열이라고 볼 수 있다.

 

// 튜플
// 길이와 타입이 고정된 배열
let tup1: [number, number] = [1, 2];

tup1 = [1, 2, 3]; //오류 발생: 길이가 다르기 때문
tup1 = ['1', '2']; //오류 발생: 타입이 다르기 때문

 

튜플로 선언은 대괄호를 먼저 열어준 후, 각 원소의 타입을 개수만큼 지정해야 한다.
그렇게 선언된 튜플은 첫 선언에서 정해진 타입 또는 길이가 달라지게 된다면 오류를 출력하게 된다. 오직 number, number로 이루어진 배열만 선언할 수 있게 되는 것이다.

 

튜플 안에 원소의 타입이 다른 경우 각각 다르게 적어주면 된다.

let tup2: [number, string, boolean] = [1, '2', true];

 

 

 

2. 튜플과 배열의 차이점

 

Q. 튜플은 배열과 다른 것인가?

// index.ts

// 튜플
// 길이와 타입이 고정된 배열
let tup1: [number, number] = [1, 2];
let tup2: [number, string, boolean] = [1, '2', true];

//index.js

// 튜플
// 길이와 타입이 고정된 배열
let tup1 = [1, 2];
let tup2 = [1, '2', true];
export {};

 

A. 튜플은 사실 별도로 존재하는 자료형이라고 보기는 어렵고 배열이라고 보는 것이 맞다.
튜플을 tsc로 컴파일하여 js파일을 확인해 보면 결국 일반 배열과 똑같은 것을 확인할 수 있다.

 

 

Q. 튜플을 배열과 같은 취급을 한다면, 배열에서만 사용가능한 메서드들이 사용이 가능한가?

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

 

A. 튜플은 배열로 취급하기 때문에 위처럼 push로 값을 추가하는 것은 물론 pop메서드도 사용 가능하다.

그렇다면 위에서 길이와 타입이 고정된 배열이라고 했는데 push와 pop으로 어찌 길이를 바꿀까?
처음 선언한 길이보다 더 길어진 튜플 or 더 짧아진 튜플이 생기는 경우 TypeScript에서 걸러줘야 하지 않음?

JavaScript로 변환 시에는 배열과 같은 취급이기 때문에, 문제를 발생시킨다고 보기는 어렵기에, 오류가 발생하지 않는다.
그렇기 때문에 TypeScript에서 튜플에 Push(), Pop()과 같은 메서드들을 사용하게 된다면 주의를 기울여서 사용해야 한다. => 튜플에 Push(), Pop() 메서드 사용 비추천

 

 

Q. 배열과 특이하게 다른 것도 없고, 굳이 신경 쓰면서 튜플을 쓰긴 함?

const users = [
  ['김멈뭄', 1],
  ['김밈뭄', 2],
  ['김멈믐', 3],
  ['김밈믐', 4],
  ['김먕묭', 5],
  ['김명뮹', 6],
  [7,'조멈뭄'] // <- 이러한 경우를 방지 해야한다.
];

 

A. user정보를 담고 있는 2차원 배열이 존재한다고 할 때, 첫 원소에 이름 두 번째 원소에 id를 입력하고 싶다. 근데 7번 Id를 가진 경우 처럼, 배열을 사용할 때 인덱스별로 다른 값을 넣어야 하는데, 인덱스의 순서와 위치가 헷갈릴 수도 있다.

이러한 경우에 튜플을 사용해서 위와 같은 문제를 쉽게 해결할 수 있다.

 

const users: [string,number][]

 

튜플을 활용하여 타입을 지정하는 경우,

쉽게 인덱스의 순서와 위치가 다른 경우를 오류로 발견할 수 있다.

 

 

 

 

 

 

 

- 이 포스팅은 '이정환 - 한 입 크기로 잘라먹는 타입스크립트 (인프런)' 강의를 참고하여 작성되었습니다.

한 입 크기로 잘라먹는 타입스크립트(TypeScript) 강의 | 이정환 Winterlood - 인프런