代码之家 › 专栏 › 技术社区 › JKL

为Vue包(Vue日期时间)创建typescript定义文件

vue.js typescript

0

JKL · 技术社区 · 6 年前

我正在结合使用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组件相同的目录中(是否有更好的选项?).

我感动了 索引文件 文件并将其重命名为 datepicker.d.ts . 我还更新了我的Vue组件,该组件现在导入日期选择器,如下所示: import { Datetime } from './datepicker' . 这将不会给我任何编译错误,但打开页面会引发以下javascript错误: Uncaught Error: Cannot find module './datepicker' .

我一直没有成功地在网上寻找这个错误的解决方案。对我能尝试什么或出了什么问题有什么想法吗?

1 回复 | 直到 6 年前

1

0

JKL 6 年前

datepicker.d.ts MyComponent.d.ts MyComponent

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

import { Datetime } from './datepicker' import { Datetime } from 'vue-datetime';