To start with what type hints are, in Vue3+Volar, a UI component tells you what properties it has, just like a typescript object.

For example, hovering over an el-Button will display some of its properties.

You also get typescript-like writing advice when typing properties on components.

If you’re using locally written components, you’ll enjoy this functionality perfectly, but if you’re using a component library like Ant-Design-Vue or Element-Plus, you’ll run into this situation without configuration.

Component prompts are any objects, and Volar cannot provide any prompts for your UI component library. This is the equivalent of using a crippled version of Volar +vue3.

However, this is not a particularly severe disability and the solutions are as follows:

1 directly introduces this component

In the case of vue3 + element-Plus, if you need to add a type hint, you can introduce this component directly into the Vue file.

<template>
  <div>
    <el-button></el-button>
  </div>
</template>

<script lang="ts" setup>
import { ElButton } from "element-plus"
</script>
Copy the code

This approach treats ElButton as if it were a component you wrote locally, and gets type hints by actively importing them.

There is nothing wrong with this approach if it is introduced in small quantities.

2 byTsconfig. JsonTo introduce

Open node_modules/element-plus/ global.d. ts and you’ll see something like this,

// GlobalComponents for Volar declare module 'vue' { export interface GlobalComponents { // ... }}Copy the code

The comment says global component for Volar. But from what we’ve just done, it’s pretty clear that our Volar doesn’t use it.

In fact, we need to use tsconfig. json to help Volar use this TS declaration file.

Modify tsconfig. json in the root directory and modify include to make TS accept the declaration file voluntarily.

