타입스크립트의 배열과 튜플

배열과 튜플

이번에 배운 것은 "배열과 튜플"이다. 타입스크립트 뿐 아니라, 언어를 배우면 꼭 알아가는 것이 배열이다.

일단 코드는 다음과 같다. 참고하자.

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

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

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

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

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

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

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

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

---

코드는 심플하다. 우리 기존의 원시타입 number나 string 같은 코드에 배열을 할당해 주면 된다.

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

이런 식으로, 변수를 선언. number [] = [1, 2, 3] 

이렇게 선언하면 숫자가 들어간 배열을 만들 수 있다.

---

제네릭 문법

나중에 말할 것이지만, 제네릭 문법이라는 것이 있다.

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

이런 식으로 <> 태그 안에 타입을 넣는 것을 제네릭 문법이라고 한다.

---

배열에 들어가는 요소들의 타입이 다양할 경우.

코드는 다음과 같다.

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

이런 식으로 | (or 연산자) 명령어를 작성해 주면 된다. 

---

다차원 배열의 타입을 정의하는 방법

코드는 다음과 같다.

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

2차원이라면 [][] / 3차원이면 [][][] 이런 식으로 작성해 주면 된다. 굉장히 쉽다.

튜플

튜플이란 길이와 타입이 고정된 배열이다. 코드는 다음과 같다. (튜플은 타입스크립트에서만 지원해 준다. 자바스크립트에서는 지원하지 않는다.)

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

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

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

코드는 위와 같다. 잘 보면 users 코드 안에 주석처리된 코드가 있는데, 주석을 해제하면 에러가 뜬다. 왜냐하면 string을 먼저 오도록 코드를 작성해 두었기 때문이다.

---