如何让ElementPlus适配Vue中use函数的形参列表？

从类型提示能看到，ElementPlus的类型结构是这样的：

{
  version: string;
  install: (
    app: App<any>,
    options?: Partial<ConfigProviderProps> | undefined,
  ) => void;
}

现在要把它适配到Vue use函数的plugin: Plugin<Options>参数类型里，不想用ElementPlus as any这种图省事的写法，想找个严谨的类型适配方式，精准匹配函数形参要求。

项目当前依赖如下：

{
  "dependencies": {
    "vue": "^3.3.11",
    "element-plus": "^2.4.4"
  },
  "devDependencies": {
    "@tsconfig/node18": "^18.2.2",
    "@types/jsdom": "^21.1.6",
    "@types/node": "^18.19.3",
    "@vue/tsconfig": "^0.5.0",
    "typescript": "~5.3.0",
    "vue-tsc": "^1.8.25"
  }
}

1. 先搞清楚Vue的Plugin接口规则 #

Vue自带的Plugin接口（从vue包导出）定义其实很宽松：

interface Plugin<T = any> {
  install: (app: App, options?: T) => void;
  [key: string]: any;
}

核心要求就是有个install方法，其他额外属性（比如ElementPlus的version）都允许存在。ElementPlus的类型完全符合这个接口，只需要把泛型参数对应上它的配置类型就行。

2. 直接使用或显式标注类型 #

ElementPlus的配置类型是ConfigProviderProps，直接用就行，TS会自动推导类型：

import { createApp } from 'vue';
import ElementPlus from 'element-plus';

const app = createApp(App);
app.use(ElementPlus); // TS会自动识别ElementPlus符合Plugin类型

如果需要手动标注类型（比如封装插件注册逻辑时），直接指定泛型：

import { type Plugin } from 'vue';
import ElementPlus from 'element-plus';
import type { ConfigProviderProps } from 'element-plus';

const elPlugin: Plugin<Partial<ConfigProviderProps>> = ElementPlus;
// 之后用elPlugin调用use就没问题了

3. 自定义use函数的适配 #

如果是你自己封装的插件注册函数，比如：

function registerPlugin<Options>(plugin: Plugin<Options>, options?: Options) {
  // 你的注册逻辑
}

直接传ElementPlus就行，TS会自动把Options推断成Partial<ConfigProviderProps>：

import { zhCn } from 'element-plus/es/locale';
registerPlugin(ElementPlus, { locale: zhCn });

完全不用加any断言，因为ElementPlus的install方法参数和Plugin的要求完全匹配，额外的version属性也符合接口的索引签名要求。

4. 若仍报错，检查这几点 #

• 确认已经正确引入ElementPlus的类型，比如import type { ConfigProviderProps } from 'element-plus'
• 检查Vue和ElementPlus的版本，你当前用的3.3.x + 2.4.x是兼容的
• 看看tsconfig.json里的moduleResolution是不是设成了bundler或node16，这会影响类型解析的正确性

内容的提问来源于stack exchange，提问作者MilkWind