Creating a typescript definition file for a vue package (vue-datetime)

Question

I am using Vue.js in combination with typescript. I would like to use the vue-datetime package in my project. The package has no typescript definition file yet so I'm trying to create a minimal version.

I have added a index.d.ts file to the node_modules/vue-datetime folder:

import Vue from 'vue';

declare class Datetime extends Vue { }
declare class DatetimePopup extends Vue { }

export default Datetime;
export { Datetime, DatetimePopup };

In my Vue component I can now import and use the package like this (note that I am using the vue-class-component package so the syntax might look a bit different than you're used to).

<template>
    <div>
        <v-datetimepicker v-model="someproperty" class="myclass"></v-datetimepicker>
    </div>
</template>

<script lang="ts">

    import Vue from 'vue';
    import Component from 'vue-class-component';
    import { Datetime } from 'vue-datetime';

    import 'vue-datetime/dist/vue-datetime.css';

    Vue.component('v-datetimepicker', Datetime);

    @Component({
        components: { Datetime }
    })
    export default class MyComponent extends Vue {

    }
</script>

<style>
</style>

This works, nice. The problem is that I don't want to save my node_modules folder to source control. Because of this I thought it would be a good idea to save the definition file to the same directory as my vue component (are there better options?).

I moved the index.d.ts file and renamed it to datepicker.d.ts. I also updated my vue component which now imports the datepicker like: import { Datetime } from './datepicker'. This will give me no compile errors, but opening the page will throw me the following Javascript error: Uncaught Error: Cannot find module './datepicker'.

I've been unsuccesful looking for solutions to this error online. Any ideas on what I could try or what is going wrong?

if you don't want to save node_modules folder to source control then why don't you just add it to .gitignore? — Adil H. Raza
– Adil H. Raza, Commented Feb 7, 2019 at 12:10
Well I have that but when I save the declaration file to the node_modules folder the file won't be distributed to other developers (since its ingnored by the .gitignore). And the file is required else the application won't compile. — JKL
– JKL, Commented Feb 7, 2019 at 12:12

JKL · Accepted Answer · 2019-10-12 23:28:24Z

9

Update

There has been a typed definition file added for the vue-datetime package in the DefinitelyTyped repository.

Original answer

Alright I've got it working. I had to do a couple of things.

1. Rename the declaration file datepicker.d.ts to MyComponent.d.ts. 'MyComponent' is the exact name of the Vue component in which I want to use the package. I'm not sure if it is necessary but I have the declaration file in the same folder as the component.

2. I changed the content of the declaration file to:

declare module 'vue-datetime' {
    import Vue from 'vue';
    class Datetime extends Vue { }
    class DatetimePopup extends Vue { }
    export { Datetime, DatetimePopup }
}

3. I changed the import line back from import { Datetime } from './datepicker' to import { Datetime } from 'vue-datetime';

Now it all compiles and I don't have any runtime errors.

edited Oct 12, 2019 at 23:28

answered Feb 7, 2019 at 13:13

JKL

1,0709 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Creating a typescript definition file for a vue package (vue-datetime)

1 Answer 1

Update

Original answer

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Update

Original answer

Comments

Your Answer

Sign up or log in

Post as a guest

Related