Invoer (.proto-schema)

Uitvoer (TypeScript)

Wat deze tool doet

Je hebt een Protocol Buffers-schema en een TypeScript-frontend die moet praten met een gRPC- of HTTP-getranscodeerde backend die die messages serveert. De officiële codegen-toolchain (protoc met ts-proto of protobuf-ts) vraagt dat je tools installeert, plugins configureert en een buildstap inhaakt. Deze converter doet hetzelfde werk in je browser — plakken, output kopiëren, in je project gooien.

De type-mapping volgt hoe handgeschreven types er in echte codebases uitzien: string/bytes → string/Uint8Array, bool → boolean, de kleinere numerieke types (int32, uint32, float, double) → number, en de 64-bits integer-types (int64, uint64, fixed64, sfixed64, sint64) → string om aan te sluiten op de proto3 JSON-mapping-spec. repeated T wordt T[], map<K, V> wordt Record<K, V>, geneste messages worden geneste interface-declaraties.

Veldnamen worden omgezet van snake_case (Protobuf-conventie) naar camelCase (JavaScript/TypeScript-conventie) — dat sluit aan op het standaardgedrag van de proto3 JSON-encoder. Enums worden string-literal union-types (type OrderStatus = 'ORDER_STATUS_UNSPECIFIED' | 'ORDER_STATUS_PENDING' | ...), wat de meeste TypeScript-codebases echt willen — geen runtime-overhead van een enum nodig. De converter draait volledig in je browser; niets van je schema verlaat de pagina.

Hoe je het gebruikt

Drie stappen. De output is binnen seconden klaar om in een <code>.ts</code>-bestand te plakken.

Plak je .proto-schema

Gooi het schema in de linker editor. syntax = "proto3"; bovenaan is prima maar optioneel. De parser snapt geneste message-blokken, enum-declaraties, oneof, map<K, V> en veldopties. Imports worden herkend maar overgeslagen — plak geïmporteerde types inline als je ze nodig hebt.

Veldnaamconversie gaat automatisch: order_id in .proto wordt orderId in TypeScript. Message- en enum-namen blijven zoals ze zijn (al PascalCase).

Lees de output

Rechts: TypeScript met export interface voor elke message en export type met een string-literal union voor elke enum. Geneste types staan vóór hun parent, zodat het bestand in declaratievolgorde staat. Voeg het bestand aan je project toe en importeer de interfaces vanuit je gRPC-client of fetch-handler.

Gebruik de types

Knoop de interfaces aan je fetch- / gRPC-Web- / Connect-RPC-client. De vorm matcht de proto3 JSON-codering, dus JSON-responses worden direct in de getypte vorm geparsed zonder handmatige conversie. Pas int64-afhandeling aan als je server een niet-standaard JSON-codering gebruikt.

Wanneer dit echt tijd bespaart

Types schetsen voor een nieuwe gRPC-frontend

Je bouwt een nieuwe TS-app bovenop een bestaande gRPC-service. Je hebt nog geen volledige codegen nodig — alleen de interface-vormen om je fetch-calls te typeren. Plak het .proto, gooi de output in types.ts, je bent getypeerd.

Een Protobuf-API-wijziging reviewen

Een backend-collega heeft velden aan een message toegevoegd. Je wilt zien hoe dat de frontend-types raakt zonder de build te draaien. Plak de nieuwe .proto, diff de TypeScript-output tegen je huidige types, laat een gerichte review-comment achter.

Gegenereerde types tegen het licht houden

Je build gebruikt protobuf-ts of ts-proto, die types met hun eigen conventies produceren. Plak hier het schema voor een schone referentie van hoe simpele TS-interfaces eruit zien — handig voor documentatie of migratieplanning.

Wegwerp-scripts en eenmalige integraties

Je schrijft een snel Node-script dat JSON POSTet naar een gRPC-gateway. De volledige Protobuf-toolchain opzetten voor 30 regels is overdreven. Pak de interfaces hier en je hebt typeveiligheid zonder ceremonie.

Veelgestelde vragen

Wordt mijn schema ergens naartoe gestuurd?

Nee. De parser en TS-emitter draaien volledig in je browser als JavaScript. Open de DevTools en kijk naar het Network-tabblad terwijl je plakt — nul requests. Handig als je schema interne typenamen, package-paden of iets bevat dat je niet naar een externe service wilt sturen.

Waarom zijn int64-velden als string getypeerd?

JavaScript Numbers zijn IEEE-754-doubles, die boven 2^53 precisie verliezen. De officiële proto3 JSON-mapping vereist dat int64, uint64, fixed64, sfixed64 en sint64 als JSON-strings worden gecodeerd. Daarom gebruikt de TS-interface daar string — het matcht wat je server daadwerkelijk verstuurt. Heb je liever bigint, doe dan een find-replace in de output.

Waarom zijn enums string-unions in plaats van TS-enums?

De meeste TypeScript-projecten geven tegenwoordig de voorkeur aan string-literal unions boven TS-enums — geen runtime-kosten, beter tree-shaking, en ze matchen de proto3 JSON-codering (die enums als hun stringnaam serialiseert). Wil je een const enum of numerieke enum, dan is conversie vanuit de union mechanisch.

Hoe gaat hij om met map<K, V>?

Wordt gerenderd als Record<K, V>. Protobuf-maps met niet-string sleutels (bijv. map<int32, string>) worden Record<number, string>. JSON kent alleen stringsleutels, dus runtime worden de sleutels strings ook al zegt het proto int — dat is een eigenaardigheid van de proto3 JSON-spec, niet van de converter.

Worden velden als optioneel gemarkeerd?

Nee. proto3-velden zijn altijd aanwezig in JSON-output (met defaults — lege string, 0, false, [], {}), dus de TypeScript-interface markeert elk veld als verplicht. Wil je echt optionele velden (omdat je runtime ze kan weglaten), zet dan handmatig een ? achter elke veldnaam.

Werkt het met oneof?

Elk veld in een oneof wordt als gewoon interface-veld uitgevoerd. De output dwingt de "precies één"-regel die oneof impliceert niet af — daarvoor zou je een gediscrimineerde union nodig hebben, en die hangt af van de semantiek van je runtime. Bewerk de output met de hand als je strakkere types nodig hebt.

Gerelateerde tools

Als je met Protobuf, JSON en TypeScript werkt, passen deze er goed bij:

Protobuf naar TypeScript Converter