我在vue.js 3 typescript中有這段代碼，我只想在我的資料中宣告一個物件陣列，但是彈出幾個錯誤
<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、body、username 和 likesyyyyyyyyyyyy 型別“數字”或“字串”不可分配給型別“從不”.ts(2322)，因為在資料中，當宣告具有空陣列的專案時，它會顯示屬性：從不，我想宣告一些東西像這樣：{id:number, body:string,username:string, likes:number}[]
如果不正確，使用打字稿處理此宣告的正確方法是什么，或者我可能需要配置 tsconfig.json 或其他東西
在此先感謝哦，該應用程式運行良好！
這是我的 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"
]
}
這是我的 vue.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true
})
我的通天塔配置
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
]
}
我的 shims-vue.d.ts
/* eslint-disable */
declare module '*.vue' {
import type { DefineComponent } from 'vue'
const component: DefineComponent<{}, {}, any>
export default component
}
和我的 .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'
}
}
只是帶來 vue create app-name 的默認配置
uj5u.com熱心網友回復：
提前使用型別定義 items 陣列應該可以修復 TypeScript 錯誤。像這樣的東西應該作業：
items: [] as { id: number, body: string, username: string, likes: number }[]
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/507931.html