fix(types): infer type from target

Author: posva

src/database/bind.ts

@@ -25,7 +25,8 @@ import type { Query, DatabaseReference, DataSnapshot } from 'firebase/database'
  * Global option type when binding one database reference
  * @internal
  */
-export interface _DatabaseRefOptions extends _DataSourceOptions {
+export interface _DatabaseRefOptions<DataT = unknown>
+  extends _DataSourceOptions<DataT> {
   /**
    * Function to transform snapshots into data. **Make sure to reuse the original serializer to add the object `id`**.
    * See https://vuefire.vuejs.org/guide/global-options.html
@@ -37,7 +38,7 @@ export interface _DatabaseRefOptions extends _DataSourceOptions {
  * Global defaults type override options for all database bindings. This type remove make some optional values required.
  * @internal
  */
-interface _DatabaseRefOptionsWithDefaults extends _DatabaseRefOptions {
+interface _DatabaseRefOptionsWithDefaults extends _DatabaseRefOptions<unknown> {
   /**
    * @defaultValue `false`
    */

src/database/index.ts

@@ -1,7 +1,6 @@
 import { Ref, ref, MaybeRefOrGetter } from 'vue-demi'
 import { DatabaseReference, getDatabase, Query } from 'firebase/database'
 import { _Nullable, _RefWithState } from '../shared'
-import { _DatabaseRefOptions } from './bind'
 import {
   VueDatabaseDocumentData,
   VueDatabaseQueryData,
@@ -13,7 +12,7 @@ import { UseDatabaseRefOptions, _useDatabaseRef } from './useDatabaseRef'
 export { globalDatabaseOptions } from './bind'
 export type { UseDatabaseRefOptions }
 
-export type UseListOptions = UseDatabaseRefOptions
+export type UseListOptions<DataT = unknown> = UseDatabaseRefOptions<DataT>
 
 /**
  * Creates a reactive variable connected to the database as an array. Each element in the array will contain an `id`
@@ -25,7 +24,7 @@ export type UseListOptions = UseDatabaseRefOptions
  */
 export function useDatabaseList<T = unknown>(
   reference: MaybeRefOrGetter<_Nullable<DatabaseReference | Query>>,
-  options?: UseListOptions
+  options?: UseListOptions<T>
 ): _RefDatabase<VueDatabaseQueryData<T>> {
   const data = ref<T[]>([]) as Ref<T[]>
   return _useDatabaseRef(
@@ -43,7 +42,7 @@ export function useDatabaseList<T = unknown>(
  */
 export const useList = useDatabaseList
 
-export type UseObjectOptions = UseDatabaseRefOptions
+export type UseObjectOptions<DataT = unknown> = UseDatabaseRefOptions<DataT>
 
 /**
  * Creates a reactive variable connected to the database as an object. If the reference is a primitive, it will be
@@ -55,7 +54,7 @@ export type UseObjectOptions = UseDatabaseRefOptions
  */
 export function useDatabaseObject<T = unknown>(
   reference: MaybeRefOrGetter<_Nullable<DatabaseReference>>,
-  options?: UseObjectOptions
+  options?: UseObjectOptions<T>
 ): _RefDatabase<VueDatabaseDocumentData<T> | undefined> {
   const data = ref<T | null>()
   return _useDatabaseRef(reference, {

src/database/useDatabaseRef.ts

@@ -35,7 +35,8 @@ import { _RefDatabase } from './utils'
 /**
  * Options when calling `useDatabaseList()` and `useDatabaseObject()`.
  */
-export interface UseDatabaseRefOptions extends _DatabaseRefOptions {}
+export interface UseDatabaseRefOptions<DataT = unknown>
+  extends _DatabaseRefOptions<DataT> {}
 
 export function _useDatabaseRef(
   reference: MaybeRefOrGetter<_Nullable<DatabaseReference | Query>>,

tests/database/list.spec.ts

@@ -1,5 +1,5 @@
 import { mount } from '@vue/test-utils'
-import { describe, expect, it } from 'vitest'
+import { describe, expect, it, expectTypeOf } from 'vitest'
 import {
   UseDatabaseRefOptions,
   useDatabaseList,
@@ -34,7 +34,7 @@ describe('Database lists', () => {
     options,
     ref = databaseRef(),
   }: {
-    options?: UseDatabaseRefOptions
+    options?: UseDatabaseRefOptions<T>
     ref?: MaybeRefOrGetter<DatabaseReference | Query>
   } = {}) {
     let data!: _RefDatabase<VueDatabaseQueryData<T>>
@@ -403,6 +403,24 @@ describe('Database lists', () => {
       useDatabaseList<number>(databaseRef(db, 'todos'))
     )
 
+    expectTypeOf(useDatabaseList(databaseRef(db, 'todos'))).not.toMatchTypeOf<
+      Ref<VueDatabaseQueryData<{ name: string }>>
+    >()
+
+    expectTypeOf(useDatabaseList(databaseRef(db, 'todos'))).toMatchTypeOf<
+      Ref<VueDatabaseQueryData<unknown>>
+    >()
+
+    expectTypeOf(
+      useDatabaseList<{ name: string }>(databaseRef(db, 'todos'))
+    ).toMatchTypeOf<Ref<VueDatabaseQueryData<{ name: string }>>>()
+
+    expectTypeOf(
+      useDatabaseList(databaseRef(db, 'todos'), {
+        target: ref<{ name: string }>({ name: 'a' }),
+      })
+    ).toMatchTypeOf<Ref<VueDatabaseQueryData<{ name: string }>>>()
+
     // TODO: tests for id field
   })
 })

tests/database/objects.spec.ts

@@ -1,5 +1,5 @@
 import { mount } from '@vue/test-utils'
-import { beforeEach, describe, expect, it } from 'vitest'
+import { beforeEach, describe, expect, expectTypeOf, it } from 'vitest'
 import {
   UseDatabaseRefOptions,
   useDatabaseObject,
@@ -37,7 +37,7 @@ describe('Database objects', () => {
     options,
     ref = databaseRef(),
   }: {
-    options?: UseDatabaseRefOptions
+    options?: UseDatabaseRefOptions<T>
     ref?: MaybeRefOrGetter<DatabaseReference>
   } = {}) {
     let data!: _RefDatabase<VueDatabaseDocumentData<T> | undefined>
@@ -299,5 +299,19 @@ describe('Database objects', () => {
     expectType<Ref<number | null | undefined>>(
       useDatabaseObject<number>(databaseRef(db, 'todo'))
     )
+
+    expectTypeOf(useDatabaseObject(databaseRef(db, 'oh'))).toMatchTypeOf<
+      Ref<unknown>
+    >()
+
+    expectTypeOf(
+      useDatabaseObject<{ name: string }>(databaseRef(db, 'todo'))
+    ).toMatchTypeOf<Ref<_Nullable<{ name: string }>>>()
+
+    expectTypeOf(
+      useDatabaseObject(databaseRef(db, 'todo'), {
+        target: ref<{ name: string }>({ name: 'a' }),
+      })
+    ).toMatchTypeOf<Ref<_Nullable<{ name: string }>>>()
   })
 })