Zum Inhalt springen

TypeScript-Deklarationen generieren — Numio

Erzeugt aus TypeScript-Quelltext eine .d.ts-Deklarationsdatei, wie es tsc --declaration --emitDeclarationOnly tut. Funktionsrümpfe und Initialisierer werden entfernt, und private Klassenmember behalten nur ihren Namen.

Du willst vor dem Build des Pakets die öffentliche Typoberfläche sehen, die eine Bibliotheksdatei veröffentlichen wird.

TypeScript

TypeScript

Wann sie hilft

  • Du willst vor dem Build des Pakets die öffentliche Typoberfläche sehen, die eine Bibliotheksdatei veröffentlichen wird.
  • Du brauchst eine manuell gepflegte .d.ts für ein einzelnes Modul oder eine reine Deklarationseingabe für das Tool TypeScript to Flow.

Anwendung

  1. Füge ein TypeScript-Modul in das Panel TypeScript ein.
  2. Der Code wird mit gesetzten isTS und declarationOnly an /api/flow-to-typescript gesendet, und der TypeScript-Compiler erzeugt auf dem Server die Deklarationen.
  3. Kopiere die Deklarationen in eine .d.ts-Datei. Die Seite formatiert sie mit Prettier, daher verwenden sie zwei Leerzeichen Einrückung und keine Semikolons.

TypeScript

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;
  }
}

TypeScript-Deklarationen (.d.ts)

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
}

Details und Einschränkungen

Die Seite sendet deine Eingabe zur Konvertierung an eine Server-Route (/api/flow-to-typescript); sie wird nicht nur im Browser verarbeitet. Next.js-API-Routen akzeptieren standardmäßig Request-Bodys bis 1 MB.

Der Compiler lädt die ES2020- und DOM-Bibliotheksdateien von TypeScript, sodass Promise, Date, Map und aus eingebauten Methoden inferierte Rückgabetypen (number für subtotal im Beispiel) korrekt geschrieben werden.

Syntaxfehler brechen die Konvertierung ab, und statt einer Ausgabe wird die Compiler-Meldung angezeigt, zum Beispiel TS1134 "Variable declaration expected".

Jede Eingabe wird als einzelne Datei kompiliert; Imports aus anderen Modulen werden nicht aufgelöst.

FAQ

Werden async-Funktionen unterstützt?

Ja. Der inferierte Rückgabetyp wird in Promise eingeschlossen, sodass eine async-Funktion, die Todo[] zurückgibt, als export declare function loadTodos(url: string): Promise<Todo[]> deklariert wird.

Was passiert mit privaten Membern?

Sie bleiben nur mit ihrem Namen erhalten, zum Beispiel "private items;", sodass die Klassenstruktur passt, ohne den Typ offenzulegen.

Bleiben Standardwerte von Parametern erhalten?

Nein. Ein Parameter mit Standardwert wird optional, sodass constructor(public readonly currency = "USD") zu constructor(currency?: string) wird.

Spezifikationen und Referenzen