element-plus/ant ts(typescript) 支持 Vue-Official

Vue - Official 语言支持模式, 需要库本身的支持 和 tsconfigs.app.json 的配置

elemnet-plus 官网

Volar 支持

如果您使用 Volar，请在 tsconfig.json 中通过 compilerOptions.type 指定全局组件类型。

json

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

实际配置为

tsconfig.app.json

{
  "extends": "@vue/tsconfig/tsconfig.dom.json",
  "include": [
    "env.d.ts",
    "src/**/*",
    "src/**/*.vue",
    "node_modules/element-plus/global.d.ts" // elemnet-plus,
    "node_modules/ant-design-vue/typings/global.d.ts" // ant 同理
  ],
  "exclude": ["src/**/__tests__/*"],
  "compilerOptions": {
    "composite": true,
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",

    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

其中 vscode 的ts 会指向 tsconfig.app.json, 在右下角的 选择语言模式中进行查看, 大概有以下配置

✨ Get Insiders Edition 		Select Version
ESLint 						    Open ESLint Output
tsconfig.app.json			    打开配置文件
5.6.3TypeScript 版本		    选择版本
Prettier					    View Logs
Hybrid ModeEnabled (Auto)	    Open Setting
<tag-name prop-name />		    Open Menu

主要和 vue(未测试) vscode中的ts版本(未测试) elemnet-plus(测试) 版本相关, 可以尝试切换版本