diff --git a/client/ui/App.tsx b/client/ui/App.tsx
index cc68b14..a2e255d 100644
--- a/client/ui/App.tsx
+++ b/client/ui/App.tsx
@@ -4,7 +4,7 @@ import ChatFragment from "./chat/ChatFragment.jsx"
 import LoginDialog from "./dialog/LoginDialog.tsx"
 import ContactsListItem from "./main/ContactsListItem.jsx"
 import RecentsListItem from "./main/RecentsListItem.jsx"
-import useEventListener from './useEventListener.js'
+import useEventListener from './useEventListener.ts'
 import User from "../api/client_data/User.ts"
 import RecentChat from "../api/client_data/RecentChat.ts"
 
@@ -55,8 +55,8 @@ export default function App() {
     } as unknown as { [key: string]: User[] })
     const [navigationItemSelected, setNavigationItemSelected] = React.useState('Recents')
 
-    const navigationRailRef = React.useRef(null)
-    useEventListener(navigationRailRef, 'change', (event) => {
+    const navigationRailRef: React.MutableRefObject<NavigationRail | null> = React.useRef(null)
+    useEventListener(navigationRailRef as React.MutableRefObject<NavigationRail>, 'change', (event) => {
         setNavigationItemSelected((event.target as HTMLElement as NavigationRail).value as string)
     })
 
@@ -66,7 +66,7 @@ export default function App() {
     const registerButtonRef: React.MutableRefObject<Button | null> = React.useRef(null)
     const loginButtonRef: React.MutableRefObject<Button | null> = React.useRef(null)
 
-    useEventListener(loginButtonRef, 'click', async () => {
+    useEventListener(loginButtonRef as React.MutableRefObject<Button>, 'click', async () => {
         const account = inputAccountRef.current!.value
         const password = inputPasswordRef.current!.value
 
diff --git a/client/ui/useEventListener.js b/client/ui/useEventListener.js
deleted file mode 100644
index e03f2c9..0000000
--- a/client/ui/useEventListener.js
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * @callback callback
- * @param { Event } event 
- */
-
-import * as React from 'react'
-
-/**
- * 绑定事件
- * @param { React.Ref } ref 
- * @param { String } eventName 
- * @param { callback } callback 
- */
-export default function useEventListener(ref, eventName, callback) {
-    React.useEffect(() => {
-        ref.current.addEventListener(eventName, callback)
-        return () => ref.current.removeEventListener(eventName, callback)
-    }, [ref, eventName, callback])
-}
diff --git a/client/ui/useEventListener.ts b/client/ui/useEventListener.ts
new file mode 100644
index 0000000..1cd89cc
--- /dev/null
+++ b/client/ui/useEventListener.ts
@@ -0,0 +1,8 @@
+import * as React from 'react'
+
+export default function useEventListener<T extends HTMLElement>(ref: React.MutableRefObject<T>, eventName: string, callback: (event: Event) => void) {
+    React.useEffect(() => {
+        ref.current.addEventListener(eventName, callback)
+        return () => ref.current.removeEventListener(eventName, callback)
+    }, [ref, eventName, callback])
+}