Vue2+TS+Volar环境下如何为SFC模板中第三方组件添加类型

1. 配置Volar适配Vue 2环境 #

Volar默认适配Vue 3，需明确切换为Vue 2模式：

• 在项目根目录创建volar.config.js：

module.exports = {
  plugins: [require('@volar-plugins/vue2').default()],
};

• 或者直接在VSCode设置中修改：volar.vueVersion: 2

2. 扩展全局组件类型声明 #

创建（或修改）类型声明文件（比如src/types/element-ui.d.ts），通过扩展@vue/runtime-core的GlobalComponents接口，让Volar识别Element UI组件的类型：

import type { 
  ElButton, 
  ElHeader, 
  ElInput, 
  ElTable 
  // 按需添加你用到的Element UI组件
} from 'element-ui/types';

declare module '@vue/runtime-core' {
  interface GlobalComponents {
    ElButton: typeof ElButton;
    ElHeader: typeof ElHeader;
    ElInput: typeof ElInput;
    ElTable: typeof ElTable;
  }
}

export {};

注：如果是在单个SFC的components选项中局部注册组件，Volar会自动识别类型；但全局注册的组件必须通过这种方式关联类型。

3. 调整TypeScript配置 #

检查tsconfig.json的types字段，确保包含必要的类型依赖：

{
  "compilerOptions": {
    // 其他编译配置...
    "types": ["vue", "element-ui", "@vue/composition-api"]
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.vue"]
}

4. 验证类型校验效果 #

现在在SFC模板中使用Element UI组件时，Volar会自动进行类型校验：

<!-- 此处会触发类型错误：ElHeader的height属性要求string类型，传入数字不符合要求 -->
<el-header :height="100"></el-header>

关于之前方法无效的原因 #

• JSX的IntrinsicElements仅对JSX语法生效，SFC模板的组件类型校验依赖@vue/runtime-core下的GlobalComponents接口扩展，两者属于不同的类型系统路径。
• 即使Element UI自带类型，Volar需要明确关联全局组件与对应类型，才能在模板中启用校验逻辑。

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