属性不存在

Question

ok may be a simple one but this has me puzzled

i have an SFC defined using

export default defineComponent({
    setup(): { args: Args; preview: Point[] } {
        const args = new Args();
        const preview: Point[] = [];
        args.values.push(...args.shape.shapeArgs.map((d) => d.default));
        return { args, preview: preview };
    },
    computed: {
        previewSize() {
            return {
                width: (Math.max(1, ...this.preview.map((p) => p.x)) + 40) * 10,
                height: (Math.max(1, ...this.preview.map((p) => p.y)) + 40) * 10,
            };
        },
...

however it wont run because

TS2339: Property 'preview' does not exist on type 'ComponentPublicInstance<{} | {}, {}, {}, {}, {}, EmitsOptions, {} | {}, {}, false, ComponentOptionsBase<{} | {}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, EmitsOptions, string, {}>>'.
  Property 'preview' does not exist on type '{ $: ComponentInternalInstance; $data: {}; $props: {} | {}; $attrs: Record<string, unknown>; $refs: Record<string, unknown>; $slots: Readonly<InternalSlots>; ... 7 more ...; $watch(source: string | Function, cb: Function, options?: WatchOptions<...> | undefined): WatchStopHandle; } & ... 4 more ... & ComponentCustom...'.
    56 |        previewSize() {
    57 |            return {
  > 58 |                width: (Math.max(1, ...this.preview.map((p) => p.x)) + 40) * 10,
       |                                            ^^^^^^^                          

as preview clearly is defined i'm puzzled as to why it doesn't exist

Answer 1

This is from the Vue3 typescript documentation about computed

import { defineComponent, ref, computed } from 'vue'

export default defineComponent({
  name: 'CounterButton',
  setup() {
    let count = ref(0)

    // read-only
    const doubleCount = computed(() => count.value * 2)

    const result = doubleCount.value.split('') // => Property 'split' does not exist on type 'number'
  }
})

You may try to do something like:

export default defineComponent({
    setup(): { args: Args; preview: Point[] } {
        const args = new Args();
        const preview: Point[] = [];
        args.values.push(...args.shape.shapeArgs.map((d) => d.default));
        const previewSize = computed(() => ({
                width: (Math.max(1, ...this.preview.map((p) => p.x)) + 
                40) * 10,
                height: (Math.max(1, ...this.preview.map((p) => p.y)) + 
                40) * 10,
            }))
        return { args, preview: preview, previewSize: previewSize };
    }
...