Vue composition api array in reactive object 键入错误

Question

我遇到了 Typescript 和 nuxt-composition-api 插件的问题。

我有一个组合函数，用于为我的应用程序中的多个 table 视图获取数据。我想使用 Typescript 泛型为组合函数提供它将要获取的数据类型，这样我就可以在我的组件中享受类型推断。

问题是我的项目作为数组存储在反应对象的键中，当我想用从 API 获取的数据更新状态时，我最终遇到了 TS 错误就像下面代码中的那个。

我已经阅读了多个 SO 和 GH 帖子和问题，但找不到任何帮助。你知道我该如何解决这个问题吗？

import { onMounted, reactive, useContext } from '@nuxtjs/composition-api'
import { PaginatedResponse } from '~/helpers/api'

export interface TableHook<T> {
  state: TableState<T>
  // Some more types
}

export interface TableState<T> {
  items: T[]
  // Some more types
}

function useTable<T>({ baseUrl }: { baseUrl: string }): TableHook<T> {
  const { app: { $api } } = useContext()


  const state = reactive<TableState<T>>({
    items: [] as T[]
    // Some more keys, related to pagination and loading state
  })

  onMounted(() => {
    fetchPage()
  })

  async function fetchPage() {
    const res: PaginatedResponse<T> = await $api.get(baseUrl)
    // The following statement throws a TS error
    // Type 'T[]' is not assignable to type 'UnwrapRefSimple<T>[]'.
    // Type 'T' is not assignable to type 'UnwrapRefSimple<T>'.ts(2322)
    state.items = res.data // res.data is infered as T[]
  }

  // Some more methods here...

  return {
    state
  }
}

export default useTable

我的 PaginatedResponse 界面如下所示：

export interface PaginatedResponse<T> {
  current_page: number | null
  data: T[]
  next_page: number | null
  per_page: number | null
  prev_page: number | null
  total: number | null
}

Answer 1

我设法通过将状态转换为 uknown 然后转换为 TableState 来解决问题：

  const state = (reactive<TableState<T>>({
    items: [] as T[],
  }) as unknown) as TableState<T>

我不知道这是否是正确的解决方案，但我的错误消失了，我可以在我的组件中使用类型推断和自动完成功能。

Vue composition api array in reactive object 键入错误

Vue composition api array in reactive object typing error

typescript

vue.js

nuxt.js

vue-composition-api