El siguiente componente:
<template lang="html"> <div> <p>{{ bar }}</p> </div> </template> <script lang="ts"> import Vue from 'vue'; export const FooBar = Vue.extend({ computed: { bar: function() { return this.foo; } }, data: function() { return { foo: 'bar', }; }, }); export default FooBar; </script>Resultados en un error de tipo:
13:19 Property 'foo' does not exist on type 'CombinedVueInstance<Vue, unknown, unknown, unknown, Readonly<Record<never, any>>>'. 11 | computed: { 12 | bar: function() { > 13 | return this.foo; | ^ 14 | } 15 | }, 16 | data: function() { Version: typescript 4.1.6Este tipo de errores no ocurren cuando se usa la sintaxis de componentes de estilo de clase, pero preferiría no usar esa sintaxis. ¿Existe un enfoque recomendado para definir tipos en los componentes de VueJS?
Reproducción completa/mínima del repositorio aquí: https://github.com/davidRoussov/vue-typescript-error
Como se menciona en la sección Soporte de TypeScript de la documentación de Vue:
En tu caso, deberías cambiar bar: function() { a bar: function(): string {
Es posible que encuentre el mismo error si tiene un método render() que devuelve un valor, sin una anotación: VNode.
Según los documentos :
Debido a la naturaleza circular de los archivos de declaración de Vue, TypeScript puede tener dificultades para inferir los tipos de ciertos métodos. Por este motivo, es posible que deba anotar el tipo de valor devuelto en métodos como render y en los que se calculan.
Por lo tanto, intente esto:
computed: { bar: function(): string { return this.foo; } }