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

Question

我是 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 的脚本标签。

非常感谢您的任何建议！

Answer 1

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

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

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