Top 10 OpenAPI TypeScript Solutions: Master Your API Development

Jennie Lee
4 min readMar 29, 2024

Looking for a Postman alternative?

Try APIDog, the Most Customizable Postman Alternative, where you can connect to thousands of APIs right now!

Introduction

Generating JSON schema files from an OpenAPI specification for use in a TypeScript application can be a challenging task. While there are libraries available that can infer TypeScript types from JSON schemas, there is a lack of clear ways to generate TypeScript JSON schemas directly from an OpenAPI definition. This article aims to explore the problem at hand and introduce a solution to master your API development using openapi-ts-json-schema.

Understanding the Problem

When it comes to generating TypeScript JSON schemas from an OpenAPI definition, there are several challenges that developers face. Existing tools and libraries often have limitations in terms of resolving external or remote $ref definitions, converting OpenAPI specifications to JSON schema format, and generating TypeScript JSON schema files.

The inability to resolve external $ref definitions can limit the usefulness of generated TypeScript JSON schemas. These external references often contain important schema definitions that are crucial for accurately representing the API data models. Additionally, converting the OpenAPI specification to JSON schema format while preserving the semantic meaning of the specification can be a complex process.

Furthermore, the lack of clear ways to generate TypeScript JSON schema files from an OpenAPI definition means that developers often have to rely on manual processes or ad-hoc solutions to achieve their desired results.

To address these challenges, a solution is needed that can effectively resolve external/remote $ref definitions, convert OpenAPI specifications to JSON schema format, and generate TypeScript JSON schema files that accurately represent the API data models.

Introducing openapi-ts-json-schema

One such solution is openapi-ts-json-schema, a tool developed specifically for generating TypeScript JSON schemas from an OpenAPI definition. This tool addresses the challenges faced by developers and provides a seamless process for generating TypeScript JSON schemas.

The primary purpose of openapi-ts-json-schema is to resolve external/remote $ref definitions and dereference them to construct a complete JSON schema representation. This ensures that all necessary schema definitions are included in the generated TypeScript JSON schema files.

Additionally, openapi-ts-json-schema converts the OpenAPI specification to JSON schema format while preserving the semantics of the original specification. This ensures that the generated TypeScript JSON schemas accurately reflect the API data models and their relationships.

Once the OpenAPI specification is converted to JSON schema format, openapi-ts-json-schema generates individual TypeScript JSON schema files for each definition present in the specification. These files are organized in a folder structure that mirrors the structure of the original OpenAPI definition, making it easy to navigate and understand the generated schemas.

Steps to Generate TypeScript JSON Schemas

To generate TypeScript JSON schemas using openapi-ts-json-schema, follow these steps:

  1. Install openapi-ts-json-schema: First, you need to install openapi-ts-json-schema as a development dependency in your TypeScript project. Open your terminal and run the following command:
  • npm install --save-dev openapi-ts-json-schema
  1. Import the OpenAPI Specification: In your TypeScript project, create a new file to import the OpenAPI specification from a file or a URL. In the file, import the generateJsonSchema function from openapi-ts-json-schema and specify the input and output file paths. Here's an example:
  • import { generateJsonSchema } from 'openapi-ts-json-schema'; const inputPath = 'path/to/openapi-spec.json'; const outputPath = 'path/to/output'; generateJsonSchema(inputPath, outputPath);
  1. Ensure that you replace path/to/openapi-spec.json with the actual file path or URL of your OpenAPI specification, and path/to/output with the desired output folder path.
  2. Execute the Generation Process: Open your terminal and navigate to the root directory of your TypeScript project. Run the TypeScript compiler to generate the JavaScript files, and then execute the generated JavaScript file that imports the OpenAPI specification.
  • tsc node dist/index.js
  1. This will trigger the generation process, and openapi-ts-json-schema will generate the TypeScript JSON schemas in the specified output folder.
  2. Explore and Use the Generated Schemas: Once the generation process is complete, you can explore the generated TypeScript JSON schemas. Navigate to the specified output folder and examine the contents of the generated schema files. These files contain the complete TypeScript JSON schemas that represent the API data models.
  3. You can now use these generated TypeScript JSON schemas in your TypeScript application to benefit from type-checking, autocomplete, and other TypeScript features.

Conclusion

Generating TypeScript JSON schemas from an OpenAPI definition can be a challenging task, but tools like openapi-ts-json-schema provide a solution to master your API development. By resolving external/remote $ref definitions, converting OpenAPI specifications to JSON schema format, and generating TypeScript JSON schema files, openapi-ts-json-schema simplifies the process and ensures accurate representation of API data models.

While openapi-ts-json-schema provides a reliable solution, it is important to note that native support for importing JSON schemas as constants and inferring types from any JSON schema is a desirable feature that could be added to TypeScript in the future.

In conclusion, openapi-ts-json-schema is a valuable tool for developers working with OpenAPI definitions and TypeScript applications. It streamlines the process of generating TypeScript JSON schemas and empowers developers to confidently build APIs with TypeScript. Give it a try, provide feedback, and unlock the full potential of your API development workflow.

Looking for a Postman alternative?

Try APIDog, the Most Customizable Postman Alternative, where you can connect to thousands of APIs right now!

--

--