7个实用的TypeScript单行代码技巧

作者：代码拾荒

时间：2026-10-25

本文精选7个实用的TypeScript单行代码，涵盖页面底部检测、数组分块、字符掩码、事件监听管理、UUID生成、函数一次性执行及字符串哈希等场景。通过泛型与类型断言，提供简洁高效的前端开发解决方案。

文章目录

前言：

通常代码量越少，质量越高。本文将介绍7个TypeScript单行代码片段，其中包含泛型、类型断言等高级用法，希望能为开发者提供帮助。

1、底部可见

用于判断页面底部是否可见。

const bottomVisible = (): boolean =>
  document.documentElement.clientHeight + window.scrollY >=
  (document.documentElement.clientHeight ||
    document.documentElement.scrollHeight);

2、块数组

根据传入的大小参数，将数组分割为多个块。

const chunkArray = <T>(arr: T[], size: number) =>
  [...new Array(Math.ceil(arr.length / size))].map((_, i) =>
    arr.slice(i * size, (i + 1) * size),
  );
// [ [ 0, 1 ], [ 2, 3 ], [ 4 ] ]
console.log(chunkArray([0, 1, 2, 3, 4], 2));
// [ [ 0, 1, 2, 3, 4 ] ]
console.log(chunkArray([0, 1, 2, 3, 4], 100));

3、mask

对字符进行加密处理，支持指定末尾保留的字符数量，并可自定义加密字符。

const mask = (char: number | string, num = 0, mask = '*') =>
  String(char).slice(-num).padStart(String(char).length, mask);
console.log(mask('123')); // 123
console.log(mask('123456789', 4)); // *****6789
console.log(mask('123456789', 3, '#')); // ######789

4、on / off

为DOM元素或事件委托对象添加或移除事件监听器，无需手动调用addEventListener或removeEventListener。

const on = <T extends Window | Document | HTMLElement | EventTarget>(
  obj: T | null,
  ...args: Parameters<T['addEventListener']> | [string, Function | null, ...any]
): void => {
  obj?.addEventListener?.(
    ...(args as Parameters<HTMLElement['addEventListener']>),
  );
};
const off = <T extends Window | Document | HTMLElement | EventTarget>(
  obj: T | null,
  ...args:
    | Parameters<T['removeEventListener']>
    | [string, Function | null, ...any]
): void => {
  obj?.removeEventListener?.(
    ...(args as Parameters<HTMLElement['removeEventListener']>),
  );
};

5、getUUID

利用浏览器提供的加密API，生成符合RFC4122版本4标准的UUID。

const getUUID = () =>
  (String(1e7) + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, (c) =>
    (
      Number(c) ^
      (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (Number(c) / 4)))
    ).toString(16),
  );
console.log(getUUID());

6、once

确保函数仅执行一次。

const once = <T extends (...args: any) => any>(fn: T) =>
  (
    (ran = false) =>
    (): ReturnType<T> =>
      ran ? fn : ((ran = !ran), (fn = fn()))
  )();
let n = 1;
const incOnce = once(() => ++n);
console.log(incOnce()); // 2
console.log(incOnce()); // 2
console.log(incOnce()); // 2
console.log('n: ', n); // n: 2

7、数据库

将输入字符串哈希为一个整数。

const sdbm = (str: string) =>
  str
    .split('')
    .reduce(
      (acc, cur) => (acc = cur.charCodeAt(0) + (acc << 6) + (acc << 16) - acc),
      0,
    );
console.log(sdbm('Hello')); // -1421493998
console.log(sdbm('Hello')); // -1421493998
console.log(sdbm('World')); // -2242392430

到此这篇关于分享7 个实用 TypeScript 单行代码的文章就介绍到这了,更多相关TypeScript 单行代码内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！