「2024年」前端开发常用工具函数总结 TypeScript

前言

在前端开发中，工具函数是提高代码复用率、保持代码整洁和增加开发效率的关键。使用 TypeScript 编写工具函数不仅可以帮助开发者捕捉到更多的类型错误，还可以提供更清晰的代码注释和更智能的代码补全。下面是一些在 TypeScript 中常用的前端开发工具函数的总结。

示例

1. 深拷贝对象

在处理对象时，经常需要创建对象的深拷贝来避免副作用。

function deepClone<T>(target: T): T {
  if (target === null || typeof target !== "object") {
    return target;
  }
  let cloneTarget = Array.isArray(target) ? [] : {};
  for (const key in target) {
    cloneTarget[key] = deepClone(target[key]);
  }
  return cloneTarget as T;
}

2. 防抖函数

防抖函数可以防止函数被频繁调用，尤其适用于输入框搜索、窗口大小变化等场景。

function debounce<F extends (...args: any[]) => any>(func: F, wait: number): (...args: Parameters<F>) => void {
  let timeoutId: ReturnType<typeof setTimeout> | null = null;
  return function(...args: Parameters<F>) {
    if (timeoutId !== null) {
      clearTimeout(timeoutId);
    }
    timeoutId = setTimeout(() => func(...args), wait);
  };
}

3. 节流函数

节流函数确保在特定的时间窗口内最多只执行一次函数。

function throttle<F extends (...args: any[]) => any>(func: F, limit: number): (...args: Parameters<F>) => void {
  let lastFunc: ReturnType<typeof setTimeout> | null = null;
  let lastRan: number | null = null;
  return function(...args: Parameters<F>) {
    if (!lastRan) {
      func(...args);
      lastRan = Date.now();
    } else {
      clearTimeout(lastFunc!);
      lastFunc = setTimeout(function() {
        if (Date.now() - lastRan! >= limit) {
          func(...args);
          lastRan = Date.now();
        }
      }, limit - (Date.now() - lastRan));
    }
  };
}

4. 类型守卫

类型守卫可以帮助TypeScript对类型进行更准确的判断。

function isString(val: unknown): val is string {
  return typeof val === 'string';
}

function isNumber(val: unknown): val is number {
  return typeof val === 'number';
}

5. 睡眠函数

在某些异步操作中，可能需要等待一定时间再进一步操作，这时睡眠函数非常有用。

function sleep(ms: number): Promise<void> {
  return new Promise(resolve => setTimeout(resolve, ms));
}

6. 获取URL参数

获取URL参数是前端开发中常见的需求，尤其是在处理网页跳转和数据传递的场景。

function getURLParameters(url: string): Record<string, string> {
  return (url.match(/([^?=&]+)(=([^&]*))/g) || []).reduce(
    (a, v) => {
      const [key, value] = v.split('=');
      a[key] = decodeURIComponent(value);
      return a;
    },
    {} as Record<string, string>
  );
}

7. 安全获取对象属性

在深层嵌套的对象中安全地获取属性，可以避免因为中间某个属性为undefined而导致的错误。

function get<T, P extends keyof T>(obj: T, path: P | string): T[P] | undefined {
  const paths = path.toString().split('.');
  let result = obj;
  for (const p of paths) {
    result = result[p];
    if (result === undefined) {
      return undefined;
    }
  }
  return result as T[P];
}

总结这些工具函数可以大大提升你在使用 TypeScript 进行前端开发时的效率和代码的质量。当然，这只是冰山一角，随着你对项目的深入，可能会有更多定制化的工具函数需要开发。

7. 判断是否是多维数组

  const isDeep = (arr: any) => arr.some((item: any) => item instanceof Array);