search

justinkames / vuejs-logger

Provides customizable logging functionality for Vue.js. Compatible with Vue2.
MIT License
244 stars 50 forks source link

Typescript definitions are not included the package #33

Open AThiyagarajan opened 4 years ago

AThiyagarajan commented 4 years ago

It would be good to include the definitions along with this package.

Right now the following code needs to be included in the VueJS app in order to make the typescript recognise them.

import Vue from 'vue';

declare module 'vue/types/vue' {
    export interface VueConstructor<V extends Vue = Vue> {
      $log: {
        debug(...args: any[]): void;
        info(...args: any[]): void;
        warn(...args: any[]): void;
        error(...args: any[]): void;
        fatal(...args: any[]): void;
      };
    }
}
justinkames commented 4 years ago

Will add this, thanks!

justinkames commented 4 years ago

@Thiyagarajan-A

I added an index.d.ts file. Can you check if this is working for you?

Type definitions are now included in /dist/lib/types/index.d.ts

npm i --save vuejs-logger@1.5.4-beta.2

https://www.npmjs.com/package/vuejs-logger/v/1.5.4-beta.2

Thanks!

AThiyagarajan commented 4 years ago

Not working in the latest version as well as the version you mentioned in the comment. vuejs-logger@1.5.4-beta.2 vuejs-logger@1.5.4

Issue 1 Vue.use(VueLogger, options); In this line it says install is missing in the type. (see the details below section). Issue 2 Type definition is also not working for this. Vue.$log.error('My error message'); Property '$log' does not exist on type 'VueConstructor<Vue>'.

Error Details for Issue 1:

// Register vue logger
const logModes = ['debug', 'info', 'warn', 'error', 'fatal'];
const options = {
  isEnabled: true,
  logLevel: logModes.indexOf(process.env.VUE_APP_LOGLEVEL) === -1 ? 'debug' : process.env.VUE_APP_LOGLEVEL,
  stringifyArguments: false,
  showLogLevel: true,
  showMethodName: true,
  separator: '|',
  showConsoleColors: true,
};

Vue.use(VueLogger, options);
No overload matches this call.
  Overload 1 of 2, '(plugin: PluginObject<{ isEnabled: boolean; logLevel: any; stringifyArguments: boolean; showLogLevel: boolean; showMethodName: boolean; separator: string; showConsoleColors: boolean; }> | PluginFunction<...>, options?: { ...; } | undefined): VueConstructor<...>', gave the following error.
    Argument of type 'typeof import("/Users/tambalav/Documents/ThiyagaDocs/GitBase/wem-learning-ui/node_modules/vuejs-logger/dist/index")' is not assignable to parameter of type 'PluginObject<{ isEnabled: boolean; logLevel: any; stringifyArguments: boolean; showLogLevel: boolean; showMethodName: boolean; separator: string; showConsoleColors: boolean; }> | PluginFunction<...>'.
      Property 'install' is missing in type 'typeof import("/Users/tambalav/Documents/ThiyagaDocs/GitBase/wem-learning-ui/node_modules/vuejs-logger/dist/index")' but required in type 'PluginObject<{ isEnabled: boolean; logLevel: any; stringifyArguments: boolean; showLogLevel: boolean; showMethodName: boolean; separator: string; showConsoleColors: boolean; }>'.
  Overload 2 of 2, '(plugin: PluginObject<any> | PluginFunction<any>, ...options: any[]): VueConstructor<Vue>', gave the following error.
    Argument of type 'typeof import("/Users/tambalav/Documents/ThiyagaDocs/GitBase/wem-learning-ui/node_modules/vuejs-logger/dist/index")' is not assignable to parameter of type 'PluginObject<any> | PluginFunction<any>'.
      Property 'install' is missing in type 'typeof import("/Users/tambalav/Documents/ThiyagaDocs/GitBase/wem-learning-ui/node_modules/vuejs-logger/dist/index")' but required in type 'PluginObject<any>'.ts(2769)
plugin.d.ts(6, 3): 'install' is declared here.
plugin.d.ts(6, 3): 'install' is declared here.
justinkames commented 4 years ago

Thanks @Thiyagarajan-A, let me check that.

AThiyagarajan commented 4 years ago

Thanks @Thiyagarajan-A, let me check that.

Thanks @justinkames, I think, it would be easy track if we keep the issue as open.

justinkames commented 4 years ago

@Thiyagarajan-A can you try again with version 1.5.5-beta.1, this should solve it. Will create 1.5.5 if it is ok.

