타입스크립트 삽질

1. 타입을 값으로 바꾸려는 삽질

상황

타입스크립트에서 타입을 값으로 바꿀 수 있을까. 이 생각은 FixedArray를 타스에서 구현하려고 한 것으로부터 시작된다.

아래 코드는 타입스크립트에서 FiexArray를 구현하려고 했던 코드이다. 

class FixedArray<T, N extends SIZE> {
  data: RangeObject<T, N>;

  constructor() {
    // 클래스 안에서 N(N으로 주어지는건 1, 2, 4.. 중에 하나인데)
    // 이것을 타입이 아니라 값으로 얻어오고싶음
// 생성자 인자로 넘기는 방법도 있겠지만, 템플릿 파라미터로도 가능한지 궁금
  }
}

type SIZE = 1 | 2 | 4 | 8 | 16 | 32;

type RangeObject<T, N extends SIZE> = {
  [K in keyof [...Array<N>]]: T;
};

C++의 템플릿 메타 프로그래밍처럼, 템플릿 파라미터에 정수를 주고, 그 정수를 이용하여 고정된 사이즈의 객체를 만들어 배열처럼 쓰려고 했던 것이다. 그런데 잘 되지는 않았다. 첫 번째로 타입스크립트에 대한 지식이 부족했고, 두 번째로 문제에 맞닥뜨렸을 때, 문제를 해결하기 위한 키워드를 제대로 뽑지 못했다.

 

타입스크립트에서 제네릭의 템플릿 파라미터로 넘긴 리터럴 타입을 값으로 다룰 수 있느냐를 해결하기 전에, 타입을 값으로 변경시킬 수 있는지를 확인해야 한다. 하지만, 이것은 불가능하다.

 

왜냐?

 

TypeScript is a statically typed superset of JavaScript, which means it primarily deals with types during compile-time, and it doesn't have the capability to convert types to values at runtime like template literals.

Template literals are a feature of JavaScript that allows you to embed expressions within strings, and these expressions are evaluated at runtime to produce a resulting string. For example:

 

하지만 찾아보니 템플릿 리터럴 타입을 밸류로 바꿀 방법이 없다. 타입스크립트의 타입 체킹은 컴파일 타임에서 이루어지는 것이고, 실제로 값은 자바스크립트의 런타임에 평가되기 때문이다. 즉, 타입스크립트가 할 수 있는 범위의 일이 아니다.

 

오직 enum만이 특수하게 Object.keys와 Object.values로 키와 밸류를 얻어낼 수 있다.

2. 타입 선언을 import 없이 포함하려는 삽질

타입스크립트의 타입 선언과 타입 포함을 보는 도중에 명시적인 import 없이 타입을 가져올 수 있다는 문서를 보고 따라 했으나 실패했다. 왜 안될까 고민하고 이런 옵션 저런 옵션 tsconfig에서 조절하여 시도. typeRoot, rootDir, path, base, include, files 등등 옵션을 건드려봤다.

 

왜 안될까 고민하다 타입스크립트 컴파일 대신 ts-node로 시도해봤다. 역시 안되지만, --files 옵션을 주니 제대로 에러 없이 성공했다.

ts-node --files ./index.ts

 

그렇다면 tsc와 ts-node --files는 어떤 차이가 있길래 그런것인가. ts-node에서 컴파일에 사용한 옵션을 보여주는 기능을 사용하여 어떤 tsconfig를 사용했는지 확인.

ts-node --showConfig --files ./index.ts

 

결국, 문제를 찾았다. 여태까지 내가 시도했던 컴파일 명령어는 "tsc ./index.ts". 따라서 index.ts 파일만 컴파일의 대상이 되고, 다른 ts파일은 컴파일 컨텍스트에 포함되지 않는 것이었다. 특정 파일이 아닌 프로젝트 전체를 컴파일하며 출력파일을 뽑아내니 잘되었다.

tsc --project tsconfig.json

하...