​​​​​​​分享7 个实用 TypeScript 单行代码

目录
  • 1、底部可见
  • 2、块数组
  • 3、mask
  • 4、on / off
  • 5、getUUID
  • 6、once
  • 7、数据库

前言:

一般更少的代码通常意味着是更好的代码,因此,今天,我将跟大家分享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 单行代码内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 关于TypeScript开发的6六个实用小技巧分享

    目录 1. 开发之前确定实体类型 2. 请求接口时只需要定义自己需要用到的字段 3. 使用枚举类型 4. DOM元素的类型要正常给 5.对象的类型要怎么给 6.结构赋值时类型怎么给 总结 本文总结一下使用TypeScript开发应用程序的一点小经验.说之前,推荐一个VSCODE立即执行TS代码的插件quokka.js, 使用方式,ctrl+shipt+p,输入关键字quokka 回车之后,输入代码之后会立即执行 1. 开发之前确定实体类型 在正式编码之前,如果没有接口文档的话,最好能拿到数据字典

  • TypeScript 引用资源文件后提示找不到的异常处理技巧

    在tsx中引用图片,在文件文本编辑器中提示错误引用: typescript无法识别非代码文件(js是可以的).如果需要在ts中识别此文件资源,可以先声明文件类型. 新建一个ts文件,比如global.d.ts(.d.ts是typescript declaration file的简称),并放在主要代码文件夹下. 在ts文件中,添加各种文件类型的声明,比如: declare module '*.svg' { interface Svg { content: string; id: string; v

  • 你可能不知道的typescript实用小技巧

    目录 前言 函数重载 映射类型 Partial, Readonly, Nullable, Required Pick, Record Exclude, Omit ReturnType 类型断言 枚举 元组 范型 infer 总结 前言 用了很久的 typescript,用了但感觉又没完全用.因为很多 typescript 的特性没有被使用,查看之前写的代码满屏的 any,这样就容易导致很多 bug,也没有发挥出 typescript 真正的"类型"威力.本文总结了一些使用 typesc

  • ​​​​​​​分享7 个实用 TypeScript 单行代码

    目录 1.底部可见 2.块数组 3.mask 4.on / off 5.getUUID 6.once 7.数据库 前言: 一般更少的代码通常意味着是更好的代码,因此,今天,我将跟大家分享7个TypeScript的单行代码,其中不乏泛型.断言等高级用法,希望对大家有所帮助. 1.底部可见 确定页面底部是否可见. const bottomVisible = (): boolean => document.documentElement.clientHeight + window.scrollY >

  • 分享12个实用的jQuery代码片段

    jQuery是一款优秀的JavaScript库,它在WEB开发者和网页设计师中非常出名,帮助网页设计师开发出很多有创意和漂亮的WEB页面. 本文主要分享了12个有用的jQuery技巧,具体内容如下 下面是我收集的一些小技巧,这些技巧将帮助你提高你网站布局和应用的创意性以及功能性. 一.在新窗口打开链接 用这个代码,你点击超文本链接时会在新窗口中打开,为用户带来更好的体验: $(document).ready(function() { //select all anchor tags that h

  • 10个惊艳的Swift单行代码

    几年前,一篇表述"10个Scala函数式单行代码"的文章非常受欢迎,并且随后立马出现了其他的语言版本,例如Haskell版本,Ruby版本,Groovy版本,Clojure版本,Python版本,C#版本,F#版本,CoffeeScript版本等. 我们不知道有多少人真的对这些单行代码印象深刻,但我认为,这能激励大家去了解更多有关于函数式编程的内容. 1 数组中的每个元素乘以2 特别简单,尤其是使用map解决的话. (1...1024).map{$0 * 2} 2 数组中的元素求和 虽

  • 分享十八个杀手级JavaScript单行代码

    前言 JavaScript不断发展壮大,因为它是最容易上手的语言之一,因此为市场上的新成为技术怪才打开了大门. 而且,无论你是JavaScript的新手还是更多的专业开发人员,学习新知识总是一件好事. 本文整理了一些非常有用的单行代码,这些单行代码可以帮助你提高工作效率. 什么是单行代码? 单行代码是一种代码实践,其中我们仅用一行代码执行某些功能. 单行代码实例 1.复制到剪贴板 使用 navigator.clipboard.writeText 轻松将任何文本复制到剪贴板. const copy

  • 分享20个JavaScript 单行代码

    目录 1.获取浏览器Cookie的值 2.将RGB转换为十六进制 3.复制到剪贴板 4.检查日期是否有效 5.查找一年中的某一天 6.大写字符串 7.查找两个日期之间的天数 8.清除所有Cookie 9.生成随机十六进制 10.从数组中删除重复项 11.从URL获取查询参数 12.从日期输出时间 13.检查数字是偶数还是奇数 14.求数字的平均值 15.滚动到顶部 16.反转字符串 17.检查数组是否为空 18.获取选定的文本 19.打乱数组 20.检测暗模式 1.获取浏览器Cookie的值 通

  • 分享50个超级有用的JavaScript单行代码(推荐!)

    目录 前言 日期 字符串 工具 总结 前言 在这篇文章中,我列出了一个系列的50个 JavaScript 单行代码,它们在使用 vanilla js(≥ ES6)进行开发时非常有用.它们也是使用该语言在最新版本中为我们提供的所有功能来解决问题的优雅方式. 我将它们分为以下5大类: 日期 字符串 数字 数组 工具 事不宜迟,我马上开始的,我希望你发现他们对你有帮助! 日期 1. 日期是否正确(有效) 此方法用于检查给定日期是否有效 const isDateValid = (...val) => !

  • 15个非常实用的JavaScript代码片段

    本文实例为大家分享了非常实用的js片段,供大家参考,具体内容如下 1.如何区分IE及非IE浏览器: if(!+[1,]){ //IE 11 不支持 alert("这是 IE 浏览器"): }else{ alert("这不是 IE 浏览器"): } 2.将日期直接转换为数值: +new Date(); 3.非IE浏览器下将类数组对象 "arguments"转为数组: Array.prototype.slice.call(arguments); 4.

  • 60个很实用的jQuery代码开发技巧收集

    由于内容比较多建议用CTRL+F搜索 偶然在网上看到这些不错的jQuery代码开发技巧.原文收集了30个,另外查找的时候发现了还有20个.加上另外十个实用的jQuery代码片段,共60个代码技巧,收集在一起分享给大家. 1. 创建一个嵌套的过滤器 .filter(":not(:has(.selected))") //去掉所有不包含class为.selected的元素 2. 重用你的元素查询 var allItems = $("div.item"); var keep

  • 一些实用的jQuery代码片段收集

    下边这些jQuery片段只是很少的一部分,如果您在学习过程中也遇到过一些常用的jQuery代码,欢迎分享.下边就让我们看看这些有代码片段. 1.jQuery得到用户IP: 复制代码 代码如下: $.getJSON("http://jsonip.appspot.com?callback=?", function (data) { alert("Your ip: " + data.ip); }); 2.jQuery查看图片的宽度和高度: 复制代码 代码如下: var t

  • 非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】

    本文实例总结了非常实用的jQuery代码段.分享给大家供大家参考,具体如下: 检测IE浏览器 在进行CSS设计时,IE浏览器对开发者及设计师而言无疑是个麻烦.尽管IE6的黑暗时代已经过去,IE浏览器家族的人气亦在不断下滑,但我们仍然有必要对其进行检测.当然,以下片段亦可用于检测其它浏览器. $(document).ready(function() { if (navigator.userAgent.match(/msie/i) ){ alert('I am an old fashioned In

随机推荐