Typescript 배열

* 조시 골드버그의 러닝 타입스크립트라는 책을 읽고 정리하면서 코드를 작성해본 내용입니다.

 

자바스크립트에서의 배열은 어떤값이라도 요소로 가질 수 있다. 그러나 이러한 경우는 흔치 않으며 대부분 하나 혹은 두개의 타입만 가지는 배열을 사용한다. 

타입스크립트에서는 초기 배열에 어떤 데이터 타입이 있는지 기억하고 배열이 해당 데이터 타입만 요소로 가질 수 있도록 제한한다. 명시적인 데이터타입을 선언하지않으면 초기값에서 코드의 의도를 이해하려고 시도한다.

 

1. 배열 타입

배열의 타입 애너테이션은 배열의 요소 타입 다음에 []가 와야 한다. Array<number> 같은 구문도 사용가능하다.

 

배열과 함수 타입

괄호를 사용하여 어느 부분이 함수타입이고 어느 부분이 배열타입인지 나타낼 수 있다.

괄호의 위치에 따라 완전히 다른 타입이 되기 때문에 주의해서 사용해야 한다.

 

유니언 타입 배열

배열에 여러 타입의 요소가 있을 수 있기 때문에 유니언 타입을 사용하여 배열의 타입을 선언할 수 있다.

위에서와 마찬가지로 괄호의 위치에 따라 타입이 달라지기 때문에 주의해서 사용해야한다.

 

any 배열의 진화

처음에 배열을 선언할 때 빈 배열을 할당하면 타입스크립트에서 any타입의 배열로 추론한다.

any 타입의 배열에는 아무런 값이나 할당해도 오류가 발생하지 않기 때문에 사실상 타입스크립트의 검사 기능을 사용할 수 없다. 따라서 any타입으로 선언되지 않도록 초기값을 할당하거나 타입을 선언해 주어야 한다.

 

다차원 배열

2차원 배열 타입은 두개의 대괄호로 선언한다.

3차원 배열은 대괄호 3개, 4차원배열은 4개, ... 로 선언한다.

 

 

2. 배열 맴버

주의사항 - 불안정한 맴버

타입스크립트의 타입 시스템은 기술적으로 불안정하다고 알려져 있다. 특히 배열은 타입 시스템에서 불안정한 소스이다.

타입스크립트는 검색된 배열의 맴버가 존재하는지 의도적으로 확인하지 않는다.

arr 배열에는 index 100인 요소가 존재하지 않지만, 타입스크립트는 없는요소의 length프로퍼티에 접근하는데도 오류가 발생하지 않는다.

 

 

3.  스프레드와 나머지 매개변수

스프레드 문법(Spread Syntax)

스프레드 문법을 사용해 배열을 결합할 때 입력된 배열 중 하나의 값이 합쳐지는 배열에 포함된다는 것을 유추한다.

서로 다른 타입의 배열이 결합되면 배열의 타입은 두 배열 타입의 유니언 타입이 된다.

 

나머지 매개변수(Rest parameter)

나머지 매개변수를 위한 인수로 사용되는 배열은 나머지 매개변수와 동일한 배열 타입을 가져야한다.

 

 

4. 튜플(Tuple)

튜플은 타입과 길이가 고정된 배열을 말한다.

각각의 요소의 타입을 지정해주기 때문에 유니언 타입보다 더 구체적인 타입 지정이 가능하다. 

튜플을 선언하는 구문은 배열 리터럴 선언과 유사하지만 값대신 타입을 작성한다.

튜플의 각 요소에 타입을 지정해놓으면 해당 타입 이외의 값은 할당이 불가능하다. 또한 지정된 길이만큼 할당해야 한다.

 

한번에 여러 값을 할당할 때 튜플과 구조 분해 할당을 사용한다.

 

튜플 할당 가능성

가변 길이의 배열 타입은 튜플 타입에 할당할 수 없다.

 

튜플은 구체적인 길이와 요소타입을 가지기 때문에 함수에 매개변수로 전달할 때 유용하다.

나머지 매개변수로서의 튜플을 전달하면 인수의 정확한 타입과 인수의 개수를 확인할 수 있다.

튜플로 인수를 전달하면 오류가 발생하지 않지만,

배열로 인수를 전달하면 각각의 인수의 타입을 확신할 수 없기 때문에 오류가 발생한다.

 

* 로그인 처리 같은것을 할 때 정해진 튜플을 받아서 반복적으로 처리할 수도 있다.

 

튜플 추론

배열이 변수의 초깃값 또는 함수의 반환값으로 사용되는 경우 튜플이 아니라 배열로 추론한다.

구체적인 튜플이 필요한 경우 2가지 방법으로 튜플 타입임을 나타낸다.

 

1. 명시적 튜플 타입

 타입 애너테이션을 사용하여 명시적으로 튜플 타입을 선언할 수 있다.

함수에서 반환값을 튜플로 지정해주면 반환값이 배열이어도 튜플로 간주된다.

 

2. const assertion

타입스크립트는 값 뒤에 넣을 수 있는 const assertion인 as const 연산자를 제공한다. 

(const assertion의 자세한 설명은 9장 참조)

 

배열 리터럴 뒤에 as const 연산자를 붙이면 배열이 튜플로 처리되어야 함을 나타낸다.

const assertion을 사용하면 배열이 튜플이 되는것을 넘어서 해당 튜플이 읽기 전용이고 수정이 불가능 하게 된다.

 

읽기 전용 튜플은 함수 반환에 편리하다. 튜플을 반환하는 함수로부터 반환된 값은 보통 즉시 구조화되지 않기 때문에 읽기 전용 튜플은 함수의 반환값으로 사용해도 문제가 없다.

 

 

Reference

- 조시 골드버그, 러닝 타입스크립트, 고승원 옮김, 2023