Cara mengisytiharkan data tatasusunan objek dalam vue.js + typescript
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
