watch-test.ts — vue Source File

Architecture documentation for watch-test.ts, a typescript file in the vue codebase. 4 imports, 0 dependents.

File typescript VueCore Observer 4 imports 2 functions

Entity Profile

VueCore→ Observer→ watch-test.ts — vue Source File

Dependency Diagram

graph LR
  2d47972a_4de3_a62e_55da_d1e4cce26083["watch-test.ts"]
  451106ad_39e7_1c30_4a13_bb292ee7299e["./index"]
  2d47972a_4de3_a62e_55da_d1e4cce26083 --> 451106ad_39e7_1c30_4a13_bb292ee7299e
  3bc1859e_5f62_1ad0_1a20_c1ba96d0683f["utils.ts"]
  2d47972a_4de3_a62e_55da_d1e4cce26083 --> 3bc1859e_5f62_1ad0_1a20_c1ba96d0683f
  620797b4_7e39_eef5_c1bc_e0f39399ca9d["expectType"]
  2d47972a_4de3_a62e_55da_d1e4cce26083 --> 620797b4_7e39_eef5_c1bc_e0f39399ca9d
  2d9e76a6_6850_37a3_10b2_3172dcc30bcd["expectType"]
  2d47972a_4de3_a62e_55da_d1e4cce26083 --> 2d9e76a6_6850_37a3_10b2_3172dcc30bcd
  style 2d47972a_4de3_a62e_55da_d1e4cce26083 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import { ref, computed, watch, shallowRef } from '../../index'
import { expectType } from '../utils'

const source = ref('foo')
const source2 = computed(() => source.value)
const source3 = () => 1

// lazy watcher will have consistent types for oldValue.
watch(source, (value, oldValue) => {
  expectType<string>(value)
  expectType<string>(oldValue)
})

watch([source, source2, source3], (values, oldValues) => {
  expectType<[string, string, number]>(values)
  expectType<[string, string, number]>(oldValues)
})

// const array
watch([source, source2, source3] as const, (values, oldValues) => {
  expectType<Readonly<[string, string, number]>>(values)
  expectType<Readonly<[string, string, number]>>(oldValues)
})

// immediate watcher's oldValue will be undefined on first run.
watch(
  source,
  (value, oldValue) => {
    expectType<string>(value)
    expectType<string | undefined>(oldValue)
  },
  { immediate: true }
)

watch(
  [source, source2, source3],
  (values, oldValues) => {
    expectType<[string, string, number]>(values)
    expectType<[string | undefined, string | undefined, number | undefined]>(
      oldValues
    )
  },
  { immediate: true }
)

// const array
watch(
  [source, source2, source3] as const,
  (values, oldValues) => {
    expectType<Readonly<[string, string, number]>>(values)
    expectType<
      Readonly<[string | undefined, string | undefined, number | undefined]>
    >(oldValues)
  },
  { immediate: true }
)

// should provide correct ref.value inner type to callbacks
const nestedRefSource = ref({
  foo: ref(1)
})

watch(nestedRefSource, (v, ov) => {
  expectType<{ foo: number }>(v)
  expectType<{ foo: number }>(ov)
})

const someRef = ref({ test: 'test' })
const otherRef = ref({ a: 'b' })
watch([someRef, otherRef], values => {
  const value1 = values[0]
  // no type error
  console.log(value1.test)

  const value2 = values[1]
  // no type error
  console.log(value2.a)
})

{
  //#12978
  type Steps = { step: '1' } | { step: '2' }
  const shallowUnionGenParam = shallowRef<Steps>({ step: '1' })
  const shallowUnionAsCast = shallowRef({ step: '1' } as Steps)

  watch(shallowUnionGenParam, value => {
    expectType<Steps>(value)
  })
  watch(shallowUnionAsCast, value => {
    expectType<Steps>(value)
  })
}