Define dynamic component in Vue & Typescript

Question

I have a simple dynamic component which is missing type checking. How can I do proper type checking instead of using 'any', which is the only thing that worked.

<script>
...

interface {
  [key: string]: any
}

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

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

Answer 1

Try this!

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