element-plus引入在TypeScript5.0下的报错

在最新vite基于typescript5.0环境下引入element-plus

测试环境

"element-plus": "^2.3.4",
"typescript": "~5.0.4",
"@vue/tsconfig": "^0.3.2",
"vite": "^4.3.4",

问题描述

问题一

在目前最新的vite中构建Vue项目时，使用element-plus库，使用官网推荐按需自动导入方式，在ts代码中使用 import { ElForm } from 'element-plus'类似语句导入组件时报错

模块“element-plus”没有导出的成员“ElForm”。你是想改用“import ElForm from ‘element-plus’”吗

问题二

使用element-plus官网的全局导入方式，在tsconfig.json中使用以下配置获得Volar支持时报错

// tsconfig.json
{
  "compilerOptions": {
    // ...
    "types": ["element-plus/global"]
  }
}

找不到“element-plus/global”的类型定义文件。 程序包含该文件是因为: 在 compilerOptions 中指定的类型库 “element-plus/global” 的入口点。

错误原因

typescript5.0版本升级，使用compilerOptions.moduleResolution: "bundler"的模块编译选项。具体参见issue

解决方法

1. 可以回退typescript版本，例如在以下版本中不会报错

"@vue/tsconfig": "0.1.3",  
   "typescript": "4.9.5",

2. 在tsconfig.json中重写moduleResolution

{
  "compilerOptions": {
    "moduleResolution": "node"
  }
}