为用Typescript编写的Vue组件生成d.ts文件
我是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”类型。 尝试为用Typescript编写的Vue组件生成d.ts文件,typescript,vue.js,vuetify.js,.d.ts,Typescript,Vue.js,Vuetify.js,.d.ts,我是Vue的新手,我想学习如何创建组件并将包发布到NPM。所以,我的想法是创建Vue(typescript)+Vuetify可重用组件,并将它们从NPM安装到我拥有的任何其他项目中。我可以在vue.js项目中成功导入HelloWorld组件,但是当我尝试在vue ts项目中导入时,会出现以下错误: '找不到模块'sastify'的声明文件。'/home/raphael/tester ts/node_modules/sastify nv/dist/sastify.common.js”隐式具有“an
npm install@types/sastify nv
(如果存在),或添加包含声明模块“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>
来自HelloWorld的Vcard
从“Vue属性装饰器”导入{Component,Vue};
从“vuetify/lib”导入{VCard};
@组成部分({
名称:“HelloWorld”,
组成部分:{
VCard
}
})
导出默认类HelloWorld扩展Vue{}
您可以使用。这是TypeScript(Microsoft)的官方工具
我将它与vue blockui
一起用于生成ded.ts
文件和使用汇总-我尝试了所有方法,但它与WebPack/vue cli服务不起作用
以下是我的入门模板和汇总:
希望这有帮助如何?我明白了