Comment déclarer les données du tableau d'objets dans vue.js + typescript

Question

J'ai ce code dans vue.js 3 + dactylographié, je veux juste déclarer un tableau d'objets dans les données, mais plusieurs erreurs apparaissent

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

l'identifiant, le texte, le nom d'utilisateur et les types similaires "numéro" ou "chaîne" ne peuvent pas être attribués au type "jamais". cs(2322) Parce que dans les données, lors de la déclaration d'un élément avec un tableau vide, il est indiqué property:never et je veux déclarer quelque chose comme ceci : {id:number, body:string,username:string, likes:number}[]

Si ce n'est pas correct, quelle est la bonne façon de gérer cette déclaration à l'aide de TypeScript ou peut-être dois-je configurer tsconfig.json ou quelque chose comme ça

Merci d'avance Oh, l'application fonctionne très bien ! !

Voici mon 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"
  ]
}

Voici mon vue.config.js

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

Ma configuration Babel

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

mes cales-vue.d.ts

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

et mon .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'
  }
}

Juste la configuration par défaut avec vue create app-name

Answer 1

La définition à l'avance d'un tableau d'éléments avec des types devrait corriger les erreurs TypeScript. Quelque chose comme ceci devrait fonctionner :

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