openapi-typescript

openapi client generator for typescript

• Install
• Friendly function names
• Enum names
• Fetch connector example
• Angular connector example
• Advanced options

Install

npm install @cblx-br/openapi-typescript --save-dev

create an openapi-typescript.config.js

varconfig={url: "<url>/swagger.json",outputDir: "./src/client",};module.exports=config;

execute it:

npx openapi-typescript

Then create an implementation for your connector using the tool of your choice (fetch, jquery ajax, etc...).

exportclassMyAppConnectorimplementsOpenApiConnector{asyncrequest(method: string,path: string,parameters: any,body: any){
... implementation...}}

Use your connector with your client api service.

varmyApi=newMyApiClient(newMyAppConnector());letresult=awaitmyApi.get();

Examples: Fetch, Angular

Friendly function names

For friendly function names, set the desired name in the operantionId field of each path definition.

Enum names

This tool supports the 'x-enum-varnames' extension

Fetch connector example

import{OpenApiConnector}from"@cblx-br/openapi-typescript";classMyAppConnectorextendsOpenApiConnector{asyncrequest(method: string,path: string,parameters: any,body: any){varurl=newURL(location.origin+'/'+path);if(parameters){Object.keys(parameters).forEach(key=>{letvalue=parameters[key];if(value===null||value===undefined){value='';}url.searchParams.append(key,value);});}letresponse=awaitfetch(url.toString(),{headers: {'Accept': 'application/json','Content-Type': 'application/json'},method: method,body: body ? JSON.stringify(body) : undefined});if(response.status!=200){throwawaitresponse.json();}constcontentType=response.headers.get('content-type');if(contentType&&contentType.indexOf('application/json')==0){returnawaitresponse.json();}}}exportconstconnector=newMyConnector();

Angular connector example

create an app-connector.ts

import{Injectable,Inject}from'@angular/core';import{HttpClient}from'@angular/common/http';import{OpenApiConnector}from'@cblx-br/openapi-typescript';
@Injectable({providedIn: 'root'})exportclassMyAppConnectorimplementsOpenApiConnector{constructor(privatehttp: HttpClient){}asyncrequest(method: string,path: string,parameters: any,body: any){returnawaitthis.http.request(method,'/'+path,{body: body,params: parameters}).toPromise();}}

app.module.ts

@NgModule({declarations: [...],imports: [
...
HttpClientModule],providers: [{provide: OpenApiConnector,useClass: MyAppConnector}],bootstrap: [AppComponent]})exportclassAppModule{}

openapi-typescript.config.js

varconfig={url: "<url>/swagger.json",outputDir: "./src/client",hooks: {writingClient(client,context){client.importsSection.push(`import { Injectable } from '@angular/core';`);client.decoratorsSection.push(`@Injectable({ providedIn: 'root' })`);}}};module.exports=config;

Then inject your client api services wherever you need...

@Component(...)exportclassMyComponent{constructor(myApiClient: MyApiClient){
...
}}

Advanced options

The openapi-typescript.config.js supports some experimental options. These options can be found here:

https://github.com/cblx/openapi-typescript/blob/main/tool/config.ts