Question

我将Vue.js与Typescript结合使用。我想在项目中使用vue-datetime package。该软件包尚无打字稿定义文件，因此我正在尝试创建一个最低版本。

我已将index.d.ts文件添加到node_modules/vue-datetime文件夹中：

import Vue from 'vue';

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

export default Datetime;
export { Datetime, DatetimePopup };

现在，在Vue组件中，我可以像这样导入和使用程序包（请注意，我使用的是vue-class-component package，因此语法可能与您习惯的有所不同）。

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

这很好，很好。问题是我不想将node_modules文件夹保存到源代码管理中。因此，我认为将定义文件保存到与vue组件相同的目录中是一个好主意（有更好的选择吗？）。

我移动了index.d.ts文件，并将其重命名为datepicker.d.ts。我还更新了vue组件，该组件现在可以像以下日期导入日期选择器：import { Datetime } from './datepicker'。这不会给我任何编译错误，但是打开页面将引发以下Javascript错误：Uncaught Error: Cannot find module './datepicker'。

我一直没有在网上找到针对此错误的解决方案。关于我可以尝试或出现问题的任何想法吗？

Answer 1

好的，我已经开始工作了。我不得不做几件事。

1 。将声明文件datepicker.d.ts重命名为MyComponent.d.ts。 “ MyComponent”是我要在其中使用软件包的Vue组件的确切名称。我不确定是否有必要，但是声明文件与组件位于同一文件夹中。

2 。我将声明文件的内容更改为：

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

3 。我将导入行从import { Datetime } from './datepicker'更改为import { Datetime } from 'vue-datetime';

现在全部编译完毕，我没有任何运行时错误。

为vue包创建打字稿定义文件（vue-datetime）

1 个答案: