Proxy request to get response data and transform to TypeScript code

by Vue.js Examples

ohmyts

An automated tool help you to transform backend json data to TypeScript type.

Quick Start

Vite

install

npm i @ohmyts/vite http-proxy -D

usage

vite.config.ts

import { ohmytsVite } from '@ohmyts/vite'

const r = (p: string) => resolve(__dirname, p)

export default defineConfig({
  plugins: [
    ohmytsVite({
      url: '/api',
      rootDir: r('@types'),
      proxyOptions: {
        target: 'https://autumnfish.cn',
      },
    }),
  ]
})

app.tsx for more detail, please go playground/app.tsx to check

import axios from 'axios'
import { defineComponent } from 'vue'

const App = defineComponent(() => {
  const { data } = useQuery(() => axios.get('/api/search?keywords=MELANCHOLY'))

  return () => (
    // ...
  )
})

for example, if the backend return as below

{
  "data": 1
}

it will create @types/GET_Search.d.ts as below

declare interface SearchResponseType {
  data: number
}

Options

export interface OhmytsOptions {
  /*
  * rewrite url
  */
  url: string
  /*
  * proxy server options
  *
  * @default
  */
  proxyOptions: ServerOptions
  /*
  * the root dir path generate type file
  *
  * @default '@types/'
  */
  rootDir?: string
  /*
  * encoding
  *
  * @default 'utf-8'
  */
  encoding?: BufferEncoding
  /*
  * the suffix of generated root type
  *
  * @default 'ResponseType'
  */
  suffix?: string
  /*
  * should overwrite in next time
  *
  * @default true
  */
  overwrite?: boolean
}

GitHub

View Github