I'm new to TypeScript and currently trying to implement vue-router in my project.
Encountering the following errors:
Error TS2769: No overload matches this call in source\app\main.ts(3,3).
Overload 1 of 3, '(options?: ThisTypedComponentOptionsWithArrayProps): Vue', resulted in an error due to '{ router: any; }' not being assignable to parameter type 'ThisTypedComponentOptionsWithArrayProps'. The object literal can only specify known properties, and 'router' does not exist in that type.
Overload 2 of 3, '(options?: ThisTypedComponentOptionsWithRecordProps): Vue', produced a similar error message as the previous one.
Overload 3 of 3, '(options?: ComponentOptions, DefaultMethods, DefaultComputed, PropsDefinition>, Record<...>>): Vue', also gave an error regarding the property 'router' that is not found in the specified type.
Error TS2304: Cannot find name 'VueRouter' at source\app\main.ts(3,15).
main.ts
const App = new Vue({
router: new VueRouter({})
}).$mount('#wrapper');
main.min.js:formatted
const App = new Vue({
router: new VueRouter({})
}).$mount("#wrapper");
//# sourceMappingURL=main.js.min.map
'gulp-typescript' configuration
target: "es2015",
allowJs: true,
sourceMap: true,
types: [
'./types/vue/',
'./types/vue-router/'
],
allowSyntheticDefaultImports: true,
experimentalDecorators: true,
moduleResolution: "node"
gulp task
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 (officially downloaded from GitHub): vue, vue-router
Additional information: My index.html file contains script tags linking to the official CDNs for Vue and Vue-Router.
Thank you in advance for any guidance and suggestions!