typescript - Hur man korrekt delar API-typer från NestJs till Vue (eller någon frontend faktiskt) App
Jag har en Front End-app skriven i VueJs och Typescript.
Jag har också en server skriven i PHP som för närvarande konverteras till NestJs.
Allt ligger i samma Monorepo så jag har delade typer för DTOs.
Jag skulle verkligen uppskatta om det vore möjligt att skapa någon slags hjälpverktyg som förstår rutterna i Nest och skapar några Interfaces i Typescript för dem så att när jag gör en post/get till någon rutt, kommer det att ha Typescript-typer för denna rutt.
Är det möjligt? Funderar jag bara?
Tack på förhand
Svar #1
Kolla in detta dokument från NestJS: https://docs.nestjs.com/openapi/introduction.
Swagger-paketet från NestJS kan generera en OpenAPI-specifikation, vilket är en industristandard för att definiera API:er https://swagger.io/specification/ -- När du har en OpenAPI-fil kan du göra många coola saker med den.
Till exempel kan du generera Typescript-typer, generera hela backends, eller frontend-API-anropare ovanpå bibliotek som axios eller fetch som alla är starkt typade. Du kan till och med generera frontend-klienter för flera språk från en gemensam API-specifikation. Du kan göra detta med OpenAPI-generatorer (eller så kan du skriva dina egna ;)). https://openapi-generator.tech/docs/generators/typescript-fetch
Så för att sammanfatta, steg du kan ta är:
- Generera en OpenAPI-fil från dina NestJS-rutter (NestJS har ett paket för detta)
- När du har en OpenAPI-specifikation (som en JSON-fil), använd en OpenAPI-generator för att generera typer och till och med ett helt frontendmodul för att anropa ditt API.