vue使用ts时总是用any

Posted 2023-03-09

参考技术A vue+ts any类型警告 Unexpected any. Specify a different type.eslint(@typescript-eslint/no-explicit-any)
关闭any类型警告:

我用的是vue/cli 4.5.6，可以在package.json里的rules加入规则:

"@typescript-eslint/no-explicit-any": ["off"]
另外可以在.eslintrc.js中的rules 添加上面代码即可。

Vue/Nuxt.js 的 TS 错误：类型 '(() => any) 上不存在属性'纬度' | ComputedOptions<任何>'

【中文标题】Vue/Nuxt.js 的 TS 错误：类型 \'(() => any) 上不存在属性\'纬度\' | ComputedOptions<任何>\'

【英文标题】：TS error with Vue/Nuxt.js : Property 'latitude' does not exist on type '(() => any) | ComputedOptions<any>'Vue/Nuxt.js 的 TS 错误：类型 '(() => any) 上不存在属性'纬度' | ComputedOptions<任何>'

【发布时间】：2021-12-17 11:21:03

【问题描述】：

我是 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 中定义的属性。

我一定是错过了什么：我怎样才能让它工作？

【参考方案1】：

找到了解决方法：我需要定义isLatitudeValid函数的返回类型：

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