search

DefinitelyTyped / DefinitelyTyped

The repository for high quality TypeScript type definitions.
Other
48.67k stars 30.18k forks source link

@types/vue2-datepicker does not compile using latest vue-class-component and vue #37270

Closed vi-jasonm closed 3 years ago

vi-jasonm commented 5 years ago

Using the @types/vue2-datepicker package you get the following error when compiling:

TS2345: Argument of type '{ components: { DatePicker: Component<any, any, any, { type?: string | undefined; range?: boolean | undefined; format?: string | undefined; lang?: string | Lang | undefined; clearable?: boolean | undefined; ... 15 more ...; rangeSeparator?: string | undefined; }>; }; }' is not assignable to parameter of type 'VueClass'. Object literal may only specify known properties, but 'components' does not exist in type 'VueClass'. Did you mean to write 'component'?

The error began when upgrading VueJS from version 2.5.17 to 2.6.10 and vue-class-component from 6.3.2 to 7.1.0.

@ChristianStornowski hoping you might have an idea about what needs to be updated to get this to compile! It was very useful with this datepicker control.

ChristianStornowski commented 5 years ago

Thanks for reporting this problem. I will create a new version for the latest vue js und vue2-datepicker soon.

ChristianStornowski commented 5 years ago

Can you provide me your dependencies in your package.json, your tsconfig.json and your code where vue2-datepicker is used?

I updated my tests with for my new and old TypeScript description and have no problems.

import Vue from 'vue';
import DatePicker from 'vue2-datepicker';
import Component from 'vue-class-component';

new Vue({
    el: '#app',
    components: {
        DatePicker
    },
    template: `
        <date-picker
            :placeholder="placeholder"
            v-model="dateOfBirth"
            format="YYYY-MM-DD"
            lang="en">
            <template slot="calendar-icon">
                <span class="input-datepicker__icon"></span>
            </template>
        </date-picker>
    `,
    data() {
        return { dateOfBirth: new Date() };
    }
});

@Component({
    components: {
        DatePicker
    },
    template: `
        <date-picker
            :placeholder="placeholder"
            v-model="dateOfBirth"
            format="YYYY-MM-DD"
            lang="en">
            <template slot="calendar-icon">
                <span class="input-datepicker__icon"></span>
            </template>
        </date-picker>
    `
})
class App extends Vue {
    dateOfBirth = new Date();
}
ChristianStornowski commented 5 years ago

I added a new pull request with my changes:

https://github.com/DefinitelyTyped/DefinitelyTyped/pull/37296

vi-jasonm commented 5 years ago

