Bugs in TypeScript + Nuxt?

Question

typescript

Hello everyone, just delving into TypeScript

here is the code

<template>
  <div class="content-table">
    <div class="content-table__row" v-for="(tr, index) in tables" :key="index">
      <input
        v-for="(td, tdIndex) in tr.values"
        :key="tdIndex"
        v-model="td.value"
        type="text"
        class="form-control"
        autocomplete="off"
        @keyup="returnTable"
      />
      <template v-if="index == 0">
        <button @click.prevent="addColumn()" class="btn btn-info">
          <IconRight />
        </button>
        <button @click.prevent="removeColumn()" class="btn btn-default">
          <IconDelete />
        </button>
      </template>
      <template v-else>
        <button @click.prevent="addRow()" class="btn btn-info">
          <IconDown />
        </button>
        <button
          @click.prevent="removeRow(index)"
          class="btn btn-default"
          v-if="index > 1"
        >
          <IconDelete />
        </button>
      </template>
    </div>
  </div>
</template>

<script lang="ts">
import IconDown from '@/static/icons/arrow-down.svg?inline'
import IconRight from '@/static/icons/arrow-right.svg?inline'
import IconDelete from '@/static/icons/delete.svg?inline'
import Vue from 'vue'

export default Vue.extend({
  components: {
    IconDelete,
    IconDown,
    IconRight,
  },
  props: {
    input: {
      type: Array,
      default: () => [
        {
          values: [
            {
              value: '',
            },
            {
              value: '',
            },
          ],
        },
        {
          values: [
            {
              value: '',
            },
            {
              value: '',
            },
          ],
        },
      ],
    },
  },
  data() {
    return {
      tables: this.input,
    }
  },
  methods: {
    addColumn() {
      this.tables.forEach((item: any) => {
        item.values.push({
          value: '',
        })
      })
    },
    removeColumn() {
      this.tables.forEach((item: any) => {
        if (item.values.length > 2) item.values.pop()
      })
      this.returnTable()
    },
    addRow() {
      const data: any = this.tables[0].values.slice()
      const input: any[] = []
      for (let i = 0; i < data.length; i++) {
        input.push({
          value: '',
        })
      }

      this.tables.push({
        values: input,
      })

      const lastIndex: number = this.tables.length - 1
      this.tables[lastIndex].values.forEach((item: any) => {
        item.value = ''
      })
      this.returnTable()
    },
    removeRow(index: number) {
      this.tables.splice(index, 1)
      this.returnTable()
    },
    returnTable() {
      this.$emit('input', this.tables)
    },
  },
})
</script>

and that's what swears at

ERROR  ERROR in components/modules/tables/TableDynamic.vue:96:25                         13:28:43
TS2571: Object is of type 'unknown'.
    94 |     },
    95 |     addRow() {
  > 96 |       const data: any = this.tables[0].values.slice()
       |                         ^^^^^^^^^^^^^^
    97 |       const input: any[] = []
    98 |       for (let i = 0; i < data.length; i++) {
    99 |         input.push({

ERROR in components/modules/tables/TableDynamic.vue:109:7
TS2571: Object is of type 'unknown'.
    107 |
    108 |       const lastIndex: number = this.tables.length - 1
  > 109 |       this.tables[lastIndex].values.forEach((item: any) => {
        |       ^^^^^^^^^^^^^^^^^^^^^^
    110 |         item.value = ''
    111 |       })
    112 |       this.returnTable()

Answer 1

try explicitly specifying the array via as
tables: this.input as []