TypeScript 선언 생성기 — Numio

이럴 때 사용하세요

• 패키지를 빌드하기 전에 라이브러리 파일이 공개할 타입 API를 미리 보고 싶을 때.
• 단일 모듈용으로 직접 관리하는 .d.ts나, TypeScript to Flow 도구에 넣을 선언 전용 입력이 필요할 때.

사용 방법

1. TypeScript 패널에 TypeScript 모듈을 붙여 넣습니다.
2. 코드는 isTS와 declarationOnly를 설정한 채 /api/flow-to-typescript로 전송되고, 서버에서 TypeScript 컴파일러가 선언을 생성합니다.
3. 선언을 .d.ts 파일에 복사합니다. 페이지가 Prettier로 포맷하므로 들여쓰기는 공백 두 칸이고 세미콜론은 없습니다.

export interface CartItem { sku: string; price: number; qty: number }
export const TAX_RATE = 0.08;

export function subtotal(items: CartItem[]) {
  return items.reduce((sum, i) => sum + i.price * i.qty, 0);
}

export class Cart {
  private items: CartItem[] = [];
  constructor(public readonly currency = "USD") {}
  add(item: CartItem) {
    this.items.push(item);
    return this;
  }
}

export interface CartItem {
  sku: string
  price: number
  qty: number
}
export declare const TAX_RATE = 0.08
export declare function subtotal(items: CartItem[]): number
export declare class Cart {
  readonly currency: string
  private items
  constructor(currency?: string)
  add(item: CartItem): this
}

세부 정보 및 제한 사항

입력은 변환을 위해 서버 라우트(/api/flow-to-typescript)로 전송되며, 브라우저에서만 처리되지 않습니다. Next.js API 라우트는 기본적으로 최대 1 MB의 요청 본문을 받습니다.

컴파일러가 TypeScript의 ES2020 및 DOM 라이브러리 파일을 불러오므로 Promise, Date, Map과 내장 메서드에서 추론된 반환 타입(예시의 subtotal은 number)도 올바르게 작성됩니다.

구문 오류가 있으면 변환이 중단되고, 출력 대신 컴파일러 메시지(예: TS1134 "Variable declaration expected")가 표시됩니다.

입력은 각각 하나의 파일로 컴파일되며, 다른 모듈에서의 import는 해석되지 않습니다.

FAQ

관련 도구

사양 및 참고 자료

• TypeScript Handbook: Declaration Files