(TypeScript) - TypeScript 배열과 튜플

■ 배열

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

 

배열의 타입 정의하기 위해서는 배열의 요소 타입을 먼저 정해야 한다.

그리고 나서는 이 타입이 배열임을 알리기 위해 대괄호를 사용해서 작성해주면 배열 타입을 완성할 수 있다.

 

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

 

다음과 같이 Array 안에 배열 요소 타입을 넣어서 만드는 방법도 있다.

타입스크립트에서 꺽쇠를 열고 다른 타입을 집어넣는 문법을 제네릭 문법이라 한다.

 

주로 1번 방식으로 배열 타입 정의를 많이 한다.

 

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

 

배열에 들어가는 요소 타입이 다양할 경우 | (유니온)을 사용해서 string 과 number 둘 다 받는 배열임을 명시해준다.

 

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

 

 

■ 튜플

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

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

 

튜플은 길이와 타입이 고정된 배열로,

JavaScript에는 없고 TypeScript 에서만 제공되는 타입이다.

 

사실 별도의 자료형으로 보기 어려운게

tsc 컴파일 하면 JavaScript 를 보면 생성된 것은 바로 배열이다.

 

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

 

단, 튜플 변수에 배열 메소드를 사용할 때는 튜플의 길이 제한이 발동하지 않는다.

왜냐하면 어짜피 변환하면 JavaScript 에서는 배열로 변환되기 때문에 오류라고 인식하지 못하는 것이다.

따라서 튜플에 배열 메소드를 사용할 때는 각별한 주의가 필요하다.

 

그렇다면 이런 튜플은 어디서 사용할까?

const users = [
    ['이정환', 1],
    ['이아무개', 2],
    ['삼아무개', 3],
    ['박아무개', 4],
    ['5', '최아무개'],
];

 

아래와 같이 유저 정보를 이름과 번호 순서대로 적는 이차원 배열이 있는데,

실수로 5번처럼 적은 다음, 메서드(ex toUpperCase()) 를 적용하면 오류가 날 수 있다.

 

const users: [string, number][] = [
    ['이정환', 1],
    ['이아무개', 2],
    ['삼아무개', 3],
    ['박아무개', 4],
    ['5', '최아무개'],
];

 

즉, 튜플은 인덱스의 위치에 따라서 넣어야 할 값들이 정해져 있고,

그 순서를 지키는 게 중요할 때 튜플을 사용하면 오류를 바로 발견할 수 있다.