How to add types for global directives | 如何给全局指令添加TS类型？ #12510

rookie-orange · 2024-12-08T15:00:31Z

rookie-orange
Dec 8, 2024

How to add types for global directives？
如何给全局指令添加TS类型？

I now use method is to create a .d.ts files, and within the file extension of vue ComponentCustomProperties type.
我现在使用的方法是创建一个.d.ts文件，并在文件内扩展vue的ComponentCustomProperties类型。

 interface ComponentCustomProperties {
    vPermission: ObjectDirective<
      HTMLButtonElement,
      PermissionConfig | PermissionConfig['name']
    >;
  }

But when I do that, I run into some problems

Theme coloring failed
All global components contain a 'vPermission' property

但是当我这么做以后会遇到一些问题

主题着色失败
全局组件都会包含vPermission属性

Problem 1:

Problem 2:

<script setup lang="ts">
import { Button } from 'path'
import { ref } from 'vue'
const buttonRef = ref<InstanceType<typeof Button>>()
buttonRef.value.vPermission = {} // Accessible and has TS type hints 可访问且有TS类型提示
</script>

<template>
  <Button ref="buttonRef">A Button</Button>
</template>