Ich verwende swagger-codegen mit der Option -l typescript-angular
, um eine Bibliothek von REST-Consumer-Services zu generieren. Der generierte Code sieht so aus ( DefaultApi.ts
):
Wie Sie sehen können, gibt es konkrete Klassen, die verwendet werden müssen, aber innerhalb eines Namespaces deklariert sind, d. h. nicht import
cable. Mein Editor (VSCode) beschwert sich nicht, wenn ich API.Client.DefaultApi
referenziere, obwohl import
fehlt, weil er die Definition als Teil eines deklarierten Namensraums annimmt, nehme ich an. Aber zur Laufzeit beschwert sich der Browser, dass API
nicht definiert ist.
Ich verwende Webpack, um meinen Code zu bündeln. Ich sehe ein paar andere Fragen zu SO, die irgendwie wie diese sind, aber hatten kein Glück mit den Antworten dort.
BEARBEITEN:
Wie gewünscht, hier sind meine Konfigurationsdateien für ts und webpack:
webpack Konfigurationsdatei:
%Vor%tsconfig.json:
%Vor%Sie haben zwei Möglichkeiten, dies zu beheben, eine Leichtigkeit und einen anderen Komplex:
Fügen Sie den folgenden Code am Ende des generierten Codes hinzu:
%Vor% Nun können Sie import
in Ihren Modulen ohne Probleme verwenden, zB:
Die Idee:
Teilen Sie den modularen Code und nicht den modularen Code mit verschiedenen tsconfig. Kombinieren Sie modularen Code und nicht modular mit Salsa, Webpack-Alias und JavaScript-Unterstützung.
Lernprogramm:
TL; DR Hier ein GitHub-Repository , das diese Lösung anwendet.
>
api.js
-Datei hinzu und referenzieren sie in Ihrer tsconfig.generate.json
. Ja, es ist eine js-Datei, hier kommt Salsa ins Spiel. Dazu müssen Sie allowJs
feature in tsconfig Diese Dateien sollen grundsätzlich über commonjs Ihren generierten Code exportieren, ohne ihn zu berühren.
%Vor% Beachten Sie jetzt in tsconfig.generate.json
und in Ihrer outFile
-Eigenschaft. Wenn Sie den Compiler ( tsc -p tsconfig.generate.json
) testen, sehen Sie alle Ihre generierten Dateien in module-generate-code.js
verkettet, und die letzte Zeile muss wie folgt aussehen:
module.exports = API.Client;
Fast fertig!
Jetzt können Sie module-generate-code.js
in Ihrem eigenen Code mit import
verwenden! Aber wie js Dateien nicht die besten Definitionen haben, dann haben Sie eine resolve.alias in webpack.config und tsconfig.json
Jetzt können Sie Ihren Generierungscode verwenden, ohne ihn zu berühren: import api from 'api';
Jeder Zweifel, hier ein GitHub Repo mit diesem Ansatz. Ich hoffe, ich habe geholfen
Tags und Links typescript webpack swagger-codegen