Sure... My package.json

    "dependencies": {
        "@aspnet/signalr": "^1.1.4",
        "babel-plugin-transform-decorators": "^6.24.1",
        "file-saver": "^1.3.8",
        "good-injector-vue": "^0.2.0",
        "html2pdf.js": "^0.9.0",
        "isomorphic-fetch": "^2.2.1",
        "iview": "^3.4.2",
        "linq": "^3.1.1",
        "tslib": "^1.9.3",
        "vue-headful": "^2.0.1",
        "vue-js-modal": "^1.3.26",
        "vue-mixin-decorator": "^1.0.0",
        "vue-multiselect": "^2.1.4",
        "vue-shortkey": "^3.1.7",
        "vue2-datepicker": "2.12.0",
        "vuex": "^3.0.1",
        "vuex-class": "^0.3.1",
        "vuex-i18n": "^1.10.5",
        "vuex-module-decorators": "^0.9.9"
    },
    "devDependencies": {
        "@types/file-saver": "^1.3.0",
        "@types/jest": "^23.3.14",
        "@types/lodash-es": "^4.17.1",
        "@vue/test-utils": "^1.0.0-beta.24",
        "babel-core": "^6.26.3",
        "babel-eslint": "^9.0.0",
        "babel-jest": "^23.4.2",
        "babel-loader": "^8.0.2",
        "babel-plugin-transform-async-to-generator": "^6.24.1",
        "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
        "babel-plugin-transform-runtime": "^6.23.0",
        "babel-polyfill": "^6.26.0",
        "babel-preset-env": "^1.7.0",
        "babel-preset-es2015": "^6.24.1",
        "babel-preset-stage-2": "^6.24.1",
        "babel-register": "^6.26.0",
        "clean-webpack-plugin": "^0.1.19",
        "cross-env": "^5.2.0",
        "css-loader": "^1.0.0",
        "file-loader": "^2.0.0",
        "git-revision-webpack-plugin": "^3.0.3",
        "jest": "^23.5.0",
        "jest-cli": "^23.5.0",
        "jest-vue-preprocessor": "^1.4.0",
        "lodash-es": "^4.17.10",
        "ncp": "^2.0.0",
        "resolve-url-loader": "^2.3.0",
        "style-loader": "^0.23.0",
        "ts-jest": "^23.1.4",
        "ts-loader": "^5.0.0",
        "typescript": "^3.0.3",
        "vue": "2.6.10",
        "vue-class-component": "^6.2.0",
        "vue-loader": "15.7.1",
        "vue-property-decorator": "8.2.1",
        "vue-router": "^3.0.1",
        "vue-server-renderer": "^2.5.17",
        "vue-template-compiler": "^2.6.10",
        "vue-template-es2015-compiler": "^1.6.0",
        "vue-ts-loader": "^0.0.3",
        "webpack": "^4.17.2",
        "webpack-cli": "3.3.6",
        "webpack-dev-server": "^3.1.8",
        "webpack-livereload-plugin": "^2.2.0",
        "webpack-visualizer-plugin": "^0.1.11"
    },

My tsconfig.json

{
    "compilerOptions": {
        "target": "es2017",
        "strict": true,
        "allowJs": true,
        "allowSyntheticDefaultImports": true,
        "lib": [
            "dom",
            "es5",
            "es2015.promise",
            "es2017",
            "es6"
        ],
        "module": "esnext",
        "moduleResolution": "node",
        "sourceMap": true,
        "experimentalDecorators": true,
        "emitDecoratorMetadata": true,
        "noEmitHelpers": false,
        "importHelpers": true,
        "noImplicitAny": true,
        "baseUrl": "./",
        "paths": {
            "@src/*": ["./src/*"]
        },
        "esModuleInterop": true
    },
    "include": [
        "src/**/*",
        "test/**/*"
    ],
    "exclude": [
        "node_modules"
    ]
}
<template>
    <div>
        <label class="es-label">{{ label }}</label>
        <date-picker class="date_picker" :class="[disabledClass]" :disabled="isDisabled" lang="en" 
            :not-before="notBefore" :not-after="notAfter" :placeholder="placeholder" 
            :format="format" v-model="value" type="date" @change="onChange($event)" 
            @clear="onClear($event)">
        </date-picker>
    </div>
</template>

<script lang="ts" src="./EsDateInput.ts"></script>
import { Mixins } from "vue-mixin-decorator";
import { Component, Prop, Ref } from "vue-property-decorator";
import DatePicker from "vue2-datepicker";

@Component({
    components: { DatePicker }
})
export default class EsDateInput extends (some mixins) {
... props and stuff ...
}

Hope this helps.

ChristianStornowski commented 5 years ago

Your need to install @types/vue2-datepicker as a devDependency first.

extends (some mixins) looks interesting. Can you post me the full line for export default class EsDateInput extends (some mixins) and those declaration? export default class MIXIN extends ... Those mixins or vue components have to extend from Vue.

import { Vue } from "vue-property-decorator";

After Changing your code to export default class EsDateInput extends Vue everything works fine on my side.

LbISS commented 4 years ago

I have the same error:

import DatePicker from 'vue2-datepicker';

