Generate d.ts file for Vue components written in Typescript

Question

I'm new to Vue and I would like to learn how to create components and publish the package to NPM. So, my idea is to create Vue (typescript) + Vuetify reusable components and install them from NPM in any other project I have. I can successfully import my HelloWorld component in a vue.js project, however when I try to import it in a Vue ts project I get the following error:

'Could not find a declaration file for module 'sastify'. '/home/raphael/tester-ts/node_modules/sastify-nv/dist/sastify.common.js' implicitly has an 'any' type. Try npm install @types/sastify-nv if it exists or add a new declaration (.d.ts) file containing declare module 'sastify-nv';

How do I generate this .d.ts that would work similarly as to my JS project?

My project tree is:

── babel.config.js
├── package.json
├── postcss.config.js
├── README.md
├── src
│   ├── components
│   │   └── HelloWorld
│   │       └── HelloWorld.vue
│   └── sastify.js
├── tsconfig.json
├── tslint.json
└── yarn.lock

package.json:

{
  "name": "sastify-nv",
  "version": "0.1.6",
  "private": false,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build --target lib --name sastify ./src/sastify.js",
    "lint": "vue-cli-service lint --fix",
    "build:ts": "tsc"
  },
  "files": [
    "dist",
    "src"
  ],
  "main": "dist/sastify.common.js",
  "dependencies": {
    "vue": "^2.6.10",
    "vue-property-decorator": "^8.1.0",
    "vuetify": "^2.0.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-typescript": "^3.11.0",
    "@vue/cli-service": "^3.11.0",
    "sass": "^1.17.4",
    "sass-loader": "^7.1.0",
    "typescript": "^3.4.3",
    "vue-cli-plugin-vuetify": "^0.6.3",
    "vue-template-compiler": "^2.6.10",
    "vuetify-loader": "^1.2.2"
  }
}

tsconfig.json:

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "declaration": true,
    "outDir": "lib",
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env",
      "vuetify"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

sastify.js:

export { default as HelloWorld } from './components/HelloWorld/HelloWorld.vue'

components/HelloWorld/HelloWorld.vue:

<template>
  <v-card>Vcard from HelloWorld</v-card>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { VCard } from "vuetify/lib";

@Component({
  name: "HelloWorld",
  components: {
    VCard
  }
})
export default class HelloWorld extends Vue {}
</script>

<style scoped>
</style>

Ancalin

Answer 1

You can use the vue-tsc package.

execute:

npx vue-tsc --declaration --emitDeclarationOnly

see more info here: https://github.com/johnsoncodehk/volar/tree/master/packages/vue-tsc#using

Onomastic

Answer 2

Use rollup - I tried everything but it did not work with WebPack/vue-cli-service.

Here is my starter-template with rollup: https://github.com/MikeMitterer/vue-ts-sfc-starter

Hope this helps

Moke

Answer 3

You could use the dts-gen. This is a official tool from TypeScript(Microsoft).

I used it with vue-blockui for generate de d.ts files and working

Arbitral

How? I get github.com/microsoft/dts-gen/issues/164 – Balkin