Bootstrap

vue3+ts+element-plus 标签红色波浪形(属性不全)

新建文件shims-element-plus.d.ts,具体配置如下

import {
  ElAutocomplete,
  ElBadge,
  ElBreadcrumb,
  ElBreadcrumbItem,
  ElButton,
  ElCard,
  ElCheckbox,
  ElCheckboxGroup,
  ElCol,
  ElCollapse,
  ElCollapseItem,
  ElColorPicker,
  ElConfigProvider,
  ElContainer,
  ElDatePicker,
  ElDialog,
  ElDivider,
  ElDrawer,
  ElDropdown,
  ElDropdownItem,
  ElDropdownMenu,
  ElEmpty,
  ElForm,
  ElFormItem,
  ElHeader,
  ElIcon,
  ElImage,
  ElInput,
  ElInputNumber,
  ElLink,
  ElMain,
  ElMenu,
  ElMenuItem,
  ElOption,
  ElPagination,
  ElPopover,
  ElRadio,
  ElRadioButton,
  ElRadioGroup,
  ElRow,
  ElScrollbar,
  ElSelect,
  ElSpace,
  ElSubMenu,
  ElSwitch,
  ElTable,
  ElTableColumn,
  ElTabPane,
  ElTabs,
  ElTag,
  ElText,
  ElTooltip,
  ElTree,
  ElTreeSelect,
  ElUpload
} from 'element-plus';

declare module 'element-plus' {
  // 为每个组件添加对应的类型声明
  export const ElAutocomplete: typeof ElAutocomplete;
  export const ElBadge: typeof ElBadge;
  export const ElBreadcrumb: typeof ElBreadcrumb;
  export const ElBreadcrumbItem: typeof ElBreadcrumbItem;
  export const ElButton: typeof ElButton;
  export const ElCard: typeof ElCard;
  export const ElCheckbox: typeof ElCheckbox;
  export const ElCheckboxGroup: typeof ElCheckboxGroup;
  export const ElCol: typeof ElCol;
  export const ElCollapse: typeof ElCollapse;
  export const ElCollapseItem: typeof ElCollapseItem;
  export const ElColorPicker: typeof ElColorPicker;
  export const ElConfigProvider: typeof ElConfigProvider;
  export const ElContainer: typeof ElContainer;
  export const ElDatePicker: typeof ElDatePicker;
  export const ElDialog: typeof ElDialog;
  export const ElDivider: typeof ElDivider;
  export const ElDrawer: typeof ElDrawer;
  export const ElDropdown: typeof ElDropdown;
  export const ElDropdownItem: typeof ElDropdownItem;
  export const ElDropdownMenu: typeof ElDropdownMenu;
  export const ElEmpty: typeof ElEmpty;
  export const ElForm: typeof ElForm;
  export const ElFormItem: typeof ElFormItem;
  export const ElHeader: typeof ElHeader;
  export const ElIcon: typeof ElIcon;
  export const ElImage: typeof ElImage;
  export const ElInput: typeof ElInput;
  export const ElInputNumber: typeof ElInputNumber;
  export const ElLink: typeof ElLink;
  export const ElMain: typeof ElMain;
  export const ElMenu: typeof ElMenu;
  export const ElMenuItem: typeof ElMenuItem;
  export const ElOption: typeof ElOption;
  export const ElPagination: typeof ElPagination;
  export const ElPopover: typeof ElPopover;
  export const ElRadio: typeof ElRadio;
  export const ElRadioButton: typeof ElRadioButton;
  export const ElRadioGroup: typeof ElRadioGroup;
  export const ElRow: typeof ElRow;
  export const ElScrollbar: typeof ElScrollbar;
  export const ElSelect: typeof ElSelect;
  export const ElSpace: typeof ElSpace;
  export const ElSubMenu: typeof ElSubMenu;
  export const ElSwitch: typeof ElSwitch;
  export const ElTable: typeof ElTable;
  export const ElTableColumn: typeof ElTableColumn;
  export const ElTabPane: typeof ElTabPane;
  export const ElTabs: typeof ElTabs;
  export const ElTag: typeof ElTag;
  export const ElText: typeof ElText;
  export const ElTooltip: typeof ElTooltip;
  export const ElTree: typeof ElTree;
  export const ElTreeSelect: typeof ElTreeSelect;
  export const ElUpload: typeof ElUpload;
}

在 TypeScript 中,使用 typeof 关键字可以用来获取一个值的类型。在这个特定的声明文件中,typeof ElButton 的作用是告诉 TypeScript 编译器,ElButton 的类型应该被认为是和 element-plus 库中的实际 ElButton 类型相同。

这样做的好处在于,当您在编写代码时使用了 element-plus 中的 ElButton 组件,TypeScript 将能够正确地进行类型检查和推断,以及提供相关的类型提示。这有助于减少在开发过程中出现的类型错误,并提高代码的可维护性和可读性。

总之,使用 typeof ElButton 类型可以让 TypeScript 知道在 element-plus 库中 ElButton 的类型信息,从而提供更好的类型支持。

;