npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@credify/openapi-typescript

v3.0.3

Published

Generate TypeScript types from Swagger OpenAPI specs

Downloads

10

Readme

version(scoped) npm downloads (weekly) codecov

All Contributors

📘️ openapi-typescript

🚀 Convert OpenAPI 3.0 and 2.0 (Swagger) schemas to TypeScript interfaces using Node.js.

💅 The output is prettified with Prettier (and can be customized!).

👉 Works for both local and remote resources (filesystem and HTTP).

View examples:

Usage

CLI

🗄️ Reading specs from file system

npx openapi-typescript schema.yaml --output schema.ts

# 🤞 Loading spec from tests/v2/specs/stripe.yaml…
# 🚀 schema.yaml -> schema.ts [250ms]

☁️ Reading specs from remote resource

npx openapi-typescript https://petstore.swagger.io/v2/swagger.json --output petstore.ts

# 🤞 Loading spec from https://petstore.swagger.io/v2/swagger.json…
# 🚀 https://petstore.swagger.io/v2/swagger.json -> petstore.ts [650ms]

Thanks to @psmyrdek for the remote spec feature!

Using in TypeScript

Import any top-level item from the generated spec to use it. It works best if you also alias types to save on typing:

import { components } from './generated-schema.ts';

type APIResponse = components["schemas"]["APIResponse"];

The reason for all the ["…"] everywhere is because OpenAPI lets you use more characters than are valid TypeScript identifiers. The goal of this project is to generate all of your schema, not merely the parts that are “TypeScript-safe.”

Also note that there’s a special operations interface that you can import OperationObjects by their operationId:

import { operations } from './generated-schema.ts';

type getUsersById = operations["getUsersById"];

This is the only place where our generation differs from your schema as-written, but it’s done so as a convenience and shouldn’t cause any issues (you can still use deep references as-needed).

Thanks to @gr2m for the operations feature!

Outputting to stdout

npx openapi-typescript schema.yaml

Generating multiple schemas

In your package.json, for each schema you’d like to transform add one generate:specs:[name] npm-script. Then combine them all into one generate:specs script, like so:

"scripts": {
  "generate:specs": "npm run generate:specs:one && npm run generate:specs:two && npm run generate:specs:three",
  "generate:specs:one": "npx openapi-typescript one.yaml -o one.ts",
  "generate:specs:two": "npx openapi-typescript two.yaml -o two.ts",
  "generate:specs:three": "npx openapi-typescript three.yaml -o three.ts"
}

If you use npm-run-all, you can shorten this:

"scripts": {
  "generate:specs": "run-p generate:specs:*",

You can even specify unique options per-spec, if needed. To generate them all together, run:

npm run generate:specs

Rinse and repeat for more specs.

For anything more complicated, or for generating specs dynamically, you can also use the Node API.

CLI Options

| Option | Alias | Default | Description | | :----------------------------- | :---- | :------: | :--------------------------------------------------------------- | | --output [location] | -o | (stdout) | Where should the output file be saved? | | --prettier-config [location] | | | (optional) Path to your custom Prettier configuration for output | | --raw-schema | | false | Generate TS types from partial schema (e.g. having components.schema at the top level) |

Node

npm i --save-dev openapi-typescript
const { readFileSync } = require("fs");
const swaggerToTS = require("openapi-typescript").default;

const input = JSON.parse(readFileSync("spec.json", "utf8")); // Input can be any JS object (OpenAPI format)
const output = swaggerToTS(input); // Outputs TypeScript defs as a string (to be parsed, or written to a file)

The Node API is a bit more flexible: it will only take a JS object as input (OpenAPI format), and return a string of TS definitions. This lets you pull from any source (a Swagger server, local files, etc.), and similarly lets you parse, post-process, and save the output anywhere.

If your specs are in YAML, you’ll have to convert them to JS objects using a library such as js-yaml. If you’re batching large folders of specs, glob may also come in handy.

Migrating from v1 to v2

Migrating from v1 to v2

Project Goals

  1. Support converting any OpenAPI 3.0 or 2.0 (Swagger) schema to TypeScript types, no matter how complicated
  2. The generated TypeScript types must match your schema as closely as possible (i.e. don’t convert names to PascalCase or follow any TypeScript-isms; faithfully reproduce your schema as closely as possible, capitalization and all)
  3. This library is a TypeScript generator, not a schema validator.

Contributing

PRs are welcome! Please see our CONTRIBUTING.md guide. Opening an issue beforehand to discuss is encouraged but not required.

Contributors ✨

Thanks goes to these wonderful people (emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!