[TypeScript] 타입스크립트 배열과 튜플

타입스크립트에서 배열 타입과 튜플 타입을 시용해보자!!

---

🍉 배열 타입 정의하기

배열을 저장하는 변수의 이름 뒤에  배열요소타입[ ] 형식 또는 Array<배열요소타입> 형식으로 배열 타입을 정의한다.

(꺽쇠와 함께 타입을 작성하는 문법을 타입스크립트에서 '제네릭' 이라고 부른다.) <- 나중에 배울 예정!

let numArr:number[] = [1,2,3];
let strArr:string[] = ['hello','welcome'];
let boolArr: Array<boolean> = [true, false, true];

 

⚡️ 배열에 들어가는 요소들의 타입이 다를 경우에는 어떻게 할까?

let multiArr = [1, 'hello'];

💡 TIP 💡

변수 multiArr을 선언한 후 타입을 어떻게 선언해야 할 지 모르겠을 때는 마우스 커서를 변수명에 대보면 된다.

• 소괄호는 배열 요소의 타입을 의미
• 내부의 string | number -> 배열 요소의 타입이 string이거나 number일 것을 의미

이처럼 바(|)를 이용해 여러 타입 중 하나를 만족하는 타입을 정의하는 문법을 유니온(Union) 타입이라고 부른다.

 

---

🐾 다차원 배열 타입 정의하기

[ ]를 연달아 작성해 다차원 배열 타입을 정의한다.

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

let doubleStr:string[][]= [
    ['hello', 'welcome'],
    ['im', 'princess']
]

 

---

🍉 튜플 타입 정의하기

튜플이란?

자바스크립트에는 없는 타입스크립트의 특수한 타입
길이와 타입이 고정된 배열

튜플 타입을 이용하면 고정된 길이를 갖는 배열 타입을 정의할 수 있다.

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

• [] 안에 요소의 타입을 정의한다.
• 길이가 다르거나 정의한 타입과 다른 타입의 요소가 들어오는 경우 오류가 발생한다.

 

튜플은 결국 배열이다.

tsc로 컴파일된 코드를 보면 튜플은 자바스크립트 배열로 변환된다. 그러므로 튜플은 결국 배열이다.

따라서 배열 메소드인 push나 pop을 이용해 고정된 길이를 무시하고 요소를 추가하거나 삭제할 수 있다.

tup1.push(2);
console.log(tup1); // [1,2,2]

따라서 배열 메소드를 이용해 요소를 추가하거나 삭제하는 등의 연산을 할 때에는 주의해야한다!

 

⚡️ 그렇다면 튜플을 왜 쓰는 걸까?

회원 정보를 2차원 배열로 저장한다고 가정해보자.

const users:[string, number][]= [
    ["김기지", 1],
    ["이아무개", 2],
    ["김아무개", 3],
    ["박아무개", 4],
  ];

위에는 각 배열의 0번 인덱스에는 회원 이름, 1번 인덱스에는 회원의 아이디를 저장한다. 여기서 다른 동료 한 명이 순서를 잘 못 배치해 요소를 추가할 경우 문제가 발생한다.

자바스크립트 배열에서는 이런 문제를 확인하기 어렵지만 타입스크립트의 튜플을 사용하면 값을 잘 못 넣지 않도록 방지할 수 있다.

 

---

🔗 타입스크립트 강의

한 입 크기로 잘라먹는 타입스크립트 - 인프런 | 강의