コンポーネントのrefを追加する関数の型を修正 (VOICEVOX#1273)

VNodeRefを使う
AKIRA-natsu · Apr 3, 2023 · 1c22078 · 1c22078
1 parent ddd2fdd
commit 1c22078
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 8 deletions.
diff --git a/src/components/AudioDetail.vue b/src/components/AudioDetail.vue
@@ -264,6 +264,7 @@ import {
   onUnmounted,
   reactive,
   ref,
+  VNodeRef,
   watch,
 } from "vue";
 import { useQuasar } from "quasar";
@@ -529,8 +530,8 @@ const nowPlayingContinuously = computed(
 
 const audioDetail = ref<HTMLElement>();
 let accentPhraseElems: HTMLElement[] = [];
-const addAccentPhraseElem = (elem: HTMLElement) => {
-  if (elem) {
+const addAccentPhraseElem: VNodeRef = (elem) => {
+  if (elem instanceof HTMLElement) {
     accentPhraseElems.push(elem);
   }
 };

diff --git a/src/views/EditorHome.vue b/src/views/EditorHome.vue
@@ -166,7 +166,7 @@
 
 <script setup lang="ts">
 import path from "path";
-import { computed, onBeforeUpdate, onMounted, ref, watch } from "vue";
+import { computed, onBeforeUpdate, onMounted, ref, VNodeRef, watch } from "vue";
 import draggable from "vuedraggable";
 import { QResizeObserver, useQuasar } from "quasar";
 import cloneDeep from "clone-deep";
@@ -353,12 +353,12 @@ const updateAudioDetailPane = async (height: number) => {
   audioDetailPaneHeight.value = height;
   await updateSplitterPosition("audioDetailPaneHeight", height);
 };
-
 // component
-let audioCellRefs: Record<AudioKey, typeof AudioCell> = {};
-const addAudioCellRef = (audioCellRef: typeof AudioCell) => {
-  if (audioCellRef) {
-    audioCellRefs[audioCellRef.audioKey] = audioCellRef;
+let audioCellRefs: Record<AudioKey, InstanceType<typeof AudioCell>> = {};
+const addAudioCellRef: VNodeRef = (audioCellRef) => {
+  if (audioCellRef && !(audioCellRef instanceof Element)) {
+    const typedAudioCellRef = audioCellRef as InstanceType<typeof AudioCell>;
+    audioCellRefs[typedAudioCellRef.audioKey] = typedAudioCellRef;
   }
 };
 onBeforeUpdate(() => {