vue3 ts 如何声明ref dom 数据类型

在 Vue 3 中使用 TypeScript 时，你可以通过 ref 来引用 DOM 元素或组件实例，并且可以通过类型注解来明确指定这些引用的类型。这有助于提高代码的可读性和类型安全性。

使用 `ref` 引用 DOM 元素

当你想引用一个 DOM 元素时，可以使用 ref 并结合 TypeScript 的类型注解来指定该元素的类型。Vue 提供了 Ref<T> 类型来帮助你进行类型标注。

示例：引用 DOM 元素

假设你有一个 <div> 元素，并希望通过 ref 来引用它：

<template>
  <div ref="myDiv">Hello, Vue 3 with TypeScript!</div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue';

export default defineComponent({
  setup() {
    // 明确指定 myDiv 是 HTMLDivElement 类型的 Ref
    const myDiv = ref<HTMLDivElement | null>(null);

    onMounted(() => {
      if (myDiv.value) {
        console.log('myDiv width:', myDiv.value.offsetWidth);
      }
    });

    return {
      myDiv,
    };
  },
});
</script>

使用 `ref` 引用子组件

如果你需要引用一个子组件实例，可以通过 ref 并结合子组件的类型来实现。

示例：引用子组件

假设你有一个名为 ChildComponent 的子组件，并希望在父组件中引用它：

ChildComponent.vue

<template>
  <div>Child Component</div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'ChildComponent',
  methods: {
    sayHello() {
      console.log('Hello from ChildComponent!');
    }
  }
});
</script>

ParentComponent.vue

<template>
  <div>
    <ChildComponent ref="childComponent" />
    <button @click="callChildMethod">Call Child Method</button>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default defineComponent({
  components: {
    ChildComponent,
  },
  setup() {
    // 明确指定 childComponent 是 ChildComponent 类型的 Ref
    const childComponent = ref<InstanceType<typeof ChildComponent> | null>(null);

    const callChildMethod = () => {
      if (childComponent.value) {
        childComponent.value.sayHello();
      }
    };

    return {
      childComponent,
      callChildMethod,
    };
  },
});
</script>

解释

引用 DOM 元素：
- 使用 ref<HTMLDivElement | null> 来定义一个对 DOM 元素的引用。
- 在 onMounted 钩子中访问 DOM 元素的属性（如 offsetWidth）以确保在 DOM 已经挂载后进行操作。
引用子组件：
- 使用 ref<InstanceType<typeof ChildComponent> | null> 来定义一个对子组件实例的引用。
- InstanceType<typeof ChildComponent> 是一种类型推断方式，用于获取 ChildComponent 的实例类型。
- 通过 childComponent.value 访问子组件的方法和属性。

其他注意事项

类型安全：在访问 ref 的值之前，最好检查其是否为 null，以避免潜在的运行时错误。
模板引用：在 <template> 中使用 ref 属性时，Vue 会自动将相应的 DOM 元素或组件实例绑定到 setup 函数中的 ref 变量上。

通过这种方式，你可以在 Vue 3 和 TypeScript 项目中清晰地声明 ref 的类型，从而提高代码的健壮性和可维护性。

InstanceType 会返回什么样的数据类型

在 TypeScript 中，InstanceType<T> 是一个内置的工具类型，用于从构造函数类型的 T 中提取实例类型。具体来说，当你有一个类或组件的构造函数类型时，InstanceType<T> 可以帮助你获取该类或组件实例的具体类型。

`InstanceType<typeof ChildComponent>`

假设你有一个 Vue 组件 ChildComponent，其定义如下：

<template>
  <div>Child Component</div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'ChildComponent',
  data() {
    return {
      message: 'Hello from ChildComponent!',
    };
  },
  methods: {
    sayHello() {
      console.log(this.message);
    }
  }
});
</script>

在这个例子中，ChildComponent 是通过 defineComponent 定义的一个 Vue 组件。InstanceType<typeof ChildComponent> 的作用是提取这个组件实例的类型。

提取的类型结构

InstanceType<typeof ChildComponent> 实际上提取的是 Vue 组件实例的类型。这个类型包括以下内容：

属性（Properties）：
- 来自 data 函数返回的对象中的属性。
- 来自 computed 属性。
- 来自 props。
方法（Methods）：
- 来自 methods 对象中的方法。
生命周期钩子（Lifecycle Hooks）：
- Vue 提供的生命周期钩子（如 mounted、created 等），这些钩子可以通过 this 访问。
其他 Vue 特性：
- $el：指向根 DOM 元素。
- $refs：包含所有引用的 DOM 元素和子组件实例。
- $emit：触发事件的方法。
- $root：根 Vue 实例。
- $slots 和 $scopedSlots：插槽相关内容。

示例

假设我们有上述的 ChildComponent，那么 InstanceType<typeof ChildComponent> 将会生成一个类似以下结构的类型：

type ChildComponentInstance = {
  // 来自 data 函数的属性
  message: string;

  // 来自 methods 对象的方法
  sayHello(): void;

  // Vue 实例的基本属性和方法
  $el: HTMLElement | null;
  $refs: { [key: string]: any };
  $emit(event: string, ...args: any[]): void;
  $root: Vue | null;
  $slots: { [key: string]: VNode[] | undefined };
  $scopedSlots: { [key: string]: ScopedSlot | undefined };

  // 生命周期钩子
  mounted(): void;
  created(): void;
  // 其他生命周期钩子...
};

需要注意的是，实际的类型会更加复杂，并且包含了 Vue 内部实现的一些属性和方法。Vue 3 使用了响应式系统，因此这些属性和方法也会遵循 Vue 的响应式规则。

实际使用示例

让我们回到之前的例子，看看如何在父组件中正确地使用 InstanceType<typeof ChildComponent>：

<template>
  <div>
    <ChildComponent ref="childComponent" />
    <button @click="callChildMethod">Call Child Method</button>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default defineComponent({
  components: {
    ChildComponent,
  },
  setup() {
    // 明确指定 childComponent 是 ChildComponent 类型的 Ref
    const childComponent = ref<InstanceType<typeof ChildComponent> | null>(null);

    const callChildMethod = () => {
      if (childComponent.value) {
        childComponent.value.sayHello(); // 调用子组件的方法
        console.log(childComponent.value.message); // 访问子组件的数据属性
      }
    };

    return {
      childComponent,
      callChildMethod,
    };
  },
});
</script>

总结

InstanceType<typeof ChildComponent> 提取的是 Vue 组件实例的类型，包括 data、computed、methods、props 以及 Vue 提供的各种属性和方法。
这种方式可以帮助你在 TypeScript 中获得更严格的类型检查和更好的代码提示，从而提高开发效率和代码质量。
在实际项目中，结合 Vue 的响应式系统和 TypeScript 的静态类型检查，可以构建出既高效又安全的应用程序。

posted on 2025-01-25 20:21 joken1310 阅读(1137) 评论(0) 收藏举报

刷新页面返回顶部

joken-前端工程师

使用 ref 引用 DOM 元素