So deklarieren Sie Daten eines Objektarrays in vue.js + Typoskript

Ich habe diesen Code in vue.js 3 + Typoskript, ich möchte nur ein Array von Objekten in den Daten deklarieren, aber es tauchen mehrere Fehler auf

<template>
  <ul >
    <li v-if="!items.length">...loading</li>
    <li v-for="item in items" :key="item.id">
        <!--{{item}}-->
        <!--donde va {{item}} pongo un slot tag con un name y binding el item que voy a utilizar en el parent-->
        <slot name="item" v-bind="item"></slot>

    </li>
  </ul>
</template>

<script lang="ts">
import { defineComponent } from 'vue'


export default defineComponent({
    name: 'child-slot-component',
    data() {
    return {
        items: []
    }
  },
    mounted() {
        setTimeout(() => {
      this.items = [
        { id: 1, body: 'Scoped Slots Guide', username: 'Evan You', likes: 20 },
        { id: 2, body: 'Vue Tutorial', username: 'Natalia Tepluhina', likes: 10 }
      ]
    }, 1000)
    },
})
</script>

<style  scoped>
    ul{
        list-style-type: none;
    }

</style>

ID, Text, Benutzername und der Like-Typ „Nummer“ oder „Zeichenfolge“ können nicht dem Typ „Nie“ zugewiesen werden. ts(2322) Denn in den Daten steht bei der Deklaration eines Elements mit einem leeren Array property:never und ich möchte so etwas deklarieren: {id:number, body:string,username:string, likes:number}[]

Wenn nicht korrekt, wie gehe ich mit dieser Deklaration mithilfe von Typoskript richtig um? Vielleicht muss ich tsconfig.json oder etwas anderes konfigurieren

Vielen Dank im Voraus Oh, die App funktioniert großartig! !

Das ist meine tsconfig.json:

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,
    "useDefineForClassFields": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

Das ist meine vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true
})

Meine Babel-Konfiguration

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
}

meine Shims-vue.d.ts

/* eslint-disable */
declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}

und mein .eslintrc.js

module.exports = {
  root: true,
  env: {
    node: true
  },
  'extends': [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/typescript/recommended'
  ],
  parserOptions: {
    ecmaVersion: 2020
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  }
}

Nur die Standardkonfiguration mit Vue Create App-Name

P粉818317410393 Tage vor755

So deklarieren Sie Daten eines Objektarrays in vue.js + Typoskript

Antworte allen(1)Ich werde antworten