使用 ref 时哪个重载会匹配调用？答案

【问题标题】：Which overload would match the call when using a ref?使用 ref 时哪个重载会匹配调用？
【发布时间】：2021-10-17 07:43:26
【问题描述】：

我遇到了一个我不理解的 TS 错误，下面的代码：

<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)))

(...)

最后一行的完整错误是

<html>TS2769: No overload matches this call.<br/>Overload 1 of 2, '(predicate: (value: unknown, index: number, array: unknown[]) =&gt; value is unknown, thisArg?: any): unknown[]', gave the following error.<br/>Argument of type '(x: CalendarEvent) =&gt; boolean' is not assignable to parameter of type '(value: unknown, index: number, array: unknown[]) =&gt; 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[]) =&gt; unknown, thisArg?: any): unknown[]', gave the following error.<br/>Argument of type '(x: CalendarEvent) =&gt; boolean' is not assignable to parameter of type '(value: unknown, index: number, array: unknown[]) =&gt; unknown'.<br/>Types of parameters 'x' and 'value' are incompatible.<br/>Type 'unknown' is not assignable to type 'CalendarEvent'.

控制台中提供了更易读的版本：

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')

嗯，可读在我的情况下是夸大其词 - 有人能向我解释这个错误的真正含义吗？

我阅读了其他一些答案，这通常意味着函数的参数数量错误。然而，我认为，就我而言，这更多地与 Vue3 ref 概念有关（疯狂猜测）

【问题讨论】：

标签： javascript typescript vue.js overloading vuejs3

【解决方案1】：

默认情况下 toRef(...) 有一个返回类型 Ref<unknown[]> 可以转换为 Ref<CalendarEvent[]> ：

import {defineComponent, computed, toRef,Ref} from 'vue'
                                       //? import the type Ref
....
  setup(props) {

    let allEvents  = toRef(props,'data') as Ref<CalendarEvent[]>

   let importantEvents = computed(() => (allEvents.value.filter((x) => x.important)))
                                                              //? the right type is inferred here

【讨论】：

【解决方案2】：

无法自动推断Array props 的类型，因此props.data 解析为unknown[] 类型。

要显式键入数组，declare the prop with the type property set to Array with a type assertion of PropType<YourArrayType>:

import { PropType } from 'vue'

export default defineComponent({
  props: {
    data: {               ?
      type: Array as PropType<CalendarEvent[]>,
      default: () => emptyCalendarEvent()
    },
  },
}

这使 TypeScript 能够从 toRef(props, 'data') 推断出正确的类型。

【讨论】：