为Typescript编写的Vue组件生成d.ts文件 [英] Generate d.ts file for Vue components written in Typescript
问题描述
我是 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';
如何生成与我的 JS 项目类似的 .d.ts?
我的项目树是:
── babel.config.js├── package.json├── postcss.config.js├── README.md├── src│ ├──组件│ │ └── HelloWorld│ │ └── HelloWorld.vue│ └── sastify.js├── tsconfig.json├── tslint.json└── yarn.lockpackage.json:
<代码>{"name": "sastify-nv",版本":0.1.6"，私人":假，脚本":{"serve": "vue-cli-service serve","build": "vue-cli-service build --target lib --name sastify ./src/sastify.js","lint": "vue-cli-service lint --fix",构建:ts":tsc"},文件":["区",源代码"],"main": "dist/sastify.common.js",依赖关系":{"vue": "^2.6.10","vue-property-decorator": "^8.1.0","vuetify": "^2.0.0"},开发依赖":{"@vue/cli-plugin-typescript": "^3.11.0","@vue/cli-service": "^3.11.0","sass": "^1.17.4","sass-loader": "^7.1.0","打字稿": "^3.4.3","vue-cli-plugin-vuetify": "^0.6.3","vue-template-compiler": "^2.6.10","vuetify-loader": "^1.2.2"}}tsconfig.json:
<代码>{编译器选项":{"目标": "esnext",模块":esnext"，严格":真实，"jsx": "保留",importHelpers":真，声明":真实，"outDir": "lib","moduleResolution": "节点","experimentalDecorators": 真,"esModuleInterop": 真,allowSyntheticDefaultImports":真，"sourceMap": 真,"baseUrl": ".",类型":["webpack-env",验证"],路径":{"@/*": [源代码/*"]},库":["esnext","dom","dom.iterable",脚本主机"]},包括": ["src/**/*.ts","src/**/*.tsx","src/**/*.vue","测试/**/*.ts",测试/**/*.tsx"],排除": [节点模块"]}sastify.js:
export { default as HelloWorld } from './components/HelloWorld/HelloWorld.vue'components/HelloWorld/HelloWorld.vue:
<v-card>来自HelloWorld的Vcard</v-card></模板><script lang="ts">从vue-property-decorator"导入{组件，Vue}；从vuetify/lib"导入{VCard}；@成分({name: "HelloWorld",成分: {卡}})导出默认类 HelloWorld 扩展 Vue {}<样式范围></风格>使用汇总 - 我尝试了所有方法，但它不适用于 WebPack/vue-cli-service.
这是我的带汇总的入门模板:https://github.com/MikeMitterer/vue-ts-sfc-starter
希望能帮到你
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 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>
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
这篇关于为Typescript编写的Vue组件生成d.ts文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
