Как описать дерево разделов во vue с typescript?

Question

[Вячеслав Шевченко]

Всем привет. Как во vue в props описать дерево разделов. id раздела это число, но не как у классического массива, по порядку, а может быть любым (ID из базы).

Для начала я описал сам раздел section.ts:

export default interface Section {
  id: number,
  children: Map<number, Section> //набор из самих секций. Не уверен, что правильно.
}

Далее в компоненте SectionsSelectTree пытаюсь описать props, но не пойму как это сделать:

<template>
  <template v-for="section in sections">
    <option :value="section.id">
      <template v-for="i in depth">-</template>{{ section.name }}
    </option>
    <SectionsSelectTree v-if="section.children" :sections="section.children" :depth="depth+1"/>
  </template>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import type Section from "@/modules/Personal/types/Section";
import { type PropType } from "vue";

export default defineComponent({
  name: "SectionsSelectTree",
  props: {
    sections: {
      type: Object as Section[] // уверен что это не верно, но как не знаю. Map<number, Section> - выдаёт проходит, но выдаёт ошибку: Property 'children' does not exist on type '[number, Section]'. Причём выдаёт уже я так понимаю при вызове  SectionsSelectTree из него, т.е. SectionsSelectTree.
    },
    depth: {
      type: Number,
      default: 0
    }
  },
  mounted() {
   
  }
});
</script>

<style scoped>

</style>

Подскажите как описать набор элементов типа

Answer 1

[WapSter]

Array as PropType<Section[]>