2021 年 JavaScript/Typescript 技巧汇编🚀

我将在本文中讨论最新的 JavaScript/Typescript 技巧，其中还包括 ES2020 的新增功能和 Typescript 的新类型相关新增功能

可选函数调用

你经常需要在函数内部回调一个函数。回调函数通常是可选的。所以你必须检查它是否定义，以避免出现<function name> is not callable错误。这时，可选函数调用就派上用场了。

_无法读取的数字的分隔符

较大的数字通常会造成可读性问题。在这种情况下，你可以_使用

用于循环Array.entries获取索引for_of

JavaScript 的for_of循环非常棒。它比丑陋的forEach高阶函数可读性强得多。但很多时候我们需要当前元素的索引。循环默认不提供这个功能for_of。这时Array.entries就派上用场了。它将元素数组转换为索引数组，元素

但这种可读性会降低性能。因为Array.entries需要额外迭代一次才能映射索引。所以它比常规循环慢 20-30% forEach。for感谢 @lukeshiru 的修正❤️

[Typescript] 模板字面量类型

在 JavaScript/Typescript 中进行字符串验证非常困难。检查每种类型的字符串组合都很困难。Typescript 虽然union |有所帮助，但操作重复。因此引入了模板字面量类型。

[Typescript]override关键字

覆盖父class方法并不是什么新鲜事。这在所有面向对象编程 (OOP) 语言中都可用。但在 JS 中，你可以做任何事情，有时甚至并非情愿。不过，TypeScript 4.3 Beta 引入了关键字，以使方法覆盖更安全。你必须在要覆盖的方法名称前override使用关键字 。你必须将方法设置为 true才能使用此功能。override
noImplicitOverridetsconfig.json

+parseInt运算符作为& 的替代parseFloat

你知道解析数字字符串的parseInt方法parseFloat吗？你也可以在任何数字字符串前面
使用运算符，将其解析为数字。如果字符串不是数字， 则会返回+
NaN

不建议用parseInt或替换parseFloat。因为这可能会导致未知的错误和行为，因为+它也是一个算术运算符，并且它会将空字符串转换""为 ，0这很不妥。所以不要总是使用它。它还会损害可读性。提到它是因为它也是可行的……再次感谢@lukeshiru指出问题❤️

[Typescript] 类型阴影⚡💪🏻

您的函数可能接受多种类型的参数，并安全地解析/验证它们，并根据传入的参数返回不同类型/形状的结果。在这种情况下，类型阴影就派上用场了。您可以多次声明同一个函数，并使用不同的参数集和类型来获得所需的结果。类型阴影也适用于其他类型。