在 Vue & Typescript 中定義動態組件

Question

我有一個缺少類型檢查的簡單動態組件。 我怎樣才能進行正確的類型檢查而不是使用“任何”，這是唯一有效的方法。

<script>
...

interface {
  [key: string]: any
}

const pages: page = {
  Intro,
  Play,
  End,
}
</script>

<template>
  <component :is="pages[state.page]" />
</template>

Answer 1

嘗試這個！

interface page {
  Intro: VueComponent;
  Play: VueComponent;
  End: VueComponent;
}