提问：nuxt3 + typescript 如何注入NuxtApp自定义属性？

  • Z时代
  • 2024-02-11
  • 分类：IT

初学Nuxt3，使用defineNuxtPlugin的provide关键字向NuxtApp对象中注入了辅助函数myPlugin()，但typescript无法检查到注入的myPlugin()函数，并报错"对象的类型为 unknown"

我尝试通过修改 .nuxt/types/plugins.d.ts 内关于NuxtApp的类型定义，在当次开发中有效，但一旦重新运行开发或打包，.nuxt文件夹就会重建。

接着又按照官方文档提示，根目录下新建types/index.d.ts文件，在内部尝试进行类型声明合并，但也不行。

相关代码文件

/**
 * plugins/custom-plugin.ts 自定义辅助函数注入插件
 */
export default defineNuxtPlugin(() => {
  return {
    provide: {
      myPlugin: () => 'this is my plugin'
    }
  }
})
<script setup lang="ts">
/**
 * pages/blog/index.vue 调用插件方法
 */
const { $myPlugin } = useNuxtApp()
console.log($myPlugin());
</script>
<template>
  <div>
    Manage page
    <NuxtLink to="/blog">去博客</NuxtLink>
  </div>
</template>

index.vue文件报错
提问：nuxt3 + typescript 如何注入NuxtApp自定义属性？

/**
 * types/index.d.ts 尝试通过声明合并扩展NuxtApp类型，但失败了 
 */
declare module '#app' {
  interface NuxtApp {
    $myPlugin (): string
  }
}

我希望能够通过类型声明，扩展NuxtApp全局对象的属性，让使用时typescript不会报错，但目前始终得到“对象的类型为 "unknown"”的typescript报错。或者有其他什么解决方法吗？

回答：

已解决~线下跟同事讨论后，尝试去掉 types/index.d.ts 中 declare module '#app' 声明，直接声明 NuxtApp 接口即可。

这与官方文档有点儿出入

对typescript模块定义的作用和功能还是理解不够，虽然知道去掉模块声明即可，但为什么呢？

以上是 提问：nuxt3 + typescript 如何注入NuxtApp自定义属性？ 的全部内容， 来源链接： utcz.com/p/934470.html

回到顶部