AThiyagarajan commented 4 years ago

Okay! will do it right away.

AThiyagarajan commented 4 years ago

@Thiyagarajan-A can you try again with version 1.5.5-beta.1, this should solve it. Will create 1.5.5 if it is ok.

No still the issue is there. But with different error it seems.

No overload matches this call.
  Overload 1 of 2, '(plugin: PluginObject<{ isEnabled: boolean; logLevel: any; stringifyArguments: boolean; showLogLevel: boolean; showMethodName: boolean; separator: string; showConsoleColors: boolean; }> | PluginFunction<...>, options?: { ...; } | undefined): VueConstructor<...>', gave the following error.
    Argument of type 'typeof VueLogger' is not assignable to parameter of type 'PluginObject<{ isEnabled: boolean; logLevel: any; stringifyArguments: boolean; showLogLevel: boolean; showMethodName: boolean; separator: string; showConsoleColors: boolean; }> | PluginFunction<...>'.
      Type 'typeof VueLogger' is not assignable to type 'PluginObject<{ isEnabled: boolean; logLevel: any; stringifyArguments: boolean; showLogLevel: boolean; showMethodName: boolean; separator: string; showConsoleColors: boolean; }>'.
        Types of property 'install' are incompatible.
          Type 'PluginFunction<ILoggerOptions>' is not assignable to type 'PluginFunction<{ isEnabled: boolean; logLevel: any; stringifyArguments: boolean; showLogLevel: boolean; showMethodName: boolean; separator: string; showConsoleColors: boolean; }>'.
            Types of parameters 'Vue' and 'Vue' are incompatible.
              Type 'Vue.VueConstructor<import("/Users/tambalav/Documents/ThiyagaDocs/GitBase/wem-learning-ui/node_modules/vue/types/vue").Vue>' is not assignable to type 'import("/Users/tambalav/Documents/ThiyagaDocs/GitBase/wem-learning-ui/node_modules/vuejs-logger/node_modules/vue/types/vue").VueConstructor<import("/Users/tambalav/Documents/ThiyagaDocs/GitBase/wem-learning-ui/node_modules/vuejs-logger/node_modules/vue/types/vue").Vue>'.
                The types of 'extend(...).extend(...).extend(...).extend' are incompatible between these types.
                  Type '{ <Data, Methods, Computed, PropNames extends string = never>(options?: import("/Users/tambalav/Documents/ThiyagaDocs/GitBase/wem-learning-ui/node_modules/vue/types/options").ThisTypedComponentOptionsWithArrayProps<any, Data, Methods, Computed, PropNames> | undefined): import("/Users/tambalav/Documents/ThiyagaDocs/G...' is not assignable to type '{ <Data, Methods, Computed, PropNames extends string = never>(options?: import("/Users/tambalav/Documents/ThiyagaDocs/GitBase/wem-learning-ui/node_modules/vuejs-logger/node_modules/vue/types/options").ThisTypedComponentOptionsWithArrayProps<any, Data, Methods, Computed, PropNames> | undefined): import("/Users/tambal...'.
                    Types of parameters 'options' and 'definition' are incompatible.
                      Type 'FunctionalComponentOptions<Record<any, any>, any[]>' is not assignable to type 'ThisTypedComponentOptionsWithArrayProps<any, any, any, any, any>'.
                        Type 'FunctionalComponentOptions<Record<any, any>, any[]>' is not assignable to type 'ComponentOptions<any, any, any, any, any[], Record<any, any>>'.
                          Types of property 'render' are incompatible.
                            Type '((this: undefined, createElement: CreateElement, context: RenderContext<Record<any, any>>) => VNode | VNode[]) | undefined' is not assignable to type '((createElement: CreateElement, hack: RenderContext<Record<any, any>>) => VNode) | undefined'.
                              Type '(this: undefined, createElement: CreateElement, context: RenderContext<Record<any, any>>) => VNode | VNode[]' is not assignable to type '(createElement: CreateElement, hack: RenderContext<Record<any, any>>) => VNode'.
                                Types of parameters 'createElement' and 'createElement' are incompatible.
                                  Type 'Vue.CreateElement' is not assignable to type 'import("/Users/tambalav/Documents/ThiyagaDocs/GitBase/wem-learning-ui/node_modules/vuejs-logger/node_modules/vue/types/vue").CreateElement'.
                                    Types of parameters 'tag' and 'tag' are incompatible.
                                      Type 'string | import("/Users/tambalav/Documents/ThiyagaDocs/GitBase/wem-learning-ui/node_modules/vuejs-logger/node_modules/vue/types/vue").VueConstructor<import("/Users/tambalav/Documents/ThiyagaDocs/GitBase/wem-learning-ui/node_modules/vuejs-logger/node_modules/vue/types/vue").Vue> | ... 5 more ... | undefined' is not assignable to type 'string | Vue.VueConstructor<import("/Users/tambalav/Documents/ThiyagaDocs/GitBase/wem-learning-ui/node_modules/vue/types/vue").Vue> | Vue.FunctionalComponentOptions<any, import("/Users/tambalav/Documents/ThiyagaDocs/GitBase/wem-learning-ui/node_modules/vue/types/options").PropsDefinition<any>> | ... 4 more ... | und...'.
                                        Type 'VueConstructor<Vue>' is not assignable to type 'string | VueConstructor<Vue> | FunctionalComponentOptions<any, PropsDefinition<any>> | ComponentOptions<never, any, any, any, any, Record<...>> | AsyncComponentPromise<...> | AsyncComponentFactory<...> | (() => Component<...>) | undefined'.
                                          Type 'import("/Users/tambalav/Documents/ThiyagaDocs/GitBase/wem-learning-ui/node_modules/vuejs-logger/node_modules/vue/types/vue").VueConstructor<import("/Users/tambalav/Documents/ThiyagaDocs/GitBase/wem-learning-ui/node_modules/vuejs-logger/node_modules/vue/types/vue").Vue>' is not assignable to type 'Vue.VueConstructor<import("/Users/tambalav/Documents/ThiyagaDocs/GitBase/wem-learning-ui/node_modules/vue/types/vue").Vue>'.
                                            The types of 'extend(...).extend(...).extend(...).extend' are incompatible between these types.
                                              Type '{ <Data, Methods, Computed, PropNames extends string = never>(options?: import("/Users/tambalav/Documents/ThiyagaDocs/GitBase/wem-learning-ui/node_modules/vuejs-logger/node_modules/vue/types/options").ThisTypedComponentOptionsWithArrayProps<any, Data, Methods, Computed, PropNames> | undefined): import("/Users/tambal...' is not assignable to type '{ <Data, Methods, Computed, PropNames extends string = never>(options?: import("/Users/tambalav/Documents/ThiyagaDocs/GitBase/wem-learning-ui/node_modules/vue/types/options").ThisTypedComponentOptionsWithArrayProps<any, Data, Methods, Computed, PropNames> | undefined): import("/Users/tambalav/Documents/ThiyagaDocs/G...'.
                                                Types of parameters 'options' and 'definition' are incompatible.
                                                  Type 'FunctionalComponentOptions<Record<any, any>, any[]>' is not assignable to type 'ThisTypedComponentOptionsWithArrayProps<any, any, any, any, any>'.
                                                    Type 'FunctionalComponentOptions<Record<any, any>, any[]>' is not assignable to type 'ComponentOptions<any, any, any, any, any[], Record<any, any>>'.
                                                      Types of property 'render' are incompatible.
                                                        Type '((this: undefined, createElement: CreateElement, context: RenderContext<Record<any, any>>) => VNode | VNode[]) | undefined' is not assignable to type '((createElement: CreateElement, hack: RenderContext<Record<any, any>>) => VNode) | undefined'.
                                                          Type '(this: undefined, createElement: CreateElement, context: RenderContext<Record<any, any>>) => VNode | VNode[]' is not assignable to type '(createElement: CreateElement, hack: RenderContext<Record<any, any>>) => VNode'.
                                                            Types of parameters 'createElement' and 'createElement' are incompatible.
                                                              Type 'import("/Users/tambalav/Documents/ThiyagaDocs/GitBase/wem-learning-ui/node_modules/vuejs-logger/node_modules/vue/types/vue").CreateElement' is not assignable to type 'Vue.CreateElement'.
                                                                Types of parameters 'tag' and 'tag' are incompatible.
                                                                  Type 'string | Vue.VueConstructor<import("/Users/tambalav/Documents/ThiyagaDocs/GitBase/wem-learning-ui/node_modules/vue/types/vue").Vue> | Vue.FunctionalComponentOptions<any, import("/Users/tambalav/Documents/ThiyagaDocs/GitBase/wem-learning-ui/node_modules/vue/types/options").PropsDefinition<any>> | ... 4 more ... | und...' is not assignable to type 'string | import("/Users/tambalav/Documents/ThiyagaDocs/GitBase/wem-learning-ui/node_modules/vuejs-logger/node_modules/vue/types/vue").VueConstructor<import("/Users/tambalav/Documents/ThiyagaDocs/GitBase/wem-learning-ui/node_modules/vuejs-logger/node_modules/vue/types/vue").Vue> | ... 5 more ... | undefined'.
                                                                    Type 'VueConstructor<Vue>' is not assignable to type 'string | VueConstructor<Vue> | FunctionalComponentOptions<any, PropsDefinition<any>> | ComponentOptions<never, any, any, any, any, Record<...>> | AsyncComponentPromise<...> | AsyncComponentFactory<...> | (() => Component<...>) | undefined'.
  Overload 2 of 2, '(plugin: PluginObject<any> | PluginFunction<any>, ...options: any[]): VueConstructor<Vue>', gave the following error.
    Argument of type 'typeof VueLogger' is not assignable to parameter of type 'PluginObject<any> | PluginFunction<any>'.
      Type 'typeof VueLogger' is not assignable to type 'PluginObject<any>'.
        Types of property 'install' are incompatible.
          Type 'PluginFunction<ILoggerOptions>' is not assignable to type 'PluginFunction<any>'.
            Types of parameters 'Vue' and 'Vue' are incompatible.
              Type 'Vue.VueConstructor<import("/Users/tambalav/Documents/ThiyagaDocs/GitBase/wem-learning-ui/node_modules/vue/types/vue").Vue>' is not assignable to type 'import("/Users/tambalav/Documents/ThiyagaDocs/GitBase/wem-learning-ui/node_modules/vuejs-logger/node_modules/vue/types/vue").VueConstructor<import("/Users/tambalav/Documents/ThiyagaDocs/GitBase/wem-learning-ui/node_modules/vuejs-logger/node_modules/vue/types/vue").Vue>'.ts(2769)