@Component({
    components: { DatePicker }
})
export default class DateTimePicker extends Vue {

It seems that the reason here that @types/vue2-datepicker installs own copy of vue typings instead of using installed with vue. image

I'm not sure why. Vue-select (on the same screenshot) doesn't do that and works fine. It has "vue": ">=2.0.0" instead of "vue": ">=2.6.10" in vue2-datepicker folder. If i'm deleting 'node_modules' folder under 'vue2-datepicker' folder - everything starts to work as now vue2-datepicker get Vue typings from main version of package.

I have next package.json:

{
  ...
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.21",
    "@fortawesome/free-solid-svg-icons": "^5.10.1",
    "@fortawesome/vue-fontawesome": "^0.1.6",
    "@gemtmp/vue-keycloak-js": "^1.1.6",
    "axios": "^0.18.0",
    "core-js": "^2.6.5",
    "eslint-plugin-jest": "23.1.1",
    "moment": "^2.24.0",
    "p-queue": "^6.1.1",
    "vee-validate": "^2.2.7",
    "vue": "^2.6.10",
    "vue-class-component": "^7.0.2",
    "vue-gtm": "2.2.0",
    "vue-i18n": "^8.15.0",
    "vue-js-modal": "^1.3.31",
    "vue-loading-overlay": "^3.2.0",
    "vue-property-decorator": "^8.1.0",
    "vue-router": "^3.0.3",
    "vue-select": "^3.2.0",
    "vue-tables-2": "^1.4.70",
    "vue2-datepicker": "^3.3.0",
    "vuex": "^3.1.1",
    "vuex-module-decorators": "lbiss/vuex-module-decorators#build/fixActionsInheritance"
  },
  "devDependencies": {
    "@types/chai": "^4.1.0",
    "@types/jest": "^24.0.18",
    "@types/vue-select": "^2.5.0",
    "@types/vue2-datepicker": "^2.12.0",
    "@types/webpack-env": "^1.14.0",
    "@typescript-eslint/eslint-plugin": "2.9.0",
    "@typescript-eslint/parser": "2.9.0",
    "@vue/cli-plugin-babel": "^3.7.0",
    "@vue/cli-plugin-eslint": "^3.11.0",
    "@vue/cli-plugin-typescript": "^3.7.0",
    "@vue/cli-plugin-unit-jest": "^3.0.5",
    "@vue/cli-service": "^3.7.0",
    "@vue/test-utils": "1.0.0-beta.29",
    "babel-core": "7.0.0-bridge.0",
    "babel-eslint": "^10.0.3",
    "babel-jest": "^23.6.0",
    "chai": "^4.1.2",
    "eslint": "6.7.1",
    "eslint-plugin-import": "2.18.2",
    "eslint-plugin-vue": "6.0.1",
    "identity-obj-proxy": "^3.0.0",
    "jest": "^24.9.0",
    "jest-junit": "^9.0.0",
    "node-sass": "^4.12.0",
    "patch-package": "^6.1.2",
    "sass-loader": "^7.1.0",
    "testcafe": "^1.1.4",
    "ts-jest": "^24.1.0",
    "tslint": "^5.20.0",
    "typescript": "^3.4.3",
    "vue-jest": "^3.0.5",
    "vue-template-compiler": "^2.5.21"
  }
}

@ChristianStornowski Seems that may be something in dependencies should be changed.

LbISS commented 4 years ago

I have updated Vue from 2.6.10 to 2.6.11 and the issue has been gone. Seems like dependence "vue": ">=2.6.10" produce some unexpected behaviour.

ChristianStornowski commented 4 years ago

Thanks for you information. :-) I will release a new version with vue >= 2.6.11.

ChristianStornowski commented 4 years ago

Added https://github.com/DefinitelyTyped/DefinitelyTyped/pull/41341 and aligned with vue2-datepicker peerDependencies for vue js

orta commented 3 years ago

Hi thread, we're moving DefinitelyTyped to use GitHub Discussions for conversations the @types modules in DefinitelyTyped.

To help with the transition, we're closing all issues which haven't had activity in the last 6 months, which includes this issue. If you think closing this issue is a mistake, please pop into the TypeScript Community Discord and mention the issue in the definitely-typed channel.