2

我在 Typescript 中有一个 Vuejs 项目。项目编译并运行完美，没有错误。但是 TS linter 是错误的。

我在单个组件文件中使用组件装饰器，如下所示：

//videocard.component.vue

<script lang="ts">
    import Vue from 'vue';
    import { Component, Prop } from 'vue-property-decorator';
    import { Video } from '../interfaces/video.interface';

    @Component
    export default class VideoCardComponent extends Vue {

        @Prop() readonly video: Video;
        @Prop() readonly loading: boolean;

        created(){
            console.log(this.static_url); // !COMPLAINS HERE!
        }

        get _video(){
            return this.video
        }

        get _loading(){
            return this.loading || false;
        }
    }
</script>

请注意我是如何尝试注销名为static_url. 这是有效的，因为在我的 app.ts 文件中，我将这个属性设置为：

//app.ts

Vue.prototype.static_url = (window as any).static_url;

我增加了类型，所以static_url是 Vue 上的一个属性。像这样：

// static_url.d.ts

import Vue from 'vue';

declare module 'vue/types/vue' {
    interface Vue {
      static_url: string;
    }

    interface VueConstructor {
      static_url: string
    }
}

Typescript linter 不会抱怨app.ts文件中的这个属性，但它会抱怨组件文件中的这个属性。为什么 Typescript 在组件文件中无法识别此属性？

为了完整起见，这是我的tsconfig.json文件：

{
    "compilerOptions": {
        "target": "es5",
        "lib": ["esnext", "dom"],
        "strict": true,
        "module": "es2015",
        "noImplicitAny": false,
        "moduleResolution": "node",
        "experimentalDecorators": true,
        "strictPropertyInitialization": false
    },
    "include": [
        "assets/js/video-app/src/**/*.ts",
        "assets/js/video-app/src/**/*.d.ts",
    ]
}
4

2 回答 2

1

我认为你是如此接近，我能找到的唯一问题是include在tsconfig.json

您是否tsconfig.json放置在您的项目之外，所以您需要有assets/js/video-app/src路径？

通常，如果tsconfig.json在项目中，include应该如下所示。如果包含路径不正确，自定义类型定义将不起作用。

"include": [
   "src/**/*.ts"
]

你能检查一下是否也在目录static_url.d.ts内src。

我做了一个 git repo 来模拟你的情况，你可以交叉检查你的设置。

Git 回购

于 2021-05-13T09:05:42.880 回答
-1

如果在这种情况下类型准确性不重要，您可以执行以下操作：

(this as any).static_url

如果类型准确性是一个问题，那么我的 2 美分就是你不应该修改 Vue 原型......在我看来，这不是最佳实践（只是我的 PTSD 从调试项目中开始，默认对象原型被乱扔垃圾非标准属性，搞乱一切，创造各种讨厌的错误）。如果你有某种状态管理框架，比如 Vuex，我建议将这些数据存储在 Vuex 状态中。

或者破解一切，您不需要将数据从窗口对象复制到 Vue.prototype

(window as any).static_url
于 2021-05-21T12:58:17.763 回答