AThiyagarajan commented 4 years ago

@justinkames I have updated my vuejs fro 2.6.10 to 2.6.11. Now the VueLogger issue is resolved.

But this issue still exists Property '$log' does not exist on type 'VueConstructor<Vue>'

justinkames commented 4 years ago

@Thiyagarajan-A Thanks for the quick reply! What TS version are you using?

I tested with :

"typescript": "3.7.5" "vue": "2.6.11"

Thanks!

Sample project dependencies for me are >

  "dependencies": {
    "vue": "^2.6.10",
    "vue-class-component": "^7.0.2",
    "vue-easy-toast": "1.0.5",
    "vue-property-decorator": "^8.3.0",
    "vuejs-logger": "1.5.5-beta.1"
  },
  "devDependencies": {
    "@types/jest": "^24.0.19",
    "@vue/cli-plugin-typescript": "^4.1.0",
    "@vue/cli-plugin-unit-jest": "^4.1.0",
    "@vue/cli-service": "^4.1.0",
    "@vue/test-utils": "1.0.0-beta.29",
    "typescript": "^3.7.5",
    "vue-template-compiler": "^2.6.10"
  }
AThiyagarajan commented 4 years ago

TS version is 3.7.3

"dependencies": {
    "@babel/polyfill": "^7.7.0",
    "axios": "^0.19.2",
    "core-js": "^2.6.5",
    "custom-event-polyfill": "^1.0.7",
    "iframe-coordinator": "^4.0.2",
    "url-polyfill": "^1.1.7",
    "vue": "2.6.11",
    "vue-class-component": "^7.0.2",
    "vue-property-decorator": "^8.1.0",
    "vue-router": "^3.0.3",
    "vuejs-logger": "^1.5.5-beta.1",
    "vuex": "^3.0.1"
  },
