fix(types): UnwrapRef should bail on DOM element types.

fix #951
vuejs · Apr 12, 2020 · 828a536 · 828a536
1 parent ab16a06
commit 828a536
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 3 deletions.
diff --git a/packages/reactivity/src/ref.ts b/packages/reactivity/src/ref.ts
@@ -101,7 +101,7 @@ function toProxyRef<T extends object, K extends keyof T>(
 // corner case when use narrows type
 // Ex. type RelativePath = string & { __brand: unknown }
 // RelativePath extends object -> true
-type BaseTypes = string | number | boolean
+type BaseTypes = string | number | boolean | Element | Window | Document
 
 // Recursively unwraps nested value bindings.
 export type UnwrapRef<T> = {

diff --git a/test-dts/ref.test-d.ts b/test-dts/ref.test-d.ts
@@ -1,7 +1,7 @@
 import { expectType } from 'tsd'
 import { Ref, ref, isRef, unref } from './index'
 
-function foo(arg: number | Ref<number>) {
+function plainType(arg: number | Ref<number>) {
   // ref coercing
   const coerced = ref(arg)
   expectType<Ref<number>>(coerced)
@@ -22,4 +22,26 @@ function foo(arg: number | Ref<number>) {
   expectType<{ foo: number }>(nestedRef.value)
 }
 
-foo(1)
+plainType(1)
+
+function bailType(arg: HTMLElement | Ref<HTMLElement>) {
+  // ref coercing
+  const coerced = ref(arg)
+  expectType<Ref<HTMLElement>>(coerced)
+
+  // isRef as type guard
+  if (isRef(arg)) {
+    expectType<Ref<HTMLElement>>(arg)
+  }
+
+  // ref unwrapping
+  expectType<HTMLElement>(unref(arg))
+
+  // ref inner type should be unwrapped
+  const nestedRef = ref({ foo: ref(document.createElement('DIV')) })
+
+  expectType<Ref<{ foo: HTMLElement }>>(nestedRef)
+  expectType<{ foo: HTMLElement }>(nestedRef.value)
+}
+const el = document.createElement('DIV')
+bailType(el)