I've got suggested to use that way to define types (in Nuxt.js for all components manually and at the end, the data will be loaded with Axios using the "Repository Pattern"). For a small projects it's fine, but what about big projects with multiple data, types etc. Is there any way to automate it? Can i have some kind of "dynamic" Typescript classes?

Some data:

export const samplePage = [
    {
        buttons: [
            {
                size: 1,
                text: "Some text"
            }
        ]
    }
]

samplePage.model.ts

export class Button {
    size: number;
    text: string;

    constructor(button: Partial<Button> = {}) {
        this.size = 1;
       this.text = "";
    }
}

test.vue

<template>
  <div>
  </div>
</template>
<script lang="ts">
import { SamplePage } from "@/classes/models/samplePage.model"

import Vue from 'vue'
export default Vue.extend({
  data() {
    return {
        samplePage: samplePage
    }
  },
  mounted() {
    console.log("debug: samplePage", new SamplePage(this.samplePage[0]))
  },
  methods: {

  }
})
</script>
<style lang="scss" scoped>

</style>