"devDependencies": {
    "@types/jest": "^23.1.4",
    "@vue/cli-plugin-babel": "^3.12.0",
    "@vue/cli-plugin-e2e-cypress": "^3.12.0",
    "@vue/cli-plugin-typescript": "^3.12.0",
    "@vue/cli-plugin-unit-jest": "^3.12.0",
    "@vue/cli-service": "^3.12.0",
    "@vue/test-utils": "1.0.0-beta.30",
    "babel-core": "7.0.0-bridge.0",
    "concurrently": "^5.0.2",
    "guid-typescript": "^1.0.9",
    "less": "^3.0.4",
    "less-loader": "^5.0.0",
    "lint-staged": "^8.1.5",
    "ts-jest": "^23.0.0",
    "typescript": "^3.4.3", // installed version is 3.7.3
    "vue-template-compiler": "^2.6.10"
  },
justinkames commented 4 years ago

Strange situation, I cannot reproduce it just yet.

AThiyagarajan commented 4 years ago

Strange situation, I cannot reproduce it just yet.

Let me create a basic vue app and test it from scratch.

justinkames commented 4 years ago

Thanks!

AThiyagarajan commented 4 years ago

https://github.com/Thiyagarajan-A/basic-vue

I am able to reproduce the issue. The exact repo is given in the link above.

