개요
이번에는 타입스크립트의 배열과 튜플 타입에 대해 살펴봅니다. 배열은 자바스크립트의 배열과 크게 다르지 않으며 튜플은 타입스크립트에서만 특별히 제공되는 타입입니다.
실습 환경 설정
이전 시간에 만들어 둔 section2 패키지를 VsCode에서 열고 src 폴더 아래에 새로운 파일 chapter2.ts를 생성합니다. 이번 시간에 작성하는 모든 코드는 이 파일에 작성합니다.
코드를 불러오는 중 입니다 ...이때 tsconfig.json에 isolateModules 옵션이 true로 설정되어 있기 때문에 export 키워드를 하나 이상 사용해야 함을 주의합니다.
배열
타입스크립트에서 배열 타입을 정의하고 사용하는 방법에 대해 알아봅니다.
배열 타입 정의 방법
타입스크립트에서는 다음과 같이 배열 타입을 정의합니다.
코드를 불러오는 중 입니다 ...배열을 저장하는 변수의 이름 뒤에 타입 주석의 시작을 의미하는 콜론(:)을 작성한 다음
배열요소타입[] 형식으로 배열 타입을 정의합니다.만약 문자열을 담는 배열의 타입을 정의한다면 다음과 같이 하면 됩니다.
코드를 불러오는 중 입니다 ...배열 요소의 타입이 string이므로 이번에는
string[] 으로 문자열 배열 타입을 정의 했습니다.또는 다음과 같은 형식으로도 배열의 타입을 정의할 수 있습니다.
코드를 불러오는 중 입니다 ...Array<배열요소타입> 형태로도 배열의 타입을 정의할 수 있습니다. 참고로 이렇게 꺽쇠와 함께 타입을 작성하는 문법을 타입스크립트에서는 ‘제네릭’ 이라고 부릅니다. 제네릭에 대해서는 나중에 다룹니다.
배열의 타입을 정의하는 두 형식 모두 모양만 다를뿐 기능은 동일합니다. 따라서 앞으로는 특수한 상황이 아닐 경우 좀 더 타이핑 하기 쉬운 처음 다룬 방식으로 배열 타입을 정의하도록 하겠습니다.
다양한 타입 요소를 갖는 배열 타입 정의하기
만약 다음과 같이 다양한 타입의 배열 요소를 갖는 배열 타입을 정의해야 할 때에는 어떻게 할 수 있을까요?
코드를 불러오는 중 입니다 ...이럴 때에는 다음과 같이 소괄호와 바(|) 를 이용해 배열 요소가 둘 중 하나의 타입에 해당하도록 타입을 정의하면 됩니다.
코드를 불러오는 중 입니다 ...이때 (…)[] 형식에서 소괄호는 앞서 배열 요소의 타입을 의미하고 소괄호 내부의 number | string은 배열 요소의 타입이 stirng이거나 number 일 것을 의미합니다.
따라서 이렇게 정의한 배열 타입은 요소가 number 타입이거나 string 타입이어야 합니다.
이렇듯 바(|)를 이용해 여러 타입중 하나를 만족하는 타입을 정의하는 문법을 유니온(Union) 타입 이라고 부릅니다. 유니온 타입에 대해서는 나중에 자세히 다룹니다. 일단 지금은 바를 이용해 여러 타입 중 하나를 만족하는 경우 허용하는 이런 범용적인 타입을 만들 수 있다는 사실만 알아두면 됩니다.
다차원 배열 타입 정의하기
다음과 같이 []를 연달아 작성해 다차원 배열 타입도 간단하게 정의할 수 있습니다.
코드를 불러오는 중 입니다 ...튜플
다음으로 살펴볼 타입은 튜플 타입입니다.
튜플은 자바스크립트에는 없는 타입스크립트의 특수한 타입으로 길이와 타입이 고정된 배열을 의미합니다.
앞서 배열 타입을 정의하는 방법을 살펴보며 배열의 타입을 고정하는 방법은 살펴보았지만, 우리는 아직 배열의 길이까지 고정하는 방법은 모릅니다.
이번에 살펴볼 튜플 타입을 이용하면 쉽게 고정된 길이를 갖는 배열 타입을 정의할 수 있습니다.
길이가 2로 고정된 2개의 number 타입 요소를 갖는 튜플(배열) 타입은 다음과 같이 정의합니다.
코드를 불러오는 중 입니다 ...또 다음과 같이 다양한 타입을 갖는 튜플 타입도 정의할 수 있습니다.
코드를 불러오는 중 입니다 ...튜플은 결국 배열입니다.
tsc를 이용해 튜플 타입이 정의된 타입스크립트 코드를 컴파일 해 보면 결국 튜플은 자바스크립트 배열로 변환되는 것을 확인할 수 있습니다. 튜플은 결국 배열입니다. 그러므로 배열 메서드인 push나 pop을 이용해 고정된 길이를 무시하고 요소를 추가하거나 삭제할 수 있습니다.
코드를 불러오는 중 입니다 ...따라서 튜플을 사용할 때에는 최대한 배열 메서드를 이용해 요소를 추가하거나 삭제하는 등의 연산을 할 때에는 각별히 주의하는 게 좋습니다.
튜플을 왜 쓰는걸까?
다음과 같이 회원 정보를 2차원 배열로 저장하는 상황을 가정해 보겠습니다.
코드를 불러오는 중 입니다 ...각 배열의 0번 인덱스에는 회원의 이름, 1번 인덱스에는 회원의 아이디를 저장해 두었는데 만약 눈치 없는 동료 중 한명이 다음과 같이 순서를 잘 못 배치해 요소를 추가할 경우 문제가 될 수 있습니다.
코드를 불러오는 중 입니다 ...자바스크립트에서는 이런 문제를 확인할 방법이 없습니다. 그러나 타입스크립트에서는 튜플을 사용하면 위와 같은 실수를 빨리 바로잡을 수 있습니다.
코드를 불러오는 중 입니다 ...