[ TypeScript ] 배열과 튜플

배열

• 타입스크립트에는 배열을 만들 때 배열의 타입을 지정을 해줘야 한다.
• 배열의 타입을 지정하는 방법에 대해 알아보자.

1. " 배열 요소의 타입 [ ] " 형태

• 첫번째는 배열의 요소가 어떤 타입으로 되어 있는지 적어주고, 뒤에 [ ] 를 붙여 주면 된다. 예를 들어
  숫자로 된 배열이라면 number[ ], 문자로 된 배열이라면 string[ ] 과 같이 입력해 줘야 한다.

// 😀 숫자로 된 배열 타입
let numArr: number[] = [1, 2, 3]

// 😀 문자로 된 배열 타입
let strArr: string[] = ["A", "B", "C"];

2. " Array<배열요소타입> " 형태

• 두번째 방법은 꺽쇠와 함께 타입을 작성하는 ‘제네릭’문법을 이용하여 Array<배열요소타입> 형태로 배열의 타입을 지정하는 것이다.

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

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

• 배열 안에 숫자도 있고, 문자도 있고, boolean 타입도 있으면 |를 통해 여러 타입을 입력해 주면 된다.

let Arr: (number | string | boolean )[] = [1, "hello", true];

4. 다차원 배열의 타입

• 배열 안에 또 다른 배열이 있는 경우 [ ] 를 연속해서 사용하여 타입을 지정해 주면 된다.

// 😀 배열 안의 배열에 들어 있는 요소 들의 타입을 모두 입력해 주면 된다.
// 😀 요소들의 타입을 모두 입력해 주면 [ 'a', true ] 처럼 2개의 이상의 타입을 갖는 배열도 에러가 나지 않는다.
let Arr : (string | number | boolean )[][] = [
  ['a', 'b'],
  [1,2,3],
  ['a', true]
]

튜플

• 튜플은 자바스크립트에는 없는 타입스크립트의 특수한 타입으로 길이와 타입이 고정된 배열을 의미한다.
• 튜플은 그냥 [ ]를 열고, 그 안에 요소들의 타입을 입력해 주면 된다.
• 🔥 주의 할 점은 예를들어, [number, string, boolean] 이렇게 지정을 하면 순서 까지 정확하게 입력해줘야 오류가 나지 않는다. ['a', 1, true ] 라고 하면 number와 string의 순서가 달라서 오류가 난다.

// 😀 배열의 요소가 모두 number이고, 길이가 2인 배열을 지정한 것
let tup1: [number, number] = [1, 2];

// 😀 배열의 요소가 총 3가지 타입을 가지고, 길이가 3인 배열을 지정한 것
let tup2: [number, string, boolean] = [1, "hello", true];