justinkames commented 4 years ago

Thanks @Thiyagarajan-A im on it

garyo commented 4 years ago

I'm having the same issue; typescript@3.7.3, vue@2.6.11, vuejs-logger@1.5.5-beta.1:

ERROR in .../views/ShotDesigner.vue
124:9 Property '$log' does not exist on type 'VueConstructor<Vue>'.
    122 |     const shot = generateRandomShots(1, this.nShots+1, kind)[0]
    123 |     await projectStore.addShot(shot)
  > 124 |     Vue.$log.debug('Saved test shot', shot)
        |         ^

I was able to fix it with something like this, in a .d.ts file in my app. 

declare module 'vue/types/vue' {
   interface VueConstructor {
    // $log is both global and per-instance
    $log: {
      debug(...args: any[]): void;
      info(...args: any[]): void;
      warn(...args: any[]): void;
      error(...args: any[]): void;
      fatal(...args: any[]): void;
    };
  }
krbaio3 commented 4 years ago

I have the same problem with the version vuejs-logger@1.5.4.

I have running the version vuejs-logger@1.5.0 with the d.ts from version vuejs-logger@1.5.4 and install the es6-object-assign dependency.

I use:

  "vue": "^2.6.11",
  "typescript": "~3.7.5"
Glandos commented 4 years ago

Hi everyone, I am still struggling with Typescript import system. However, I found that this code is working for me:

// For unknown reason, we need the first import to declare $log on Vue
// and the second to get the correct plugin type
// eslint-disable-next-line @typescript-eslint/no-unused-vars
import VueLogger from 'vuejs-logger'
import VueLoggerPlugin from 'vuejs-logger/dist/vue-logger'

const debug = process.env.NODE_ENV !== 'production'
Vue.use(VueLoggerPlugin, {
// options
})

It works with vuejs-logger@1.5.4.

shivanaru commented 4 years ago

@justinkames

Thanks @Thiyagarajan-A im on it

Was this resolved? Running into same issue with TypeScript 3.8.3, Vue 2.6.11 and Vuejs-logger 1.10.2. Looks like the 1.10.2 version does not include the index.d.ts (type definition) file. Reverted to 1.5.4 and it has the Type Definition file. Is the versioning wrong? i.e. 1.10.2 older than 1.5.4?

Also had to do: export interface VueConstructor { $log: VueLogger; } to resolve the Property '$log' does not exist on type 'VueConstructor' issue and Vue.use(VueLogger as any, options); - to resolve : No overload matches this call. Overload 1 of 2, '(plugin: PluginObject<{ isEnabled: boolean; logLevel: any; stringifyArguments: boolean; showLogLevel: boolean; showMethodName: boolean; separator: string; showConsoleColors: boolean; }> | PluginFunction<...>, options?: { ...; } | undefined): VueConstructor<...>', gave the following error.

Hope these fixes gets baked into the next version.

ztnel commented 3 years ago

Hi everyone, I am still struggling with Typescript import system. However, I found that this code is working for me:

// For unknown reason, we need the first import to declare $log on Vue
// and the second to get the correct plugin type
// eslint-disable-next-line @typescript-eslint/no-unused-vars
import VueLogger from 'vuejs-logger'
import VueLoggerPlugin from 'vuejs-logger/dist/vue-logger'

const debug = process.env.NODE_ENV !== 'production'
Vue.use(VueLoggerPlugin, {
// options
})

It works with vuejs-logger@1.5.4.

Im using ts with vue 2.6.14 and "vuejs-logger": "^1.5.5", and this works for me. Here is what I have:

// /main.ts
import VueLoggerPlugin from "vuejs-logger/dist/vue-logger";
const isProduction = process.env.NODE_ENV === "production";

const options = {
  isEnabled: true,
  logLevel: isProduction ? "error" : "debug",
  stringifyArguments: false,
  showLogLevel: true,
  showMethodName: true,
  separator: "|",
  showConsoleColors: true,
};

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  vuetify,
  render: (h) => h(App),
}).$mount("#app");

Vue.use(VueLoggerPlugin, options);

Hope this helps someone.