mirror of
https://github.com/ferdikoomen/openapi-typescript-codegen.git
synced 2025-12-08 20:16:21 +00:00
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="google" value="notranslate">
<meta http-equiv="Content-Language" content="en_EN">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" crossorigin="anonymous">
<title>Compared to other generators</title>
</head>
<body>
<div class="container">
<section class="page-header">
<h1>Compared to other generators</h1>
<p class="lead">
Depending on which swagger generator you use, you will see different output. For instance:
Different ways of generating models, services, level of quality, HTTP client, etc.
I've compiled a list below with the results per area and how they compare
against the <strong>openapi-typescript-codegen.</strong>
</p>
</section>
<h5>I've used the standard petshop examples from OpenAPI:</h5>
<ul>
<li><a href="https://petstore3.swagger.io/api/v3/openapi.json" target="_blank">https://petstore3.swagger.io/api/v3/openapi.json</a></li>
<li><a href="https://petstore.swagger.io/v2/swagger.json" target="_blank">https://petstore.swagger.io/v2/swagger.json</a></li>
</ul>
<hr/>
<h5>And used the following generators with their default options:</h5>
<ul>
<li>typescript-aurelia</li>
<li>typescript-angular</li>
<li>typescript-inversify</li>
<li>typescript-angular</li>
<li>typescript-fetch</li>
<li>typescript-jquery</li>
<li>typescript-node</li>
</ul>
<hr/>
<table class="table">
<thead>
<tr>
<th width="30%"></th>
<th width="10%">openapi-typescript-codegen</th>
<th width="10%">aurelia</th>
<th width="10%">inversify</th>
<th width="10%">angular</th>
<th width="10%">fetch</th>
<th width="10%">jquery</th>
<th width="10%">node</th>
</tr>
</thead>
<tbody>
<tr>
<th>Supports OpenApi v2 specification</th>
<td class="success" data-type="openapi-typescript-codegen">✅</td>
<td class="success" data-type="aurelia">✅</td>
<td class="success" data-type="inversify">✅</td>
<td class="success" data-type="angular">✅</td>
<td class="success" data-type="fetch">✅</td>
<td class="success" data-type="jquery">✅</td>
<td class="success" data-type="node">✅</td>
</tr>
<tr>
<th>Supports OpenApi v3 specification</th>
<td class="success" data-type="openapi-typescript-codegen">✅</td>
<td class="danger" data-type="aurelia">❌</td>
<td class="danger" data-type="inversify">❌</td>
<td class="success" data-type="angular">✅</td>
<td class="success" data-type="fetch">✅</td>
<td class="danger" data-type="jquery">❌</td>
<td class="danger" data-type="node">❌</td>
</tr>
<tr>
<th>Supports authentication</th>
<td class="success" data-type="openapi-typescript-codegen">✅</td>
<td class="danger" data-type="aurelia">❌</td>
<td class="success" data-type="inversify">✅</td>
<td class="success" data-type="angular">✅</td>
<td class="success" data-type="fetch">✅</td>
<td class="success" data-type="jquery">✅</td>
<td class="success" data-type="node">✅</td>
</tr>
<tr>
<th>Strongly typed models</th>
<td class="success" data-type="openapi-typescript-codegen">✅</td>
<td class="success" data-type="aurelia">✅</td>
<td class="success" data-type="inversify">✅</td>
<td class="success" data-type="angular">✅</td>
<td class="success" data-type="fetch">✅</td>
<td class="success" data-type="jquery">✅</td>
<td class="success" data-type="node">✅</td>
</tr>
<tr>
<th>Strongly typed enums</th>
<td class="success" data-type="openapi-typescript-codegen">✅</td>
<td class="success" data-type="aurelia">✅</td>
<td class="success" data-type="inversify">✅</td>
<td class="success" data-type="angular">✅</td>
<td class="success" data-type="fetch">✅</td>
<td class="success" data-type="jquery">✅</td>
<td class="success" data-type="node">✅</td>
</tr>
<tr>
<th>Models and services exported as individual files</th>
<td class="success" data-type="openapi-typescript-codegen">✅</td>
<td class="danger" data-type="aurelia">❌</td>
<td class="success" data-type="inversify">✅</td>
<td class="success" data-type="angular">✅</td>
<td class="danger" data-type="fetch">❌</td>
<td class="success" data-type="jquery">✅</td>
<td class="danger" data-type="node">❌</td>
</tr>
<tr>
<th>Index file that exports all services and models</th>
<td class="success" data-type="openapi-typescript-codegen">✅</td>
<td class="success" data-type="aurelia">✅</td>
<td class="danger" data-type="inversify">❌</td>
<td class="success" data-type="angular">✅</td>
<td class="success" data-type="fetch">✅</td>
<td class="success" data-type="jquery">✅</td>
<td class="danger" data-type="node">❌</td>
</tr>
<tr>
<th>Service returns typed result</th>
<td class="success" data-type="openapi-typescript-codegen">✅</td>
<td class="success" data-type="aurelia">✅</td>
<td class="success" data-type="inversify">✅</td>
<td class="success" data-type="angular">✅</td>
<td class="danger" data-type="fetch">❌</td>
<td class="success" data-type="jquery">✅</td>
<td class="success" data-type="node">✅</td>
</tr>
<tr>
<th>Service supports sending and receiving binary content</th>
<td class="success" data-type="openapi-typescript-codegen">✅</td>
<td class="success" data-type="aurelia">✅</td>
<td class="success" data-type="inversify">✅</td>
<td class="warning" data-type="angular">
<details>
<summary>⚠️</summary>
<p>V3 version sends data as <code>application/octet-stream</code> instead of <code>application/x-www-form-urlencoded</code></p>
</details>
</td>
<td class="warning" data-type="fetch">
<details>
<summary>⚠️</summary>
<p>V3 version sends data as <code>application/octet-stream</code> instead of <code>application/x-www-form-urlencoded</code></p>
</details>
</td>
<td class="success" data-type="jquery">✅</td>
<td class="success" data-type="node">✅</td>
</tr>
<tr>
<th>Models and services contain inline documentation</th>
<td class="success" data-type="openapi-typescript-codegen">✅</td>
<td class="success" data-type="aurelia">✅</td>
<td class="success" data-type="inversify">✅</td>
<td class="success" data-type="angular">✅</td>
<td class="success" data-type="fetch">✅</td>
<td class="success" data-type="jquery">✅</td>
<td class="success" data-type="node">✅</td>
</tr>
<tr>
<th>Framework agnostic</th>
<td class="success" data-type="openapi-typescript-codegen">✅</td>
<td class="danger" data-type="aurelia">❌</td>
<td class="danger" data-type="inversify">❌</td>
<td class="danger" data-type="angular">❌</td>
<td class="warning" data-type="node">
<details>
<summary>⚠️</summary>
<p>Requires portable-fetch</p>
</details>
</td>
<td class="danger" data-type="jquery">❌</td>
<td class="warning" data-type="node">
<details>
<summary>⚠️</summary>
<p>Requires bluebird</p>
</details>
</td>
</tr>
<tr>
<th>Compiles in strict mode without issues</th>
<td class="success" data-type="openapi-typescript-codegen">✅</td>
<td class="danger" data-type="aurelia">
<details>
<summary>❌</summary>
<p>Errors when compiling: <code>PetApi.ts:147:30 - error TS2345: Argument of type 'string | undefined' is not assignable to parameter of type 'string'</code></p>
</details>
</td>
<td class="danger" data-type="inversify">
<details>
<summary>❌</summary>
<p>Errors when compiling: <code>pet.service.ts:312:159 - error TS2304: Cannot find name 'body'</code></p>
</details>
</td>
<td class="danger" data-type="angular">
<details>
<summary>❌</summary>
<p>Errors when compiling: <code>pet.service.ts:528:26 - error TS1345: An expression of type 'void' cannot be tested for truthiness</code></p>
</details>
</td>
<td class="danger" data-type="fetch">
<details>
<summary>❌</summary>
<p>Errors when compiling: <code>api.ts:2276:67 - error TS2300: Duplicate identifier 'username'</code></p>
</details>
</td>
<td class="danger" data-type="jquery">
<details>
<summary>❌</summary>
<p>Errors when compiling: <code>PetApi.ts:25:12 - error TS2322: Type 'null' is not assignable to type 'JQueryAjaxSettings | undefined'</code></p>
</details>
</td>
<td class="danger" data-type="node">
<details>
<summary>❌</summary>
<p>Errors when compiling: <code>api.ts:1631:45 - error TS2694: Namespace '"http"' has no exported member 'ClientResponse'</code></p>
</details>
</td>
</tr>
<tr>
<th>Generated size (typescript)</th>
<td data-type="openapi-typescript-codegen"><span class="badge">30KB</span></td>
<td data-type="aurelia"><span class="badge">29KB</span></td>
<td data-type="inversify"><span class="badge">37KB</span></td>
<td data-type="angular"><span class="badge">63KB</span></td>
<td data-type="fetch"><span class="badge">85KB</span></td>
<td data-type="jquery"><span class="badge">57KB</span></td>
<td data-type="node"><span class="badge">65KB</span></td>
</tr>
<tr>
<th>Build size (javascript, not minimized)</th>
<td data-type="openapi-typescript-codegen"><span class="badge">17KB</span></td>
<td data-type="aurelia"><span class="badge">16KB</span></td>
<td data-type="inversify"><span class="badge">22KB</span></td>
<td data-type="angular"><span class="badge">36KB</span></td>
<td data-type="fetch"><span class="badge">48KB</span></td>
<td data-type="jquery"><span class="badge">37KB</span></td>
<td data-type="node"><span class="badge">53KB</span></td>
</tr>
<tr>
<th>Generation time</th>
<td data-type="openapi-typescript-codegen"><span class="badge">0.132s</span></td>
<td data-type="aurelia"><span class="badge">0.715s</span></td>
<td data-type="inversify"><span class="badge">0.788s</span></td>
<td data-type="angular"><span class="badge">1.386s</span></td>
<td data-type="fetch"><span class="badge">1.103s</span></td>
<td data-type="jquery"><span class="badge">0.728s</span></td>
<td data-type="node"><span class="badge">0.752s</span></td>
</tr>
</tbody>
</table>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" crossorigin="anonymous"></script>
</div>
</body>
</html>