antd与element-ui组件申明冲突问题处理

前提

部门的某个项目一直是使用antd作为组件框架，某天为了实现新的功能组件又引入了element-ui。于是乎，在打包的时候出现了声明报错：

显然，是因为antd和elementui中都存在$message的类型申明，从而导致了冲突。

冲突原因与解决方案

首先查看tsconfig.json

"include": [
    "packages/**/*.ts",
    "src/**/*.ts",
]

antd在src的主入口中引入，而elementui在packages的组件中引入，都存在于include中。

那能否在exclude中排除elementui的$message申明呢？根据tconfig的说明：

这个组件是必须包含在include中的，所以无法在exclude中单独排除elementUI。

再看组件的elementUI引入：

import { DatePicker } from "element-ui";

根据tsConfig的模块解析逻辑

在element-ui的typing属性对应的文件中找到$message的申明：

再找到Message.d.ts文件，可以找到vue的增强类型说明：

有关增强类型说明和ts模块补充的内容可以看这里

把这行代码注释掉

// $message: ElMessage

再次打包，可以正常打包。

虽然问题已解决，但是项目中所有人都需要这样处理嘛? 或者node_modules重新下载后也要重新处理？ 这里有一个更好的方案：在打包的过程中重写elementui的message.d.ts，增加相关注释。