fix(fromEvent): fix ts error: `Type 'null' is not assignable to type …

…'HTMLElement'`
vueuse · antfu · May 14, 2025 · Apr 25, 2025 · Apr 25, 2025 · Apr 26, 2025
commit 3bad4803d5cdbd89912abfb8f649bdadc8486b4b
diff --git a/packages/rxjs/README.md b/packages/rxjs/README.md
@@ -35,7 +35,9 @@ import { concatAll, map, mergeMap, pluck, scan, take } from 'rxjs/operators'
 import { ref } from 'vue'

 const BASE_URL = 'https://jsonplaceholder.typicode.com'
-const button = ref<HTMLButtonElement>(null)
+const button = ref<HTMLButtonElement | null>(null)
+// or use `useTemplateRef` in vue3.5+
+// const button = useTemplateRef('buttonRef')

 const posts = useObservable(
  fromEvent(button, 'click').pipe(

diff --git a/packages/rxjs/from/_demo.vue b/packages/rxjs/from/_demo.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import type { Ref } from 'vue'
 import { interval } from 'rxjs'
 import {
  map,
@@ -19,7 +18,7 @@ useSubscription(
  interval(1000)
    .pipe(
      mapTo(1),
-      takeUntil(fromEvent(button as Ref<HTMLButtonElement>, 'click')),
+      takeUntil(fromEvent(button, 'click')),
      withLatestFrom(from(count, {
        immediate: true,
        deep: false,

diff --git a/packages/rxjs/from/index.ts b/packages/rxjs/from/index.ts
@@ -10,7 +10,7 @@ export function from<T>(value: ObservableInput<T> | Ref<T>, watchOptions?: Watch
  return fromRxjs(value)
 }

-export function fromEvent<T extends HTMLElement>(value: MaybeRef<T>, event: string): Observable<Event> {
+export function fromEvent<T extends HTMLElement | null>(value: MaybeRef<T>, event: string): Observable<Event> {
  if (isRef<T>(value)) {
    return new Observable((subscriber) => {
      let innerSub: Subscription | undefined
@@ -23,5 +23,5 @@ export function fromEvent<T extends HTMLElement>(value: MaybeRef<T>, event: stri
      }, { immediate: true })
    })
  }
-  return fromEventRx(value, event)
+  return fromEventRx(value as NonNullable<T>, event)
 }
diff --git a/packages/rxjs/toObserver/_demo.vue b/packages/rxjs/toObserver/_demo.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import type { Ref } from 'vue'
 import { interval } from 'rxjs'
 import {
  map,
@@ -20,7 +19,7 @@ useSubscription(
  interval(1000)
    .pipe(
      mapTo(1),
-      takeUntil(fromEvent(button as Ref<HTMLButtonElement>, 'click')),
+      takeUntil(fromEvent(button, 'click')),
      withLatestFrom(from(count).pipe(startWith(0))),
      map(([total, curr]) => curr + total),
    )

diff --git a/packages/rxjs/toObserver/index.md b/packages/rxjs/toObserver/index.md
@@ -16,6 +16,8 @@ import { shallowRef } from 'vue'

 const count = shallowRef(0)
 const button = shallowRef<HTMLButtonElement | null>(null)
+// or use `useTemplateRef` in vue3.5+
+// const button = useTemplateRef('buttonRef')

 useSubscription(
  interval(1000)
-Original file line number
+Diff line change
@@ -35,7 +35,9 @@ import { concatAll, map, mergeMap, pluck, scan, take } from 'rxjs/operators'
     import { ref } from 'vue'
     const BASE_URL = 'https://jsonplaceholder.typicode.com'
-    const button = ref<HTMLButtonElement>(null)
+    const button = ref<HTMLButtonElement | null>(null)
             Copy link

  
      
    
  

  
      

  
  Member


      

  

  
    
      

      
            ilyaliao
  

      

      

      


        Apr 25, 2025


      
    

  


        
      
  
  
  
    

    There was a problem hiding this comment.


  

 
  
    

    Choose a reason for hiding this comment

    
      The reason will be displayed to describe this comment to others. Learn more.
    

    
      
      


  


  
    
      same here
    
  
  


    

        
      
  
  
    
  
  
  
    
    Sorry, something went wrong.
  

  
    
  
    
      

              Uh oh!

              
There was an error while loading. Please reload this page.


  
  


          
      
  
    
    
      
        
            
    All reactions
+    // or use `useTemplateRef` in vue3.5+
+    // const button = useTemplateRef('buttonRef')
     const posts = useObservable(
       fromEvent(button, 'click').pipe(
-          Expand Down