vlambda
2022-04-26

7 个实用 TypeScript 单行代码

来源 | https://javascript.plainenglish.io/7-quick-typescript-one-liners-d5c060f5fb94

一般更少的代码通常意味着是更好的代码，因此，今天，我将跟大家分享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')); // 123console.log(mask('123456789', 4)); // *****6789console.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()); // 2console.log(incOnce()); // 2console.log(incOnce()); // 2console.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')); // -1421493998console.log(sdbm('Hello')); // -1421493998console.log(sdbm('World')); // -2242392430

写在最后

以上就是我今天跟大家分享的7个关于TypeScript的单行代码技巧，希望对你有帮助。如果你有什么问题，请在留言区给我留言，我会尽快回复。

如果你喜欢我今天的内容，请记得点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。