Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Typescript definitions are not included the package #33

Open
AThiyagarajan opened this issue Jan 28, 2020 · 21 comments
Open

Typescript definitions are not included the package #33

AThiyagarajan opened this issue Jan 28, 2020 · 21 comments
Assignees

Comments

@AThiyagarajan
Copy link

AThiyagarajan commented Jan 28, 2020

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
Copy link
Owner

Will add this, thanks!

@justinkames
Copy link
Owner

justinkames commented Jan 31, 2020

@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 [email protected]

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

Thanks!

@justinkames justinkames self-assigned this Jan 31, 2020
justinkames added a commit that referenced this issue Jan 31, 2020
Updated packages.
Added typescript support.
@AThiyagarajan
Copy link
Author

Not working in the latest version as well as the version you mentioned in the comment.
[email protected]
[email protected]

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
Copy link
Owner

Thanks @thiyagarajan-a, let me check that.

@AThiyagarajan
Copy link
Author

Thanks @thiyagarajan-a, let me check that.

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

@justinkames justinkames reopened this Feb 1, 2020
@justinkames
Copy link
Owner

@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
Copy link
Author

Okay! will do it right away.

@AThiyagarajan
Copy link
Author

@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
Copy link
Author

@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
Copy link
Owner

justinkames commented Feb 1, 2020

@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
Copy link
Author

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
Copy link
Owner

Strange situation, I cannot reproduce it just yet.

@AThiyagarajan
Copy link
Author

Strange situation, I cannot reproduce it just yet.

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

@justinkames
Copy link
Owner

Thanks!

@AThiyagarajan
Copy link
Author

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

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

@justinkames
Copy link
Owner

Thanks @thiyagarajan-a im on it

haube added a commit to haube/pkv-rechnung that referenced this issue Feb 2, 2020
@garyo
Copy link

garyo commented Feb 11, 2020

I'm having the same issue; [email protected], [email protected], [email protected]:

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
Copy link

krbaio3 commented Mar 8, 2020

I have the same problem with the version [email protected].

I have running the version [email protected] with the d.ts from version [email protected] and install the es6-object-assign dependency.

I use:

  "vue": "^2.6.11",
  "typescript": "~3.7.5"

@Glandos
Copy link

Glandos commented Mar 23, 2020

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 [email protected].

@shivanaru
Copy link

@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
Copy link

ztnel commented Oct 22, 2021

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 [email protected].

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

7 participants