Как правильно передать массив объектов через пропсы VUE3 c поддержкой TS?

Передача массива объектов через пропсы в Vue.js с поддержкой TypeScript - это обычная практика в разработке приложений. Вот как это можно сделать правильно.

1. Определите интерфейс TypeScript для объектов, которые будут содержаться в массиве. Например, если у вас есть массив объектов типа "Person", определите интерфейс следующим образом:

interface Person {
  name: string;
  age: number;
}

2. В своем компоненте, в котором вы хотите передать массив объектов через пропсы, определите пропс типа Array с использованием определенного ранее интерфейса. Например:

import { defineComponent, PropType } from 'vue';

export default defineComponent({
  props: {
    people: {
      type: Array as PropType<Person[]>,
      required: true
    }
  },
  setup(props) {
    // Теперь вы можете использовать props.people в своем компоненте
  }
});

3. В родительском компоненте, при передаче массива объектов через пропс, убедитесь, что передаваемый массив соответствует определенному вами интерфейсу. Например:

<template>
  <ChildComponent :people="peopleArray" />
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import ChildComponent from './ChildComponent.vue';

interface Person {
  name: string;
  age: number;
}

export default defineComponent({
  components: {
    ChildComponent
  },
  data() {
    return {
      peopleArray: [
        { name: 'Alice', age: 30 },
        { name: 'Bob', age: 25 }
      ] as Person[]
    };
  }
});
</script>

Это позволит вам создавать более надежный и типобезопасный код при работе с массивами объектов во Vue.js с использованием TypeScript.