我很难弄清楚我做错了什么,使得TypeScript无法理解props.user
是UserInterface
类型。任何建议或指针都会很棒。
vue@3.1.1,typescript@4.2.2,quasar@2.0.0-rc.3. 这感觉更像是原生VueJS或TypeScript问题,而不是与Quasar有关的任何事情。
参考UserInterface:
export default interface UserInterface {
id: number,
email: string,
name: string,
agent_id: string
}
组件:
<template>
<q-avatar :color="color" :text-color="textColor" :size="size" :title="user.name" style="outline: 2px solid #ffffff">
{{ initials(user.name) }}
</q-avatar>
</template>
<script lang="ts">
import UserInterface from 'logic/interfaces/UserInterface'
import {computed, defineComponent, PropType} from 'vue'
const colors: Record<string, string> = {
A: 'blue',
K: 'black',
R: 'purple',
S: 'primary'
}
export default defineComponent({
name: 'UserIcon',
props: {
user: {
type: Object as PropType<UserInterface>,
required: true
},
size: {
type: String,
required: false,
default: 'lg',
validator: function (value: string) {
return ['xs', 'sm', 'md', 'lg', 'xl'].indexOf(value) !== -1
}
},
textColor: {
type: String,
required: false,
default: 'white'
}
},
setup (props) {
const initial = props.user.agent_id.charAt(0)
const color = computed(() => {
return colors[initial] || 'green'
})
return {
color,
initials (name: string) {
const names = name.split(' ')
let initials = names[0].charAt(0)
if (names.length > 1) {
initials += names[names.length - 1].charAt(0)
}
return initials
}
}
}
})
</script>
VueJS 3文档https://v3.vuejs.org/guide/typescript-support.html#using-with-composition-api指出:
在setup()函数中,您无需为props参数传递类型,因为它将从组件选项中的props中推断出类型。
然而,我仍然遇到了编译错误,并不确定自己缺少了什么。
结果:
Failed to compile.
TS2339: Property 'user' does not exist on type 'Readonly<LooseRequired<Readonly<{ [x: number]: string; } & { length?: number | undefined; toString?: string | undefined; toLocaleString?: string | undefined; concat?: string[] | undefined; join?: string | undefined; ... 15 more ...; includes?: ((searchElement: string, fromIndex?: number | undefined) => boolean) | un...'.
38 | },
39 | setup (props) {
> 40 | const initial = props.user.agent_id.charAt(0)
| ^^^^
41 | const color = computed(() => {
42 | return colors[initial] || 'green'
43 | })
注意:
在有问题的代码行上方添加 @ts-ignore
确实可以去除错误,但这并没有解决问题。
我尝试删除 node_modules 并重新启动所有内容以确保它不是故障。
它正在运行在 Docker 镜像中。