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
