vuepress / vuepress-community

:bulb: Community supported ecosystem for VuePress
https://vuepress-community.netlify.app
MIT License
81 stars 62 forks source link

[Bug Report] Unable to use the computed var in ts #7

Closed Mister-Hope closed 4 years ago

Mister-Hope commented 4 years ago

Describe the bug

  computed: {
    copyright() {
      const author = this.$themeConfig.author || this.$siteTitle;
      const content = {
        'zh-CN': `${this.html}\n-----\n著作权归${author}所有。\n链接:${location}`,
        'en-US': `${this.html}\n-----\nCopyright by ${author}.\nLink: ${location}`
      };

      return content[this.$lang];
    }
  },

This will cause issue on the linter since the default vue object doesn't have a $themeConfig or $siteTitle property.

Mister-Hope commented 4 years ago

I have a look carefully and found vuepress-type seems be the work around , but it is not dependent by vuepress-plugin-typescript, so did you miss it in the package.json?

Mister-Hope commented 4 years ago

image

meteorlxy commented 4 years ago

vuepress-types is a experimental package and not necessary, so I didn't add it to the dependencies of vuepress-plugin-typescript.

I'll update the documentation for this.

Mister-Hope commented 4 years ago

But after I add vuepress-types, I am still catching problems like the sreenshot above.

meteorlxy commented 4 years ago

But after I add vuepress-types, I am still catching problems like the sreenshot above.

You need to import it manually

Mister-Hope commented 4 years ago

Thanks, but how to import it? Do you mean like this? Or maybe in the tsconfig.json?

<script lang="ts">
import 'vuepress-types';
import Vue from 'vue';

export default Vue.extend({
  props: {
    html: { type: String, default: '' }
  },

  data: () => ({ location: '' }),

  computed: {
    copyright() {
      const author = this.$themeConfig.author || this.$siteTitle;
      const content = {
        'zh-CN': `${this.html}\n-----\n著作权归${author}所有。\n链接:${location}`,
        'en-US': `${this.html}\n-----\nCopyright by ${author}.\nLink: ${location}`
      };

      return content[this.$lang];
    }
  },

  created() {
    this.location = window.location;
  }
});
</script>

The code above is still catching errors.

meteorlxy commented 4 years ago

Have you installed vuepress-types?

BTW, it's better to use vue-class-component and vue-property-decorator for better types checking

meteorlxy commented 4 years ago

Documentation updated:

Mister-Hope commented 4 years ago

I still have a problems, I have vuepress-types installed in the root folder (since I am using monorepo), then I got this

Uncaught Error: Cannot find module 'vuepress-types'
    at webpackMissingModule (webpack-internal:///../node_modules/ts-loader/index.js?!../node_modules/@vuepress/core/node_modules/cache-loader/dist/cjs.js?!../node_modules/vue-loader/lib/index.js?!../packages/components/src/BreadCrumb.vue?vue&type=script&lang=ts&:9)
    at eval (webpack-internal:///../node_modules/ts-loader/index.js?!../node_modules/@vuepress/core/node_modules/cache-loader/dist/cjs.js?!../node_modules/vue-loader/lib/index.js?!../packages/components/src/BreadCrumb.vue?vue&type=script&lang=ts&:9)
    at Object.../node_modules/ts-loader/index.js?!../node_modules/@vuepress/core/node_modules/cache-loader/dist/cjs.js?!../node_modules/vue-loader/lib/index.js?!../packages/components/src/BreadCrumb.vue?vue&type=script&lang=ts& (app.js:2046)
    at __webpack_require__ (app.js:770)
    at fn (app.js:130)
    at eval (webpack-internal:///../packages/components/src/BreadCrumb.vue?vue&type=script&lang=ts&:2)
    at Module.../packages/components/src/BreadCrumb.vue?vue&type=script&lang=ts& (app.js:2761)
    at __webpack_require__ (app.js:770)
    at fn (app.js:130)
    at eval (webpack-internal:///../packages/components/src/BreadCrumb.vue:3)

While vscode can found it.

image

image

❤️

Mister-Hope commented 4 years ago

I am catching problems about vuepress-types. Here is the errors, when I include it in my tsconfig.json image

And here is the error I use import "vuepress-types"

image

The fist one only causes error on the console panel, but the website works well while the second one is not working. I am sure vuepress-types is required as dependencies. I am not familiar how node and ts-loader handles a packages only have types options declared.

I wounder if you can help me, thanks.

meteorlxy commented 4 years ago

You can check the test cases.

If you still meet some problems, try to open a new issue and provide a reproduce repo

lock[bot] commented 4 years ago

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.