Використання згенерованих типів у плагінах Nuxt: реалізація та приклади

8 Березня 2024 в 18:56 125

Під час розробки веб-додатків з використанням Nuxt.js може виникнути потреба у генерації та використанні власних типів даних у плагінах. Один із широко вживаних методів досягнення цього – використання генерації типів у модулі та їх подальше використання у плагінах. У цій статті ми розглянемо, як реалізувати цей підхід та надамо приклади.

// module.ts
export default defineNuxtModule({
  meta: {
    // ...
  },
  defaults: {
    // ...
  },
  setup(_options, nuxt) {
    addTypeTemplate({
      filename: 'foo-types.d.ts',
      getContents: () => `type TypeForGeneric = Record<string, unknown>`,
    })
    nuxt.hook('prepare:types', async ({ references }) => {
      references.push({ path: resolve(nuxt.options.buildDir, 'types/foo-types.d.ts') })
    })
    addPlugin(resolve('./runtime/plugin'))
  },
})

// module.ts

export default defineNuxtModule({

meta: {

// ...

defaults: {

// ...

setup(_options, nuxt) {

addTypeTemplate({

filename: 'foo-types.d.ts',

getContents: () => `type TypeForGeneric = Record<string, unknown>`,

})

nuxt.hook('prepare:types', async ({ references }) => {

references.push({ path: resolve(nuxt.options.buildDir, 'types/foo-types.d.ts') })

})

addPlugin(resolve('./runtime/plugin'))

})

// runtime/plugin.ts
import { defineNuxtPlugin } from '#app'
import type { TypeForGeneric } from '' // <= де я можу імпортувати його з?
export default defineNuxtPlugin((nuxtApp) => {
  const fooWithTypes = foo<TypeForGeneric>()
  return {
    provide: {
      fooWithTypes,
    },
  }
})