为用 Typescript 编写的 Vue 组件生成 d.ts 文件

Posted 2023-03-13

【中文标题】为用 Typescript 编写的 Vue 组件生成 d.ts 文件

【英文标题】：Generate d.ts file for Vue components written in Typescript

【发布时间】：2020-01-19 17:27:05

【问题描述】：

我是 Vue 新手，我想学习如何创建组件并将包发布到 NPM。所以，我的想法是创建 Vue (typescript) + Vuetify 可重用组件，并从 NPM 将它们安装在我拥有的任何其他项目中。我可以在 vue.js 项目中成功导入我的 HelloWorld 组件，但是当我尝试在 Vue ts 项目中导入它时，我收到以下错误：

'找不到模块'sastify'的声明文件。 '/home/raphael/tester-ts/node_modules/sastify-nv/dist/sastify.common.js' 隐含了一个 'any' 类型。 尝试npm install @types/sastify-nv（如果存在）或添加包含declare module 'sastify-nv'; 的新声明（.d.ts）文件

如何生成与我的 JS 项目类似的 .d.ts？

我的项目树是：

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

组件/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>

【参考方案1】：

您可以使用vue-tsc 包。

执行：

npx vue-tsc --declaration --emitDeclarationOnly

在此处查看更多信息： https://github.com/johnsoncodehk/volar/tree/master/packages/vue-tsc#using

【参考方案2】：

使用汇总 - 我尝试了所有方法，但它不适用于 WebPack/vue-cli-service。

这是我的带有汇总的入门模板：https://github.com/MikeMitterer/vue-ts-sfc-starter

希望对你有帮助

【参考方案3】：

您可以使用dts-gen。这是来自 TypeScript(Microsoft) 的官方工具。

我将它与vue-blockui 一起用于生成d.ts 文件和工作

【讨论】：

怎么样？我得到github.com/microsoft/dts-gen/issues/164