1. vue-dts-gen
**💛 You can help the author become a full-time open-source maintainer by [sponsoring him on GitHub](https://github.com/sponsors/egoist).**
vue-dts-gen
Package: vue-dts-gen
Last modified: Mon, 23 May 2022 14:23:22 GMT
Version: 0.3.0
License: MIT
Downloads: 123

Install

npm install vue-dts-gen
yarn add vue-dts-gen

💛 You can help the author become a full-time open-source maintainer by sponsoring him on GitHub.


vue-dts-gen

npm version

Generate d.ts from .vue files.

Install

Globally:

 npm i -g vue-dts-gen

Or locally:

npm i -D vue-dts-gen

Usage

Output directory is determined by outDir in tsconfig.json.

Assuming the outDir is dist:

 vue-dts-gen src/App.vue
# Emits dist/App.d.ts

# Or glob patterns
vue-dts-gen "src/*.{ts,vue}"
# Emits dist/*.d.ts

Only d.ts files are emitted.

Example

Input:

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  props: {
    /** Initial number */
    start: {
      type: Number,
      required: true,
    },
  },
})
</script>

Output:

 declare const _default: import("vue").DefineComponent<{
    /** Initial number */
    start: {
        type: NumberConstructor;
        required: true;
    };
}, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
    start: number;
} & {}>, {}>;
export default _default;

Input:

<template>
  <div>hi</div>
</template>

<script lang="ts" setup>
import { defineProps } from 'vue'

defineProps<{
  /** The initial number */
  start: number
}>()
</script>

Output:

 declare const _default: import("vue").DefineComponent<{
    /** The initial number */
    start: number;
}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{} & {
    start?: number | undefined;
}>, {}>;
export default _default;

License

MIT © EGOIST

RELATED POST

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin