Skip to main content

OpenAPI Backend Schema as Frontend Types

· One min read
Femi Adigun
Femi Adigun
Senior Software Engineer & Coach

OpenAPI JSON as Frontend Types​

install the requirement

npm install -D openapi-typescript-codegen

Add the type generator script to your package.json

{
  "scripts": {
    "generate-api": "openapi --input http://your-backend-url/openapi.json --output src/types/api --client fetch"
  }
}

run the generator

npm run generate-api

You can now import and use the types in your application

import { Resume, UserResume } from "@/types/api";

interface Props {
  resume: UserResume; // Generated type from your FastAPI schema
}

const ResumeComponent: React.FC<Props> = ({ resume }) => {
  // ...
};