Vue/Nuxt.js 的 TS 错误：属性 'latitude' 在类型 '(() => any) 上不存在 |计算选项<any>'

Question

我是 Vue.js 的新手，我在 Nuxt.js (v2.15.8) 应用程序上将它与 Typescript 一起使用。

下面的代码工作正常。

    export default Vue.extend({
        name: 'MyComponent',
        computed: {
            isLatitudeValid() {
                return this.form.latitude ? this.form.latitude >= -90 && this.form.latitude <= 90 : null;
            }
        },
        data: () => ({
            form: {
                address: null,
                city: null,
                postalCode: null,
                latitude: null,
                longitude: null
            }
        })
});

但是，当我尝试添加 props 时，出现 Typescript 错误，阻止我在 isLatitudeValid 函数中访问 this.form.latitude。

    export default Vue.extend({
        name: 'MyComponent',
        props: { // Just added this
            someProp: String
        },
        computed: {
            isLatitudeValid() {
                return this.form.latitude ? this.form.latitude >= -90 && this.form.latitude <= 90 : null;
                // TS errors shown : Property 'latitude' does not exist on type '(() => any) | ComputedOptions<any>'.
                // Property 'latitude' does not exist on type '() => any'.Vetur(2339)
            }
        },
        data: () => ({
            form: {
                address: null,
                city: null,
                postalCode: null,
                latitude: null,
                longitude: null
            }
        })
});

每当我添加 props.

时，Visual Studio Code/Vetur/Typescript 编译器似乎不再能够识别 this 属性

但是根据 this page（在“避免命名冲突”部分），我应该能够访问在 props 和 data 中定义的属性，只要属性名称不冲突。

我一定是遗漏了什么：我怎样才能让它发挥作用？

Answer 1

找到了修复它的方法：我需要定义 isLatitudeValid 函数的 return 类型：

export default Vue.extend({
        name: 'MyComponent',
        props: { // Just added this
            someProp: String
        },
        computed: {
            isLatitudeValid() : boolean | null {
                return this.form.latitude ? this.form.latitude >= -90 && this.form.latitude <= 90 : null; // Now compiles fine ! \o/
            }
        },
        data: () => ({
            form: {
                address: null,
                city: null,
                postalCode: null,
                latitude: null,
                longitude: null
            }
        })
});

来源：https://github.com/vuejs/vue/issues/8625#issuecomment-411687109

Vue/Nuxt.js 的 TS 错误：属性 'latitude' 在类型 '(() => any) 上不存在 |计算选项<any>'

TS error with Vue/Nuxt.js : Property 'latitude' does not exist on type '(() => any) | ComputedOptions<any>'

typescript

vue.js

vue-component

vuejs2

nuxt.js