为 vue 包创建 typescript 定义文件 (vue-datetime)答案

【问题标题】：Creating a typescript definition file for a vue package (vue-datetime)为 vue 包创建 typescript 定义文件 (vue-datetime)
【发布时间】：2019-02-07 12:06:41
【问题描述】：

我将 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'。

我一直没有成功地在网上寻找此错误的解决方案。关于我可以尝试什么或出了什么问题的任何想法？

【问题讨论】：

如果您不想将 node_modules 文件夹保存到源代码管理中，那么为什么不将它添加到 .gitignore 中呢？
嗯，我有，但是当我将声明文件保存到 node_modules 文件夹时，该文件不会分发给其他开发人员（因为它被 .gitignore 忽略了）。并且该文件是必需的，否则应用程序将无法编译。

标签： typescript vue.js

【解决方案1】：

更新

在DefinitelyTyped 存储库中为vue-datetime 包添加了typed definition file。

原答案

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

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

现在它全部编译并且我没有任何运行时错误。

【讨论】：