TypeScript OpenAPI code generation (#24)

* add openapi typescript definitions (partly 3rd party) * add simple typescript generation script * fix deprecation warning * Update README.md * remove commented code blocks
kiesraad · Apr 26, 2024 · 482d3c2 · 482d3c2
1 parent bbc9a27
commit 482d3c2
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 9 deletions.
diff --git a/frontend/README.md b/frontend/README.md
@@ -82,3 +82,24 @@ The application uses the following dependencies:
 - `prettier`: Opinionated code formatter
 - `eslint`: Linter
 
+
+### Scripts
+
+#### gen_openapi_types
+
+Generate Typescript types from `/backend/openapi.json`. 
+
+```sh
+npm run gen:openapi
+```
+This results in `/frontend/lib/api/gen/openapi.ts`
+
+#### gen_icons
+
+Generate React components from icons located in `/frontend/lib/ui/svg`
+
+```sh
+npm run gen:icons
+```
+This results in `/frontend/lib/icon/gen.tsx`
+
diff --git a/frontend/lib/api/gen/openapi.ts b/frontend/lib/api/gen/openapi.ts
@@ -7,7 +7,7 @@ export interface POLLING_STATION_DATA_ENTRY_REQUEST_PARAMS {
   id: number;
   entry_number: number;
 }
-export type POLLING_STATION_DATA_ENTRY_REQUEST_PATH = `/api/polling_stations/${number}/data_entries/${number}`;
+export type POLLING_STATION_DATA_ENTRY_REQUEST_PATH = `/api/polling_stations/${number}/data_entries/${number};`;
 export type POLLING_STATION_DATA_ENTRY_REQUEST_BODY = DataEntryRequest;
 
 /** TYPES **/

diff --git a/frontend/scripts/gen_openapi_types.ts b/frontend/scripts/gen_openapi_types.ts
@@ -73,7 +73,7 @@ function addPath(path: string, v: PathsObject | undefined) {
       });
     }
     result.push("}");
-    result.push(`export type ${id}_REQUEST_PATH = \`${requestPath}\`;`);
+    result.push(`export type ${id}_REQUEST_PATH = \`${requestPath};\``);
 
     if (post.requestBody) {
       if ("$ref" in post.requestBody) {
@@ -89,8 +89,6 @@ function addPath(path: string, v: PathsObject | undefined) {
             );
           }
         }
-        // result.push(`export interface ${id}_REQUEST_BODY {`);
-        // result.push('}');
       }
     }
   }
@@ -120,10 +118,6 @@ function addDefinition(name: string, v: ReferenceObject | SchemaObject) {
   result.push("}");
 
   return result.join("\n");
-
-  // props.forEach(([k, v2]: [string, any]) => {
-  //   ar.push(`  ${k}${isRequired(k, v.required)}: ${tsType(v2.type)};`);
-  // });
 }
 
 function tsType(s: ReferenceObject | SchemaObject | undefined): string {
@@ -141,7 +135,7 @@ function tsType(s: ReferenceObject | SchemaObject | undefined): string {
     case "number":
       return "number";
     default:
-      //TODO: catch all types, any is not allowd
+      //TODO: catch all types, any is not allowed
       return "any";
   }
 }