Cara mengisytiharkan data tatasusunan objek dalam vue.js + typescript

Question

Saya mempunyai kod ini dalam vue.js 3 + skrip taip, saya hanya mahu mengisytiharkan tatasusunan objek dalam data, tetapi beberapa ralat muncul

<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, teks, nama pengguna dan jenis seperti "nombor" atau "rentetan" tidak boleh diberikan kepada jenis "tidak pernah". ts(2322) Kerana dalam data apabila mengisytiharkan item dengan tatasusunan kosong ia mengatakan property:never dan saya ingin mengisytiharkan sesuatu seperti ini: {id:number, body:string,username:string, likes:number}[]

Jika tidak betul, apakah cara yang betul untuk mengendalikan pengisytiharan ini menggunakan skrip taip atau mungkin saya perlu mengkonfigurasi tsconfig.json atau sesuatu

Terima kasih terlebih dahulu Oh, apl itu berfungsi hebat! !

Ini tsconfig.json saya:

{
  "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"
  ]
}

Ini vue.config.js saya

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

Konfigurasi babel saya

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

my shims-vue.d.ts

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

dan .eslintrc.js saya

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'
  }
}

Hanya konfigurasi lalai dengan vue create app-name

Answer 1

Menentukan tatasusunan item dengan jenis lebih awal daripada masa harus membetulkan ralat TypeScript. Sesuatu seperti ini sepatutnya berfungsi:

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