Typescript + Vue + Vue-Router：没有重载匹配这个调用。找不到名称“VueRouter”

Posted 2023-03-13

【中文标题】Typescript + Vue + Vue-Router：没有重载匹配这个调用。找不到名称“VueRouter”

【英文标题】：Typescript + Vue + Vue-Router: No overload matches this call. Cannot find name 'VueRouter'

【发布时间】：2020-08-25 13:20:11

【问题描述】：

我是 typescript 的新手，正在尝试在我的项目中使用 vue-router。

我收到以下错误：

source\app\main.ts(3,3)：错误 TS2769：没有重载匹配此调用。

Overload 1 of 3, '(options?: ThisTypedComponentOptionsWithArrayProps): Vue'，给出了以下错误。 ' router: any; 类型的参数' 不可分配给“ThisTypedComponentOptionsWithArrayProps”类型的参数。 对象字面量只能指定已知属性，并且在类型“ThisTypedComponentOptionsWithArrayProps”中不存在“路由器”。

Overload 2 of 3, '(options?: ThisTypedComponentOptionsWithRecordProps): Vue'，给出了以下错误。 ' router: any; 类型的参数' 不可分配给“ThisTypedComponentOptionsWithRecordProps”类型的参数。 对象字面量只能指定已知属性，并且在类型“ThisTypedComponentOptionsWithRecordProps”中不存在“路由器”。

Overload 3 of 3, '(options?: ComponentOptions, DefaultMethods, DefaultComputed, PropsDefinition>, Record<...>>): Vue'，给出了以下错误。 ' router: any; 类型的参数' 不可分配给类型为“ComponentOptions、DefaultMethods、DefaultComputed、PropsDefinition>、Record<...>>”的参数。 对象字面量只能指定已知属性，并且在类型 'ComponentOptions, DefaultMethods, DefaultComputed, PropsDefinition>, Record<...>>' 中不存在 'router'。

source\app\main.ts(3,15)：错误 TS2304：找不到名称“VueRouter”。

ma​​in.ts

const App = new Vue(

  router: new VueRouter()

).$mount('#wrapper');

ma​​in.min.js:格式化

const App = new Vue(
  router: new VueRouter()
).$mount("#wrapper");
//# sourceMappingURL=main.js.min.map

'gulp-typescript' 配置

target: "es2015",
allowJs: true,
sourceMap: true,
types: [
  './types/vue/',
  './types/vue-router/'
],
allowSyntheticDefaultImports: true,
experimentalDecorators: true,
moduleResolution: "node"

gulp 任务

const _ts = async () => 
  return gulp.src(path.source.ts)
    .pipe(rigger())
    .pipe(sourcemaps.init())
    .pipe(typescript(
      config.typescript,
      typescript.reporter.defaultReporter()
    ))
    .on('error', function()return false) // WALKAROUND: Error: gulp-typescript: A project cannot be used in two compilations at the same time. Create multiple projects with createProject instead.
    .pipe(terser())
    .pipe(sourcemaps.write('./', 
      sourceMappingURL: function(file) 
        return `$ file.relative .min.map`;
      
    ))
    .pipe(rename(suffix: '.min'))
    .pipe(gulp.dest(path.production.js))
    .pipe(reload(stream: true))
;

Typescript types（官方从github下载）：vue,vue-router

也许没用的信息：在我的 index.html 文件中是带有 vue 和 vue-router 官方 CDN 的脚本标签。

非常感谢您的任何建议！

【参考方案1】：

类型错误的混乱可能掩盖了真正的错误：

source\app\main.ts(3,15): error TS2304: Cannot find name 'VueRouter'.

在我看来 VueRouter 没有正确导入。

【讨论】：

感谢您的回复！但是，如果我使用了官方类型，这怎么可能呢？我加载它的方式与 vue 相同。或者如何正确导入？

很抱歉，我的问题似乎很明显，但您在某处有 import VueRouter from 'vue-router' 吗？

我可能有一个愚蠢的问题，但为什么我必须导入它？如果您稍微考虑一下，（几乎）没有理由这样做，因为 VueRouter 将在 index.html 中加载。如果我不在我的 .html 文件 feom CDN 中使用脚本标签，那么我需要安装 vue-router.js 文件并弄乱我的结构，使用 CDN-URL 导入甚至都不起作用。那么我真的需要这样做吗？

现在您使用的是 TypeScript，您的代码在进入浏览器之前已经过预编译。为了检查正确的变量类型和函数模式，它必须知道所有变量是什么。不幸的是，它不知道您将在 HTML 中加载什么。您必须在代码中导入库才能引用它。

我同意你的看法！好的，那我稍后试试。