如何在TypeScript与Vue组合式API（setup脚本）中使用自定义指令

在Vue 3的TypeScript+Setup脚本环境下，自定义指令的el参数类型可根据绑定的DOM元素场景来指定：

• 通用DOM元素场景：直接使用HTMLElement类型，这是所有HTML元素的基类，适用于大多数自定义指令场景：

<script setup lang="ts">
const vFocus = {
  mounted(el: HTMLElement) {
    el.focus()
  }
}
</script>

<template>
  <input v-focus />
</template>

• 特定元素场景：如果指令仅绑定到某类特定元素（比如输入框），可以用更精确的类型（如HTMLInputElement），这样能获得该元素专属属性和方法的类型提示：

<script setup lang="ts">
const vFocus = {
  mounted(el: HTMLInputElement) {
    el.focus()
    // 此时可直接访问input的value等属性，TS会提供类型校验
    console.log(el.value)
  }
}
</script>

• 用Vue内置类型约束整个指令：也可以从vue包导入Directive泛型，直接约束指令对象的类型，el的类型会自动推导：

<script setup lang="ts">
import type { Directive } from 'vue'

// 泛型参数指定el的类型为HTMLInputElement
const vFocus: Directive<HTMLInputElement> = {
  mounted(el) {
    el.focus()
  }
}
</script>

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