深入了解 TypeScript 泛型：第 2 部分 — 高级推理

随着Typescript的发展，在Vue3 + Volar中，如果组件库存在global.d.ts，那么在使用组件的时候就会提示组件的属性。

输入的时候也会有相应的提示

但如果没有global.d.ts则会不存在代码提示，组件类型也是any

0x0 事情起因

事情起因是这样的，在github上和一位师傅在讨论Panel的beforeToggleAPI，应该返回布尔值还是调用done函数

我在尝试两种方案的时候发现，非常的不方便，因为我经常会忘记API名称。本来想着把Panel的API搞好之后就去修复，结果就忘了这茬。

0x1 方案拟定

在rc-1版本的时候就已经发现问题并提交了issues，但到了1.0.0还是没有人关闭这个issues，可能是各位老师都忙着修改自己的组件。正好我的组件也没有正在开放的issues，便着手开始修复这个问题。

看着build.js我其实没有什么头绪，于是我跑去问了万能的刀酱1。得到的答复是这样的

啊这…刀酱说他不道啊，那看来我们只好靠自己了，于是我找遍了掘金硬是没找到一份有关于这方面的资料_{也可能是我没仔细看}

于是我又跑去看Ant design的scripts脚本，结果发现人家是直接硬写死的 73ebf4c。

(当时我的表情)

我坐在凳子上如坐针毡，看着代码硬是一点思路没有，于是根据我看的为数不多的医疗文献2，我很轻松的就能明白，一定是我认知疲劳了，绝对不是我想摆烂。解决认知疲劳的最好办法就是直接开摆！

正大光明的解决认知疲(bai)劳(lan)

但是当我连输了两把五子棋之后，我就啪的一下很快啊，马上就把手机扔了，并表示“我怎么是这种人呢”。但是看着VSCODE里没有思路的代码，我还立刻捡起被扔出去的手机在群里问了问各位师傅。

各位师傅也非常的给力，啪的一下很快啊，马上甩出了一个解决方案。

好！既然各位师傅们都这么的热心给了我帮助，那么我必然要解决这个恶魔

我！_{巴别塔的恶灵！整合运动的毁灭者！}3 誓要将没有类型提示这个恶魔永远的封印进CHANGLOG里，再不允许它踏入项目半步

(小虎鲸出击！)

本文将会以vue-devui项目为例，带领读者从零改造改造构建流程，使得构建产物可以支持volar插件。话不多说我们直接开始。

0x2 分析问题

运行build:components命令之后，所有的产物都会放在packages\devui-vue\build下。我们发现，build文件夹下不存在任何的声明文件。代码中也没有和声明文件有关的代码

// build.js
const createPackageJson = (name) => {const fileStr = `{"name": "${name}","version": "0.0.0","main": "index.umd.js","module": "index.es.js","style": "style.css","types": "../types/${name}/index.d.ts"
}`;fsExtra.outputFile(path.resolve(outputDir, `${name}/package.json`), fileStr, 'utf-8');
};
exports.build = async () => {// 打包umd与es模块await buildAll();// 获取所有componentsconst components = fs.readdirSync(entryDir).filter((name) => {const componentDir = path.resolve(entryDir, name);const isD