Encountering an unfamiliar TS error while working with the code snippet below:
<script lang="ts">
import {defineComponent, computed, toRef} from 'vue'
import _ from 'lodash'
import {DateTime} from 'luxon'
interface CalendarEvent {
start: string
end: string
name: string
id: string
important: boolean
}
function emptyCalendarEvent(): CalendarEvent[] {
return [{
start: '',
end: '',
name: '',
id: '',
important: false
}]
}
export default defineComponent({
name: 'GoogleCalendar',
props: {
when: {type: String, default: ''},
data: {type: Array, default: () => emptyCalendarEvent()},
},
setup(props) {
let allEvents = toRef(props, 'data')
let importantEvents = computed(() => (allEvents.value.filter((x: CalendarEvent) => x.important)))
(...)
The detailed error message on the final line is
<html>TS2769: No overload matches this call.<br/>Overload 1 of 2, '(predicate: (value: unknown, index: number, array: unknown[]) => value is unknown, thisArg?: any): unknown[]', gave the following error.<br/>Argument of type '(x: CalendarEvent) => boolean' is not assignable to parameter of type '(value: unknown, index: number, array: unknown[]) => value is unknown'.<br/>Types of parameters 'x' and 'value' are incompatible.<br/>Type 'unknown' is not assignable to type 'CalendarEvent'.<br/>Overload 2 of 2, '(predicate: (value: unknown, index: number, array: unknown[]) => unknown, thisArg?: any): unknown[]', gave the following error.<br/>Argument of type '(x: CalendarEvent) => boolean' is not assignable to parameter of type '(value: unknown, index: number, array: unknown[]) => unknown'.<br/>Types of parameters 'x' and 'value' are incompatible.<br/>Type 'unknown' is not assignable to type 'CalendarEvent'.
A more clear explanation can be found in the console:
TS2769: No overload matches this call.
Overload 1 of 2, '(predicate: (value: unknown, index: number, array: unknown[]) => value is unknown, thisArg?: any): unknown[]', gave the following error.
Argument of type '(x: CalendarEvent) => boolean' is not assignable to parameter of type '(value: unknown, index: number, array: unknown[]) => value is unknown'.
Types of parameters 'x' and 'value' are incompatible.
Type 'unknown' is not assignable to type 'CalendarEvent'.
Overload 2 of 2, '(predicate: (value: unknown, index: number, array: unknown[]) => unknown, thisArg?: any): unknown[]', gave the following error.
Argument of type '(x: CalendarEvent) => boolean' is not assignable to parameter of type '(value: unknown, index: number, array: unknown[]) => unknown'.
Types of parameters 'x' and 'value' are incompatible.
Type 'unknown' is not assignable to type 'CalendarEvent'.
61 | let allEvents = toRef(props, 'data')
62 | // let importantEvents = computed(() => filteredEvents.value.filter((x: CalendarEvent) => x.important))
> 63 | let importantEvents = computed(() => (allEvents.value.filter((x: CalendarEvent) => x.important)))
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
64 |
65 | function extractTime(what: string) {
66 | return DateTime.fromISO(what).toFormat('H:mm')
I could use some help understanding what this error message actually means.
Based on my research, it seems like there might be a mismatch in the number of arguments passed to functions. I suspect that in my scenario, it could be related to Vue3's ref concept (just a guess).