ohmyts
An automated tool help you to transform backend json data to TypeScript type.
Quick Start
Vite
install
npm i @ohmyts/vite -D
🤽
playground
usage
vite.config.ts
import { ohmytsVite } from '@ohmyts/vite'
const r = (p: string) => resolve(__dirname, p)
export default defineConfig({
plugins: [
ohmytsVite({
target: '/api',
rootDir: r('@types'),
proxyOptions: {
target: 'https://autumnfish.cn',
},
}),
]
})
app.tsx for more detail, please go playground 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 IGetSearchResponseType {
data: number
}
File naming rule
${options.rootDir}/${req.Method}_${pathname(req.url)}
what is pathname function? for example
pathname('/api/search?keywords=hello') === 'ApiSearch'
Type naming rule
the rule of type name is I${pathname(req.Method)}${pathname(req.url)}${options.suffix}
Type
import type { Plugin } from 'vite'
declare function ohmytsVite(options: OhmytsOptions | OhmytsOptions[]): Plugin
Options
import type { ServerOptions } from 'http-proxy'
export interface OhmytsOptions {
/*
* rewrite url
*/
target: string
/*
* proxy server options
*
*/
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
/*
* use `declare` to decorate type or it will be `export`
*
* @default true
*/
declare?: boolean
}
8 Sep 26, 2022
6 Jun 30, 2022
16 Dec 6, 2022
1.8k Dec 20, 2022
2 Nov 11, 2022
7 Jul 31, 2022
87 Dec 30, 2022
13 Sep 2, 2022
2 Mar 29, 2022
6 May 11, 2023