TS2769: No overload matches this call. The last overload gave the following error
Don't understand why I have errors PreLoader.vue
<template>
<div :class="{ wrapper: blur }">
<div class="spinner">
<div class="rect1"></div>
<div class="rect2"></div>
<div class="rect3"></div>
<div class="rect4"></div>
<div class="rect5"></div>
<div class="rect6"></div>
<div class="rect7"></div>
<div class="rect8"></div>
<div class="rect9"></div>
<div class="rect10"></div>
</div>
</div>
</template>
<script>
import { defineComponent } from 'vue'
export default defineComponent({
name: 'PreLoader',
props: {
scale: { type: Number, required: false, default: 1 },
blur: { type: Boolean, required: false, default: false },
},
setup(props) {
const transform = `transform: scaleX(${props.scale}) scaleY(${props.scale})`
const preloaderStyle = `${transform}`
return { preloaderStyle }
},
})
</script>
<style lang="scss" scoped>
...
</style>
app-table.vue
<template>
<div class="table-container">
<table>
<thead>
<slot name="header"></slot>
</thead>
<tbody :class="{ blur: loadingBlur }">
<PreLoader v-if="loadingBlur" :blur="loadingBlur" />
<slot v-if="!loading" name="body" />
<tr v-else>
<td colspan="420">
<PreLoader />
</td>
</tr>
</tbody>
</table>
<div class="paginator" v-if="paging && !loading && total > 0">
<paginator @next="pageTo(1)" @prev="pageTo(-1)" :has-next="hasNext" :has-prev="hasPrev" />
<div>{{ firstItemPosition }} - {{ lastItemPosition }} of {{ total }} items</div>
</div>
</div>
</template>
<script lang="ts">
import { computed, defineComponent } from 'vue'
import PreLoader from './PreLoader.vue'
import Paginator from './paginator.vue'
export default defineComponent({
components: {
Paginator,
PreLoader,
},
props: {
offset: {
type: Number,
required: false,
default: 0,
},
limit: {
type: Number,
required: false,
default: 0,
},
total: {
type: Number,
required: false,
default: 0,
},
loading: { type: Boolean, required: false, default: false },
loadingBlur: { type: Boolean, required: false, default: false },
paging: {
type: Boolean,
required: false,
default: true,
},
},
setup(props, { emit }) {
const hasNext = computed(() => props.offset + props.limit < props.total)
const hasPrev = computed(() => props.offset > 0)
const pageTo = (direction: -1 | 1) => emit('paged', direction)
const firstItemPosition = computed(() => props.offset + 1)
const lastItemPosition = computed(() => {
const lastItem = props.offset + props.limit
if (lastItem > props.total) {
return props.total
}
return lastItem
})
return { hasNext, hasPrev, pageTo, firstItemPosition, lastItemPosition }
},
})
</script>
<style lang="scss" scoped>
...
</style>
In console, I have similar errors wherever Preloader is used
ERROR in src/components/app-table.vue:32:5
TS2769: No overload matches this call.
The last overload gave the following error.
Type 'typeof import("[PROJECT]/node_modules/vue/dist/vue")' is not assignable to type 'Component<any, any, any, ComputedOptions, MethodOptions>'.
Type 'typeof import("[PROJECT]/node_modules/vue/dist/vue")' is not assignable to type 'ComponentOptions<any, any, any, ComputedOptions, MethodOptions, any, any, any>'.
Type 'typeof import("[PROJECT]/node_modules/vue/dist/vue")' is not assignable to type 'ComponentOptionsBase<any, any, any, ComputedOptions, MethodOptions, any, any, any, string, {}>'.
Types of property 'computed' are incompatible.
Type '{ <T>(getter: ComputedGetter<T>, debugOptions?: DebuggerOptions | undefined): ComputedRef<T>; <T>(options: WritableComputedOptions<T>, debugOptions?: DebuggerOptions | undefined): WritableComputedRef<...>; }' is not assignable to type 'ComputedOptions'.
Index signature is missing in type '{ <T>(getter: ComputedGetter<T>, debugOptions?: DebuggerOptions | undefined): ComputedRef<T>; <T>(options: WritableComputedOptions<T>, debugOptions?: DebuggerOptions | undefined): WritableComputedRef<...>; }'.
30 | components: {
31 | Paginator,
> 32 | PreLoader,
| ^^^^^^^^^
33 | },
34 | props: {
35 | offset: {