在vue3-Typescript 里面制作*.d.ts文件，原来这么简单

学习 Typescript，发现库项目打包发布后，需要搭配一个 *.d.ts 文件。
但是找了一些资料都没有弄明白要怎么做。

一开始只好手撸。

找到生成 *.d.ts 文件的方法

直到我又一次查看 vue3的最新文档 （https://staging-cn.vuejs.org/guide/scaling-up/tooling.html#typescript）提到了可以用 vue-tsc 制作 *.d.ts.

如果 GitHub 上不去的话，可以看npm https://www.npmjs.com/package/vue-tsc

使用方法

然后我们修改一下 package

 "scripts": {
    "dev": "vite",
    "build": "vite build --mode project",
    "lib": "vite build --mode lib",
    "dts": "vue-tsc --declaration --emitDeclarationOnly ",
    "preview": "vite preview --port 5050",
    "typecheck": "vue-tsc --noEmit",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
  },

执行 yarn dts 即可。

效果

如果出现各种报错的话，也不要怕，可以先打开项目看看是不是多出来好多 *.d.ts 文件。

每个ts文件、*.vue （带有 lang="ts"）文件，都会创建对应的 *.d.ts 文件。

那么如何合并为一个文件呢？

合并 *.d.ts 文件

我做了一个 “入口”文件，本来以为可以根据入口文件自动合并呢，结果发现，想多了。

那么只会自己动手了。

如果是Windows环境的话，可以用批处理命令实现：

copy *.d.ts nf-state.d.ts

保存为bat文件即可。