fix: typescript error

package.json

@@ -21,7 +21,6 @@
   },
   "dependencies": {
     "@temir/core": "^0.0.18",
-    "@vue/runtime-core": "^3.2.38",
     "vue": "^3.2.38"
   }
 }

src/App.vue

@@ -1,20 +1,21 @@
 <script setup lang="ts">
-import { onMounted, ref } from '@vue/runtime-core'
+import { onMounted, ref } from 'vue'
 import { openRoom } from 'danmu-console-helper'
+import type { DanmuMsg, MsgHandler } from 'danmu-console-helper'
 import { TBox, TText } from '@temir/core'
-import DanmuMsg from './components/DanmuMsg.vue'
+import DanmuMsgCom from './components/DanmuMsgCom.vue'
 import TabSelector from './components/TabSelector.vue'
 
 const roomId = 652581
 const watchers = ref(0)
 const watchersHighlight = ref(false)
 const hot = ref(0)
 const hotHighlight = ref(false)
-const danmuList = ref([])
+const danmuList = ref<DanmuMsg[]>([])
 
 onMounted(() => {
   try {
-    const handler = {
+    const handler: MsgHandler = {
       onHeartbeat: (newHot) => {
         hot.value = newHot
         hotHighlight.value = true
@@ -56,8 +57,8 @@ onMounted(() => {
         <TabSelector />
       </TBox>
       <TBox :flex-grow="1" flex-direction="column" width="100%" :height="16" border-style="round">
-        <DanmuMsg :msg="msg" v-for="msg in danmuList" />
+        <DanmuMsgCom :msg="msg" v-for="msg in danmuList" />
       </TBox>
     </TBox>
   </TBox>
-</template>
+</template>

src/components/DanmuMsg.vue → src/components/DanmuMsgCom.vue

@@ -1,10 +1,9 @@
 <script setup lang="ts">
-import { onMounted, ref } from '@vue/runtime-core'
 import { TBox, TText } from '@temir/core'
-// import type { DanmuMsg } from 'danmu-console-helper'
+import type { DanmuMsg } from 'danmu-console-helper'
 
 const { msg } = defineProps<{
-  msg: string
+  msg: DanmuMsg
 }>()
 
 const addSpace = (str: string) => {
@@ -17,8 +16,8 @@ const addSpace = (str: string) => {
     <TBox>
       <TBox :flex-shrink="0">
         <TBox v-if="msg.user.badge" :margin-right="1">
-          <TText :background-color="msg.user.badge.bg_color" :flex-shrink="0">{{ addSpace(msg.user.badge.name) }}</TText>
-          <TText :color="msg.user.badge.bg_color" background-color="#ffffff">{{ addSpace(msg.user.badge.level) }}</TText>
+          <TText :background-color="msg.user.badge.color" :flex-shrink="0">{{ addSpace(msg.user.badge.name) }}</TText>
+          <TText :color="msg.user.badge.color" background-color="#ffffff">{{ addSpace(msg.user.badge.level.toString()) }}</TText>
         </TBox>
         <TText bold>{{ msg.user.uname }}: </TText>
       </TBox>

src/components/TabSelector.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref } from '@vue/runtime-core'
+import { computed, ref } from 'vue'
 import { TBox, TText } from '@temir/core'
 import { TTab, TTabs } from '@temir/tab'
 // import type { DanmuMsg } from 'danmu-console-helper'
@@ -8,13 +8,7 @@ const tabs = ['ALL', '弹幕', 'SC', '礼物']
 const activeIndex = ref(0)
 const selectedText = computed(() => tabs[activeIndex.value])
 
-const { msg } = defineProps<{
-  msg: string
-}>()
-
-const addSpace = (str: string) => {
-  return ' ' + str + ' '
-}
+const props = defineProps()
 </script>
 
 <template>

src/index.ts

@@ -6,17 +6,17 @@ const handler: MsgHandler = {
     console.log(`online: ${online}`);
   },
   onIncomeDanmu: (msg) => {
-    console.log(msg)
+    console.log(msg.user.uname, msg.content);
   },
   onIncomeDanmuRaw(data) {
-    console.log(data)
-  },
-  onWatchedChange: (newWatched) => {
-    console.log('newWatched', newWatched)
+    console.log(data.info)
   },
+  // onWatchedChange: (newWatched) => {
+  //   console.log('newWatched', newWatched)
+  // },
 }
 
-openRoom(652581, handler);
+openRoom(41682, handler);
 
 // const num = 6067854
 // const intToColorHex = (int: number) => {

src/shims.d.ts

@@ -0,0 +1,5 @@
+declare module '*.vue' {
+  import { type DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}

src/tsconfig.json

@@ -12,6 +12,5 @@
     "esModuleInterop": true,
     "lib": ["ESNext", "DOM"],
     "skipLibCheck": true
-  },
-  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
+  }
 }