onebite-typescript/chapter2.ts at main · winterlood/onebite-typescript
배열은 자바스크립트의 배열과 크게 다르지 않으며 튜플은 타입스크립트에서만 특별히 제공되는 타입이다.
타입스크립트에서는 다음과 같이 배열 타입을 정의한다.
let numArr: number[] = [1, 2, 3]
배열을 저장하는 변수의 이름 뒤에 타입 주석의 시작을 의미하는 콜론(:)을 작성한 다음 배열 요소타입[]
형식으로 배열 타입을 정의한다.
만약 문자열을 담는 배열의 타입을 정의한다면 다음과 같이 하면 된다.
let strArr: string[] = ["hello", "im", "winterlood"];
배열 요소의 타입이 string이므로 이번에는 string[]
으로 문자열 배열 타입을 정의 했다.
Array<배열요소타입> 형태로도 배열의 타입을 정의할 수 있는데 이렇게 꺽쇠와 함께 타입을 작성하는 문법을 타입스크립트에서는 ‘제네릭’ 이라고 부른다.
let boolArr: Array<boolean> = [true, false, true];
만약 다음과 같이 다양한 타입의 배열 요소를 갖는 배열 타입을 정의해야 할 때에는 어떻게 할 수 있을까?
let multiArr = [1, "hello"];
이럴 때에는 다음과 같이 소괄호와 바(|) 를 이용해 배열 요소가 둘 중 하나의 타입에 해당하도록 타입을 정의하면 된다.
let multiArr: (number | string)[] = [1, "hello"];
이때 (…)[] 형식에서 소괄호는 앞서 배열 요소의 타입을 의미하고 소괄호 내부의 number | string은 배열 요소의 타입이 stirng이거나 number 일 것을 의미한다.
따라서 이렇게 정의한 배열 타입은 요소가 number 타입이거나 string 타입이어야 한다.
이렇듯 바(|)를 이용해 여러 타입중 하나를 만족하는 타입을 정의하는 문법을 유니온(Union) 타입 이라고 부른다.
다음과 같이 []를 연달아 작성해 다차원 배열 타입도 간단하게 정의할 수 있다.
let doubleArr : number[][] = [
[1, 2, 3],
[4, 5],
];
튜플은 자바스크립트에는 없는 타입스크립트의 특수한 타입으로 길이와 타입이 고정된 배열을 의믜한다.
튜플 타입을 이용하면 쉽게 고정된 길이를 갖는 배열 타입을 정의할 수 있다.
길이가 2로 고정된 2개의 number 타입 요소를 갖는 튜플(배열) 타입은 다음과 같이 정의한다.
let tup1: [number, number] = [1, 2];
또 다음과 같이 다양한 타입을 갖는 튜플 타입도 정의할 수 있다.
let tup2: [number, string, boolean] = [1, "2", true];
tsc를 이용해 튜플 타입이 정의된 타입스크립트 코드를 컴파일 해 보면 결국 튜플은 자바스크립트 배열로 변환되는 것을 확인할 수 있다.
튜플은 결국 배열이다. 그러므로 배열 메서드인 push나 pop을 이용해 고정된 길이를 무시하고 요소를 추가하거나 삭제할 수 있다.
따라서 튜플을 사용할 때에는 최대한 배열 메서드를 이용해 요소를 추가하거나 삭제하는 등의 연산을 할 때에는 각별히 주의하는 게 좋다.
다음과 같이 회원정보를 2차원 배열로 저장하는 상황을 가정해보자.
const users = [
["이정환", 1],
["이아무개", 2],
["김아무개", 3],
["박아무개", 4],
];
각 배열의 0번 인덱스에는 회원의 이름, 1번 인덱스에는 회원의 아이디를 저장해 두었는데 만약 눈치 없는 동료 중 한명이 다음과 같이 순서를 잘 못 배치해 요소를 추가할 경우 문제가 될 수 있다.
const users = [
["이정환", 1],
["이아무개", 2],
["김아무개", 3],
["박아무개", 4],
[5, "조아무개"], // <- 새로 추가함
];
자바스크립트에서는 이런 문제를 확인할 방법이 없다.
그러나 타입스크립트에서는 튜플을 사용하면 위와 같은 실수를 빨리 바로잡을 수 있다.