Saltar al contenido

Generar declaraciones de TypeScript — Numio

Emite un archivo de declaraciones .d.ts a partir de código TypeScript, como hace tsc --declaration --emitDeclarationOnly. Se eliminan los cuerpos de función y los inicializadores, y los miembros private de las clases conservan solo su nombre.

Quieres previsualizar la superficie de tipos pública que publicará un archivo de biblioteca antes de compilar el paquete.

TypeScript

TypeScript

Cuándo usarla

  • Quieres previsualizar la superficie de tipos pública que publicará un archivo de biblioteca antes de compilar el paquete.
  • Necesitas un .d.ts mantenido a mano para un único módulo, o una entrada solo de declaraciones para la herramienta TypeScript to Flow.

Cómo usarla

  1. Pega un módulo TypeScript en el panel TypeScript.
  2. El código se envía a /api/flow-to-typescript con isTS y declarationOnly activados, y el compilador de TypeScript emite las declaraciones en el servidor.
  3. Copia las declaraciones en un archivo .d.ts. La página las formatea con Prettier, así que usan sangría de dos espacios y no llevan punto y coma.

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

Declaraciones de TypeScript (.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
}

Detalles y limitaciones

La página envía tu entrada a una ruta del servidor (/api/flow-to-typescript) para convertirla; no se procesa solo en el navegador. Las rutas API de Next.js aceptan por defecto cuerpos de solicitud de hasta 1 MB.

El compilador carga los archivos de biblioteca ES2020 y DOM de TypeScript, así que Promise, Date, Map y los tipos de retorno inferidos de métodos integrados (number para subtotal en el ejemplo) se escriben correctamente.

Los errores de sintaxis detienen la conversión, y en lugar de la salida se muestra el mensaje del compilador, por ejemplo TS1134 "Variable declaration expected".

Cada entrada se compila como un solo archivo; no se resuelven los imports de otros módulos.

FAQ

¿Se admiten las funciones async?

Sí. El tipo de retorno inferido se envuelve en Promise, así que una función async que devuelve Todo[] se declara como export declare function loadTodos(url: string): Promise<Todo[]>.

¿Qué pasa con los miembros private?

Se conservan solo por nombre, por ejemplo "private items;", de modo que la forma de la clase sigue coincidiendo sin exponer el tipo.

¿Se conservan los valores por defecto de los parámetros?

No. Un parámetro con valor por defecto pasa a ser opcional, así que constructor(public readonly currency = "USD") pasa a constructor(currency?: string).

Especificaciones y referencias