-
Notifications
You must be signed in to change notification settings - Fork 309
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
コンポーネントのrefを追加する関数の型を修正 #1273
コンポーネントのrefを追加する関数の型を修正 #1273
Conversation
const addAudioCellRef = (audioCellRef: typeof AudioCell) => { | ||
if (audioCellRef) { | ||
audioCellRefs[audioCellRef.audioKey] = audioCellRef; | ||
let audioCellRefs: Record<AudioKey, InstanceType<typeof AudioCell>> = {}; |
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.
子コンポーネントの参照を保持するときは InstanceType
を使うべきだそうなので変更しています
https://ja.vuejs.org/guide/typescript/composition-api.html#typing-component-template-refs
const addAccentPhraseElem: VNodeRef = (elem) => { | ||
if (elem instanceof HTMLElement) { | ||
accentPhraseElems.push(elem); |
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.
こちらも同じエラーが出ていたので修正しました
こっちはHTMLElementを期待しているのでちょっとシンプル
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.
なるほど...!
なんとなく問題と解決策について理解しました!LGTMです!
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.
LGTM!!
ドキュメントのどこに記載されてるかわからなかったのですが、普通にTypeScriptのとこで探せばよかったんですね…😇
内容
ref
の型定義はこうなっています。addAudioCellRef
の型は(audioCellRef: typeof AudioCell) => void
です。(typeof AudioCell ≒ ComponenPublicInstance
)これが
(ref: Element | ComponentPublicInstance | null, refs: Record<string, any>) => void
と互換性がなくエラーになっていました(
(A | B) => void
を要求しているところにA => void
は入れられない。(A => void) | (B => void)
ならOK)addAudioCellRef
の型はVNodeRef
にしておき、中で型の絞り込みを行っています。また、
AudioCell
であることも分からないのでtype assertionしています。<audio-cell>
コンポーネントのref
を指定しているんだからvueが推論して欲しい気もしますね・・・関連 Issue