前言

在前端开发中，工具函数是提高代码复用率、保持代码整洁和增加开发效率的关键。使用 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);