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?

Answer 1

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.