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
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 };
}
...