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

Question

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

Answer 1

提前使用类型定义项目数组应该可以修复 TypeScript 错误。像这样的东西应该有效：

items: [] as { id: number, body: string, username: string, likes: number }[]