DEV Community

Cover image for How do you unify TypeScript for both frontend and backend?
Pacharapol Withayasakpunt
Pacharapol Withayasakpunt

Posted on

2 2

How do you unify TypeScript for both frontend and backend?

As far as I know, there are only handful of frameworks doing this, e.g. blitz.js and frourio.

However, I know another easy way - Swagger/OpenAPI + typegen + Nodemon.

// nodemon.json
{
  "restartable": "rs",
  "execMap": {
    "ts": "yarn ts"
  },
  "events": {
    "restart": "yarn openapi || :"
  },
  "watch": [
    "server/"
  ],
  "env": {
    "NODE_ENV": "development"
  },
  "ext": "ts"
}
Enter fullscreen mode Exit fullscreen mode
// package.json
{
  "scripts": {
    "openapi": "wait-on tcp:$SERVER_PORT && curl -s http://localhost:$SERVER_PORT/api/doc/json -o ./assets/openapi.json && typegen ./assets/openapi.json > ./types/openapi.d.ts",
    "ts": "ts-node -r tsconfig-paths/register -O '{\"module\":\"commonjs\",\"noImplicitAny\":false}'"
  }
}
Enter fullscreen mode Exit fullscreen mode

And typegen is openapi-client-axios-typegen. (You can also try swaxios, but I failed to run it.)

With this approach, backend can be any programming languages that support OpenAPI or Swagger. Personally, I use fastify-swagger; but it can also be things like Python's FastAPI or Golang's Gin/Buffalo/Native.

Qodo Takeover

Introducing Qodo Gen 1.0: Transform Your Workflow with Agentic AI

While many AI coding tools operate as simple command-response systems, Qodo Gen 1.0 represents the next generation: autonomous, multi-step problem-solving agents that work alongside you.

Read full post

Top comments (0)

The best way to debug slow web pages cover image

The best way to debug slow web pages

Tools like Page Speed Insights and Google Lighthouse are great for providing advice for front end performance issues. But what these tools can’t do, is evaluate performance across your entire stack of distributed services and applications.

Watch video

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay