如何手动扩展Nuxt3的NuxtApp类型以识别自定义插件类型？

你可以通过规范的类型声明文件来扩展NuxtApp的类型，让页面中使用插件时能正确识别类型，你的思路方向是对的，但需要调整写法以适配Nuxt的类型系统：

1. 在项目根目录创建types/nuxt.d.ts文件（如果types目录不存在就新建）
2. 在该文件中写入以下代码：

import type { order } from '~/plugins/order'

declare module '#app' {
  interface NuxtApp {
    $order: ReturnType<typeof order>
  }
}

// 确保文件被识别为模块，避免类型冲突
export {}

关键说明： #

• Nuxt 3的核心类型都挂载在#app模块下，因此需要在declare module '#app'内部扩展NuxtApp接口，而不是直接扩展全局接口
• 使用typeof order来获取插件函数的类型，再通过ReturnType拿到它的返回值类型，这样能准确匹配你注入到NuxtApp的$order类型
• 末尾的export {}是必须的，它会让这个文件被TypeScript识别为模块，防止全局类型污染

额外注意事项： #

• 确保你的插件文件（plugins/order.ts）是正确导出类型的，比如如果你的插件是通过defineNuxtPlugin提供$order，可以在插件文件里直接导出对应类型：

// plugins/order.ts
export const useOrder = () => {
  return {
    get: () => {},
    create: () => {}
  }
}

export default defineNuxtPlugin(() => {
  return {
    provide: {
      order: useOrder()
    }
  }
})

// 导出类型
export type OrderInstance = ReturnType<typeof useOrder>

然后在类型声明文件中改为导入OrderInstance：

import type { OrderInstance } from '~/plugins/order'

declare module '#app' {
  interface NuxtApp {
    $order: OrderInstance
  }
}

export {}

这样调整后，页面中使用useNuxtApp().$order或者直接用$order时，TypeScript就能正确识别它的类型，不会显示为any了。

内容的提问来源于stack exchange，提问作者Dmytro Afanasiev