Typehole: 런타임 값으로부터 TypeScript 타입 및 인터페이스 자동 생성 도구

모든 직렬화 가능한(serializable) 런타임 값에 대한 TypeScript 타입과 인터페이스를 자동으로 생성합니다.

Typehole은 Visual Studio Code용 TypeScript 개발 도구로, Node.js 또는 브라우저 애플리케이션의 런타임 값을 코드 에디터로 연결하여 정적 타이핑(static typing) 생성을 자동화합니다. API 응답에 대한 타입이 필요하거나 JS 모듈에서 오는 값들의 타입을 파악하고 싶을 때 유용합니다.

Visual Studio Code 확장을 설치하기만 하면 됩니다. 추가적인 빌드 도구링이나 컴파일러 플러그인은 필요하지 않습니다.

1. 인터페이스가 필요한 any 또는 unknown 값을 찾습니다.

const response = await axios.get("https://reddit.com/r/typescript.json");
const data /* any */ = response.data;

2. 값 안에 typehole을 배치합니다. 표현식을 선택하고 ⌘ + . (macOS) 또는 ctrl + . (Windows)를 눌러 Quick Fix 메뉴를 열고 Add a typehole을 선택합니다.

type RedditResponse = any; // 확장 프로그램에 의해 삽입된 타입 플레이스홀더
const response = await axios.get("https://reddit.com/r/typescript.json");
const data: RedditResponse = typehole.t(response.data);

3. 브라우저 또는 Node.js에서 코드를 실행합니다. Typehole 런타임이 값을 포착하여 코드 에디터로 다시 전송합니다. VSCode 확장은 포착된 값을 기록하고, 해당 typehole의 모든 값들을 인터페이스(interface)로 변환하여 같은 모듈에 삽입합니다.

interface RedditResponse {
/* ✨ 실제 필드와 타입은 자동으로 생성됩니다 ✨ */
}
...

4. typehole을 제거하면 완료입니다. Typehole은 개발 시간 전용이므로 커밋해서는 안 됩니다. Typehole은 typehole을 쉽게 제거할 수 있는 2가지 명령어를 제공합니다.

interface RedditResponse {
/* ✨ 실제 필드와 타입은 자동으로 생성됩니다 ✨ */
}
...

이 플러그인은 아직 매우 실험적(experimental)이므로, 문제 발생 시 예상하고 보고해 주시기 바랍니다.

• 런타임 값으로부터 TypeScript 타입 생성하기
• 다양한 값으로 코드를 여러 번 실행하여 타입 증강시키기
  
  

모든 기본 타입(primitive values) 및 JSON 직렬화가 가능한 값들.

• Boolean
• Number
• String
• Array
• Object
• null

따라서 HTTP 요청 페이로드로 받을 수 있는 모든 값을 인터페이스로 변환할 수 있습니다.

1.4.0 버전부터는 Promise도 지원됩니다. 그 외의 값들(함수 등)은 any 타입으로 지정됩니다.

• 기본적으로 서버를 수동으로 시작하거나 중지할 필요가 없습니다. 첫 번째 typehole을 추가하면 자동으로 서버가 시작됩니다.

import typehole from "typehole";
// -> POST http://extension/samples {"id": "t", "sample": "value"}
typehole.t("value");
...

Typeholes는 typehole 호출의 메서드 이름으로 식별됩니다. .t2()를 호출하면 hole에 id가 "t2"가 부여됩니다. 이 ID 덕분에 확장 프로그램은 코드에서 값이 어디서 오는지 알 수 있습니다.

대부분의 경우, 모든 hole에 고유한 키(unique keys)를 사용하는 것이 좋습니다. 하지만 여러 hole에서 얻은 값들을 동일한 타입으로 기록하고 싶다면 같은 ID를 사용할 수도 있습니다.

간혹 확장 프로그램이 코드와 같은 호스트에서 실행되지 않을 수 있으며, 이때 런타임이 값을 전송할 주소를 구성해야 할 때가 있습니다. Docker 컨테이너 내부에서 실행되는 Node.js 애플리케이션이 그러한 경우 중 하나입니다. 하지만 대부분의 경우에는 아무것도 구성할 필요가 없습니다.

import typehole, { configure } from "typehole";
configure({
extensionHost: "http://host.docker.internal:17341",
... 

• 서버 포트가 17341로 하드 코딩되어 있어, Typehole 서버는 두 개의 VSCode 편집기에서 동시에 실행될 수 없습니다.

• 네이티브 NodeJS ESM 모듈 지원 추가 #24

• interface 대신 type 키워드를 사용할 수 있도록 새 옵션 "typehole.typeOrInterface" 추가. @akafaneh 님 덕분입니다 🎉

• 코드 포맷팅 생성 시 깨지거나 중복되는 코드를 수정

• null 값을 필드로 표시할 때 해당 필드를 선택적(optional)으로 처리하는 문제 수정.
  [{"foo": null}, {"foo": 2}]가 이제 type{foo: null | number}[]를 생성하며, 이전처럼 {foo?: number}[]를 생성하지 않습니다. #14 문제를 해결할 것입니다.

• 타입이 삽입된 파일에서 자동 포맷팅을 수정

• 확장 서버 포트와 런타임 호스트 주소 모두 구성할 수 있는 옵션 추가. #13 문제 해결

• 이제 동일한 ID를 가진 여러 개의 typehole이 존재할 수 있습니다. 이들 중 어느 곳에서 업데이트가 발생하든 연결된 모든 타입이 업데이트됩니다. 예를 들어, 여러 typehole을 사용하여 동일한 타입을 업데이트하고 싶을 때 유용합니다.

• 생성되는 최상위 타입이 ParenthesizedType일 때 더 이상 인터페이스가 중복되지 않습니다.

• typehole이 다른 파일에 있을 때 인터페이스가 업데이트되지 않던 문제 수정

• 에디터에서 다른 파일에 포커스가 있을 때 타입이 업데이트되지 않던 문제 수정
  typehole.tNaN의 경우, nont<number> 형식을 가진 typehole이 있었을 때 문제가 발생했습니다.

• Promise 추론 지원 👀

• 코드에 typehole이 있는 경우 시작 시 런타임도 함께 설치됩니다.

• 더 이상 중복된 AutoDiscoveredN 타입이 없습니다.

• 직렬화할 수 없는 진단(Unserializable diagnostic)은 이제 typehole당 한 번만 표시됩니다. 이전에는 툴팁에 동일한 경고가 여러 번 나타날 수 있었습니다.

• 모든 typehole이 제거되면 서버도 중지됩니다. 서버 재시작 기능도 이제 작동합니다.

• 샘플 수집(Sample collection). typehole에 여러 다른 값을 제공하면 생성된 타입이 그 값들을 기반으로 정제됩니다.

• 프로젝트 경로, 패키지 관리자, 런타임 자동 설치 여부에 대한 구성 옵션 추가

• 모든 생성되는 인터페이스 및 타입 별칭 이름에 자동으로 PascalCase 변환 적용

즐겨 사용하세요!