如何创建和设置 Vue 3 typescript 插件？

Question

我正在尝试使用 Typescript 在 Vue 3 中创建一个新插件。

我的代码一般是：

//somePlugin
import { App, Plugin } from "vue";

const somePlugin: Plugin = {
  install: async (app: App, options: {...}): Promise<void> => {
    ....
  }
}
export { somePlugin };
//----------------------------------------------------------
//main.ts
import { somePlugin } from "@/plugins/somePlugin";
import App from "./App.vue";

const app = createApp(App);
app.use(somePlugin);

但是我收到以下错误：

Cannot find module '@/plugins/somePlugin' or its corresponding type declarations.ts(2307)

说实话，我对 Typescript 有点陌生，但我认为“somePlugin”是由 Vue 内部“插件”定义的，因此是完全类型化和声明的。

根据类似问题的答案，我想我应该创建一个“somePlugin.d.ts”， 但我真的不知道我应该在这里声明什么，但我尝试了这个：

declare module "somePlugin";

但这没有用。因此，我要么需要 Vue 3 Typescript 插件的工作示例，要么需要有关如何声明该插件以使其正常工作的提示。

我也想避免使用 ts-ignore。

Answer 1

就我而言，我不得不尴尬地承认，这是由错误的链接造成的。

Answer 2

在我看来，这像是 tsconfig.json （Typescript 配置）文件中的问题。我创建了一个新的 vue 3 项目，它对我有用。这是新项目的当前 tsconfig.json 文件：

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}