ts踩坑!vue3中ts文件用export导出公共方法的ts类型定义

当我们有一个ts文件,定义并export出该function,其中方法里边有定义的变量,方法、钩子函数等多种,并最终return出该变量、方法。

此时 ts规则校验会让我们返回该函数类型。如下

cpp 复制代码
export default function () {
  const chart = ref();
  const sidebarElm = ref<Element>();


  const chartResizeHandler = (): void => {
    if (chart.value) {
      chart.value.resize();
    }
  };


  const sidebarResizeHandler = (e: TransitionEvent): void => {
    if (e.propertyName === 'width') {
      chartResizeHandler();
    }
  };


  const initResizeEvent = (): void => {
    window.addEventListener('resize', chartResizeHandler, { passive: true });
  };


  const destroyResizeEvent = (): void => {
    window.removeEventListener('resize', chartResizeHandler);
  };


  const initSidebarResizeEvent = (): void => {
    sidebarElm.value = document.getElementsByClassName('sidebar-container')[0];
    if (sidebarElm.value) {
      sidebarElm.value.addEventListener(
        'transitionend',
        sidebarResizeHandler as EventListener,
        { passive: true }
      );
    }
  };


  const destroySidebarResizeEvent = (): void => {
    if (sidebarElm.value) {
      sidebarElm.value.removeEventListener(
        'transitionend',
        sidebarResizeHandler as EventListener
      );
    }
  };


  const mounted = (): void => {
    initResizeEvent();
    initSidebarResizeEvent();
  };


  const beforeDestroy = (): void => {
    destroyResizeEvent();
    destroySidebarResizeEvent();
  };


  const activated = (): void => {
    initResizeEvent();
    initSidebarResizeEvent();
  };


  const deactivated = (): void => {
    destroyResizeEvent();
    destroySidebarResizeEvent();
  };


  return {
    chart,
    mounted,
    beforeDestroy,
    activated,
    deactivated
  };
} 

那么如何定义该方法的ts类型呢?

在TypeScript中,你可以通过接口(Interface)或类型别名(Type Alias)来定义函数的类型。对于给出的函数,我会创建一个类型别名来定义返回的对象结构,并且为函数本身定义一个更具体的类型。

cpp 复制代码
import { Ref } from 'vue';

// 定义chart和sidebarElm的引用类型
type ChartRef = Ref<any> | undefined; // 这里假设chart是一个具有resize方法的对象,但具体类型取决于你的库
type SidebarElmRef = Ref<Element | null>;

// 定义事件处理函数的类型
type ChartResizeHandler = () => void;
type SidebarResizeHandler = (e: TransitionEvent) => void;

// 定义init和destroy函数类型
type InitResizeEventHandler = () => void;
type DestroyResizeEventHandler = () => void;
type InitSidebarResizeEventHandler = () => void;
type DestroySidebarResizeEventHandler = () => void;

// 定义生命周期钩子类型
type LifecycleHook = () => void;

// 定义返回对象的类型
interface ResizeHandlerReturn {
  chart: ChartRef;
  mounted: LifecycleHook;
  beforeDestroy: LifecycleHook;
  activated: LifecycleHook;
  deactivated: LifecycleHook;
}

// 定义你的函数类型
type ResizeHandlerFunction = () => ResizeHandlerReturn;

// 实现你的函数并为其添加类型注解
export default function useResizeHandler(): ResizeHandlerReturn {
  const chart: ChartRef = ref();
  const sidebarElm: SidebarElmRef = ref<Element | null>(null);

  // ... 省略之前的实现细节 ...

  // 返回带有类型注解的对象
  return {
    chart,
    mounted,
    beforeDestroy,
    activated,
    deactivated
  };
}

注意几点:

1.我使用了Ref类型来自Vue,

2.我为chart定义了一个类型ChartRef,假设它是一个具有resize方法的对象,但你可能需要根据你的实际情况来具体定义它。

3.我为sidebarElm定义了一个类型SidebarElmRef,它是Ref<Element | null>,因为ref的初始值可能是null。

4.我为所有的事件处理函数和生命周期钩子定义了类型别名,以便在函数内部使用它们。

5.我定义了一个ResizeHandlerReturn接口来描述我的函数应该返回的对象结构。

6.最后,我定义了一个ResizeHandlerFunction类型别名来描述你的函数本身。

7.在实现函数时,我添加了类型注解来帮助理解,确保你的函数和返回的对象符合你定义的类型。

相关推荐
sen_shan1 天前
Vue3+Vite+TypeScript+Element Plus开发-22.客制Table组件
vue.js·vue3·vite·element plus·按钮组件·表组件
是二牙2 天前
vue3+vite 多个环境配置
前端·vue3·vite
緑水長流*z2 天前
(03)Vue的常用指令
前端·vue.js·vue3·vue2·vue框架·vue学习笔记·vue学习教程
Edward-tan5 天前
【玩转全栈】—— Django+vue3+讯飞星火API 实现前端页面实时AI答复
vue3·全栈·django5
sen_shan11 天前
Vue3+Vite+TypeScript+Element Plus开发-10.多用户动态加载菜单
vue.js·typescript·vue3·element·element plus·动态菜单·多用户动态加载菜单
Samdy_Chan12 天前
同时支持Vue2/Vue3的图片懒加载组件(支持懒加载 v-html 指令梆定的 html 内容)
前端·vue·vue3·vue2·懒加载·图片懒加载·图像懒加载
USER_A00112 天前
【VUE3】Eslint 与 Prettier 的配置
vue3·eslint·prettier
sen_shan17 天前
Vue3+Vite+TypeScript+Element Plus开发-04.静态菜单设计
前端·javascript·typescript·vue3·element·element plus·vue 动态菜单
qq_3085623118 天前
vue3 中引入tinymce富文本
vue3·富文本·tinymce
sen_shan20 天前
Vue3+Vite+TypeScript+Element Plus开发-02.Element Plus安装与配置
前端·javascript·typescript·vue3·element·element plus