{ "compilerOptions": { "target": "esnext", "useDefineForClassFields": true, "module": "esnext", "moduleResolution": "node", "strict": true, "jsx": "preserve", "sourceMap": true, "resolveJsonModule": true, "esModuleInterop": True, "lib" : [" esnext ", "dom"], "baseUrl" : ""," paths ": {" @ / *" : [". / SRC / * "]}}, "include" : [ "src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "Node_modules/element - plus/global. Which s" / / < < < < < < < < < < -- -- -- -- -- -- -- add this line]}Copy the code

conclusion

Tsconfig. json can be modified in the future if you encounter a TS prompt that requires global import rather than individual import.

About the ant – design – vue

I haven’t found any global volar type support in Ant-design-vue yet, so you can use this file I wrote to achieve the same effect in Ant-design-Vue.

// GlobalComponents for Volar
declare module "vue" {
  export interface GlobalComponents {
    AAffix: typeof import("ant-design-vue") ["Affix"];
    AAnchor: typeof import("ant-design-vue") ["Anchor"];
    AAnchorLink: typeof import("ant-design-vue") ["AnchorLink"];
    AAutoComplete: typeof import("ant-design-vue") ["AutoComplete"];
    AAutoCompleteOption: typeof import("ant-design-vue") ["AutoCompleteOption"];
    AAlert: typeof import("ant-design-vue") ["Alert"];
    AAvatar: typeof import("ant-design-vue") ["Avatar"];
    AAvatarGroup: typeof import("ant-design-vue") ["AvatarGroup"];
    ABackTop: typeof import("ant-design-vue") ["BackTop"];
    ABadge: typeof import("ant-design-vue") ["Badge"];
    ABadgeRibbon: typeof import("ant-design-vue") ["BadgeRibbon"];
    ABreadcrumb: typeof import("ant-design-vue") ["Breadcrumb"];
    ABreadcrumbSeparator: typeof import("ant-design-vue") ["BreadcrumbSeparator"];
    AButton: typeof import("ant-design-vue") ["Button"];
    AButtonGroup: typeof import("ant-design-vue") ["ButtonGroup"];
    ACalendar: typeof import("ant-design-vue") ["Calendar"];
    ACard: typeof import("ant-design-vue") ["Card"];
    ACardMeta: typeof import("ant-design-vue") ["CardMeta"];
    ACollapse: typeof import("ant-design-vue") ["Collapse"];
    ACollapsePanel: typeof import("ant-design-vue") ["CollapsePanel"];
    ACarousel: typeof import("ant-design-vue") ["Carousel"];
    ACascader: typeof import("ant-design-vue") ["Cascader"];
    ACheckbox: typeof import("ant-design-vue") ["Checkbox"];
    ACheckboxGroup: typeof import("ant-design-vue") ["CheckboxGroup"];
    ACol: typeof import("ant-design-vue") ["Col"];
    AComment: typeof import("ant-design-vue") ["Comment"];
    AConfigProvider: typeof import("ant-design-vue") ["ConfigProvider"];
    ADatePicker: typeof import("ant-design-vue") ["DatePicker"];
    AWeekPicker: typeof import("ant-design-vue") ["WeekPicker"];
    ADescriptions: typeof import("ant-design-vue") ["Descriptions"];
    ADescriptionsItem: typeof import("ant-design-vue") ["DescriptionsItem"];
    ADivider: typeof import("ant-design-vue") ["Divider"];
    ADropdown: typeof import("ant-design-vue") ["Dropdown"];
    ADropdownButton: typeof import("ant-design-vue") ["DropdownButton"];
    ADrawer: typeof import("ant-design-vue") ["Drawer"];
    AEmpty: typeof import("ant-design-vue") ["Empty"];
    AForm: typeof import("ant-design-vue") ["Form"];
    AFormItem: typeof import("ant-design-vue") ["FormItem"];
    AGrid: typeof import("ant-design-vue") ["Grid"];
    AInput: typeof import("ant-design-vue") ["Input"];
    ATextarea: typeof import("ant-design-vue") ["Textarea"];
    AImage: typeof import("ant-design-vue") ["Image"];
    AImagePreviewGroup: typeof import("ant-design-vue") ["ImagePreviewGroup"];
    AInputNumber: typeof import("ant-design-vue") ["InputNumber"];
    ALayout: typeof import("ant-design-vue") ["Layout"];
    ALayoutHeader: typeof import("ant-design-vue") ["LayoutHeader"];
    ALayoutSider: typeof import("ant-design-vue") ["LayoutSider"];
    ALayoutFooter: typeof import("ant-design-vue") ["LayoutFooter"];
    ALayoutContent: typeof import("ant-design-vue") ["LayoutContent"];
    AList: typeof import("ant-design-vue") ["List"];
    AListItemMeta: typeof import("ant-design-vue") ["ListItemMeta"];
    Amessage: typeof import("ant-design-vue") ["message"];
    AMenu: typeof import("ant-design-vue") ["Menu"];
    ASubMenu: typeof import("ant-design-vue") ["SubMenu"];
    AMentions: typeof import("ant-design-vue") ["Mentions"];
    AMentionsOption: typeof import("ant-design-vue") ["MentionsOption"];
    AModal: typeof import("ant-design-vue") ["Modal"];
    AStatistic: typeof import("ant-design-vue") ["Statistic"];
    AStatisticCountdown: typeof import("ant-design-vue") ["StatisticCountdown"];
    Anotification: typeof import("ant-design-vue") ["notification"];
    APageHeader: typeof import("ant-design-vue") ["PageHeader"];
    APagination: typeof import("ant-design-vue") ["Pagination"];
    APopconfirm: typeof import("ant-design-vue") ["Popconfirm"];
    APopover: typeof import("ant-design-vue") ["Popover"];
    AProgress: typeof import("ant-design-vue") ["Progress"];
    ARadio: typeof import("ant-design-vue") ["Radio"];
    ARadioGroup: typeof import("ant-design-vue") ["RadioGroup"];
    ARate: typeof import("ant-design-vue") ["Rate"];
    AResult: typeof import("ant-design-vue") ["Result"];
    ARow: typeof import("ant-design-vue") ["Row"];
    ASelect: typeof import("ant-design-vue") ["Select"];
    ASelectOption: typeof import("ant-design-vue") ["SelectOption"];
    ASkeleton: typeof import("ant-design-vue") ["Skeleton"];
    ASkeletonButton: typeof import("ant-design-vue") ["SkeletonButton"];
    ASkeletonAvatar: typeof import("ant-design-vue") ["SkeletonAvatar"];
    ASkeletonInput: typeof import("ant-design-vue") ["SkeletonInput"];
    ASkeletonImage: typeof import("ant-design-vue") ["SkeletonImage"];
    ASlider: typeof import("ant-design-vue") ["Slider"];
    ASpace: typeof import("ant-design-vue") ["Space"];
    ASpin: typeof import("ant-design-vue") ["Spin"];
    ASteps: typeof import("ant-design-vue") ["Steps"];
    AStep: typeof import("ant-design-vue") ["Step"];
    ASwitch: typeof import("ant-design-vue") ["Switch"];
    ATable: typeof import("ant-design-vue") ["Table"];
    ATableColumnGroup: typeof import("ant-design-vue") ["TableColumnGroup"];
    ATransfer: typeof import("ant-design-vue") ["Transfer"];
    ATree: typeof import("ant-design-vue") ["Tree"];
    ADirectoryTree: typeof import("ant-design-vue") ["DirectoryTree"];
    ATreeSelect: typeof import("ant-design-vue") ["TreeSelect"];
    ATreeSelectNode: typeof import("ant-design-vue") ["TreeSelectNode"];
    ATabs: typeof import("ant-design-vue") ["Tabs"];
    ATabContent: typeof import("ant-design-vue") ["TabContent"];
    ATag: typeof import("ant-design-vue") ["Tag"];
    ACheckableTag: typeof import("ant-design-vue") ["CheckableTag"];
    ATimePicker: typeof import("ant-design-vue") ["TimePicker"];
    ATimeline: typeof import("ant-design-vue") ["Timeline"];
    ATimelineItem: typeof import("ant-design-vue") ["TimelineItem"];
    ATooltip: typeof import("ant-design-vue") ["Tooltip"];
    ATypography: typeof import("ant-design-vue") ["Typography"];
    ATypographyLink: typeof import("ant-design-vue") ["TypographyLink"];
    ATypographyParagraph: typeof import("ant-design-vue") ["TypographyParagraph"];
    ATypographyText: typeof import("ant-design-vue") ["TypographyText"];
    ATypographyTitle: typeof import("ant-design-vue") ["TypographyTitle"];
    AUpload: typeof import("ant-design-vue") ["Upload"];
    AUploadDragger: typeof import("ant-design-vue") ["UploadDragger"];
    ALocaleProvider: typeof import("ant-design-vue") ["LocaleProvider"]; }}export {};
Copy the code

I will submit the issue in Ant-design-Vue later when I have time