타입스크립트의 재귀는 몇번까지 허용될까?

2025. 11. 10. 20:07·Develop/Frontend

필자는 정확히 배열의 개수를 정한 타입을 만들고 싶었다. 예를 들어 int direction[4] 처럼.

c++에서는 이를 크게 고민할 게 없다. 애초에 강타입 언어이기 때문이다.

enum Direction{
	Up = 0,
    Down,
	Left,
    Right
};

//최대 4개의 원소만 가질 수 있다. 이는 컴파일 타입에 잡아낸다.
int dir[4] = {Up, Down, Left, Right}; //통과
int wrongDir[4] = {Up, Up, Down, Left, Right}; // 실패

 

 

타입스크립트에서도 타입을 선언하여 이를 강제할 수 있다. 그러나 문제는 타입을 직접 만들어 정의해줘야한다는 점이다.

그래서 아래와 같으 코드를 작성하면, 매우 큰 비효율성이 발생한다.

type ArrayLength4<T> = [T, T, T, T]

let arr : ArrayLength4<number> = [1,2,3,4];

 

만약 Array의 길이가 3인 경우를 대응해야한다면? 5인 경우는? ... 이런 경우가 늘어나면 늘어날 수록 개발자는 매번 타입을 재정의해줘야한다. 재사용성과 확장성이 매우 떨어지는 타입을 작성했기 때문에 발생하는 문제다. 

 

그래서 아래와 같은 타입을 작성해봤다.

//내부 타입. 절대 직접 참조하여 사용하지 않도록 export 하지 않는다.
type _FixedLengthArray<T, N extends number, R extends T[] = []> =
 R['length'] extends N ? R : _FixedLengthArray<T, N, [...R, T]>;

export type FixedLengthArray<T, N extends number> = _FixedLengthArray<T, N>



let arr: FixedLengthArray<number, 4>

위의 타입을 차근 차근 설명하면 다음과 같다.

1. 자바스크립트의 객체타입(참조타입)인 array에 존재하는 length 프로퍼티의 값이 n과 같은지 비교한다. 

2. 같다면 그대로 해당 모양으로 타입 확정, 아니라면 재귀적으로 [T,....] 이런 식으로 타입을 하나 하나 넣어간다.

3. 결국 arr의 타입은 [number, number, number, number] 로 확정된다. 

 

참고로 _FixedLegnthArray에서는 3번째 템플릿 인자인 R은 반드시 있어야하는데, 사용자 입장에서 건드릴 수는 없어야한다. 따라서 내부 타입으로 선언하고 이를 래핑한 FixedLengthArray를 노출한다. 그 이유는 아래의 예시를 통해 설명할 수 있다.

let arr : _FixedLengthArray<number, 3, [1,2,3,4]> = [1, 2, 3,4];

일부러 _FixedLegnthArray 를 직접 사용해서 이상하게 타입을 정의해봤다. 

arr의 타입은 어떻게 추론될까? 

 

any로 추론된다. 이는 타입스크립트의 타입 시스템이 '어느정도' 재귀를 반복하다가 답이 없으면 any로 추론해버리기 때문이다.

무한 재귀를 방지한다는 뜻이다.

 

여기서 이런 의문이 들었다. 무한 재귀를 방지하기 위해, 몇번까지 재귀를 허용할까?

별로 중요하지 않은 지식일 수 있지만 그냥 궁금해서 일일히 테스트 해봤다. 결국 경계점을 찾아냈다.

let arr1: FixedLengthArray<number, 999>; 
let arr2: FixedLengthArray<number, 1000>;

정확히 999번까지 재귀를 진행해주고, 1000번부터는 무한루프라고 판단, any로 퉁쳐버린다.

 

나름 합리적이라고 생각한다. 사실 난 100회 정도로만 제한해버렸어도 나쁘진 않을 것 같은데 더 여유를 주어 무한 루프 여부를 판단한다는 느낌이 들었다. 그렇다면 1000개 이상의 원소를 가진 배열의 타입은 어떻게 정해야할까? 이는 사실 굳이 직접 타입을 만들 필요가 없다.

let arr : Array<number>

그 정도의 반복이면.. 어차피 하나의 타입을 가진 데이터일 가능성이 높으니 그냥 위와 같은 타입을 사용하면 되지 않나 싶다.

실제로 실무에서도 1000개가 넘는데 일일히 타입을 지정해주는 경우가.. 없지 않을까 예상한다.  

'Develop > Frontend' 카테고리의 다른 글

OAuth, 인증과 인가  (1) 2026.01.13
구글 태그 매니저, GTM의 원리  (0) 2025.09.26
history stack  (2) 2025.06.26
브라우저 캐싱과 헤더 필드  (0) 2025.06.23
Tanstack Query (React Query) 필수 지식  (0) 2025.05.11
'Develop/Frontend' 카테고리의 다른 글
  • OAuth, 인증과 인가
  • 구글 태그 매니저, GTM의 원리
  • history stack
  • 브라우저 캐싱과 헤더 필드
ocahs
ocahs
개발 내용을 담습니다.
  • ocahs
    ocahs 개발 블로그
    ocahs
  • 전체
    오늘
    어제
    • 분류 전체보기 (47)
      • Develop (47)
        • Frontend (25)
        • Javascript (7)
        • Algorithm (14)
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
  • 링크

  • 공지사항

  • 인기 글

  • 태그

    Promise
    번들러
    재귀타입
    promise reject
    JS
    vite
    비트 연산자 활용 예시
    line sweeping
    Working Set Model
    요청의 역사
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.3
ocahs
타입스크립트의 재귀는 몇번까지 허용될까?
상단으로

티스토리툴바