Nuxt3：如何为Proxy对象添加TypeScript类型？

• 直接用Vue官方提供的类型即可，无需自行处理Proxy相关的类型定义
• 针对binding.value的具体结构定义类型，通过泛型绑定到官方类型上，就能解决IDE的报错问题

示例代码 #

// 先定义binding.value对应的业务类型
type ProductImpression = {
  productId: string;
  productName: string;
  // 按需添加其他字段
};

import type { DirectiveBinding } from 'vue';

export const useProductImpressionTracking = {
  mounted: (el: HTMLElement, binding: DirectiveBinding<ProductImpression>) => {
    if (binding.value) {
      // 此时IDE会自动识别value的属性，不再报错
      console.log(binding.value.productId);
    }
  }
};

关键说明 #

如果只写DirectiveBinding不指定泛型，binding.value会被推断为unknown类型，IDE自然会提示“value不存在”。通过泛型绑定具体的value类型后，既能消除报错，还能获得完整的类型提示。

如果是Vue 2项目，对应官方类型是VNodeDirective，可以这样用：

import type { VNodeDirective } from 'vue';

mounted: (el: HTMLElement, binding: VNodeDirective & { value: ProductImpression }) => {
  // ...
}

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