用TypeScript 4.4编写更可读的代码

133 阅读3分钟

TypeScript 4.4有一个令人兴奋的功能。它被称为别名条件的控制流分析,这是一个相当大的口号。

在这篇文章中,我们将解读这项新功能,并展示它如何有助于提高代码的可读性。

通过间接类型缩小const

2021年6月24日,Anders Hejlsberg关闭了TypeScript GitHub仓库中的一个问题,标题为 "通过const 间接类型缩小"。该问题自2016年以来一直开放,它被关闭是因为它被一个解决别名条件表达式和判别符的控制流分析的拉动请求所覆盖。

可以说,从该问题的两个反应来看,TypeScript社区对此非常兴奋。

Reactions on GitHub to TypeScript's Indirect Type Narrowing

更不用说Twitter上的普遍喜悦了。

Reactions on Twitter to TypeScript's Indirect Type Narrowing

Zeh的推文很好地总结了别名条件的控制流分析的意义。

缺少常量的类型缩小,使我重复代码,或避免有用的namef常量,太多次了

有了这个功能,我们可以写出更多可读的代码,减少重复。这真是太神奇了!

用TypeScript 4.4编写更具表现力的代码

与其直接解释这个新的语言特性是什么,不如让我们从编写一些代码的位置开始,看看TypeScript 4.4能实现哪些我们以前无法解决的问题。

这里有一个简单的函数,它将所有收到的参数相加并返回总数。它是一个宽容的函数,允许你以字符串的形式提供数字。因此,它将成功地处理'2' ,如同处理2

当然,这是一个略显矫揉造作的例子,但它是一个展示新功能的好方法。

function add(...thingsToAdd: (string | number)[]): number {
    let total = 0;
    for (const thingToAdd of thingsToAdd) {
        if (typeof thingToAdd === 'string') {
            total += Number(thingToAdd);
        } else {
            total += thingToAdd;
        }
    }
    return total;
}

console.log(add(1, '7', '3', 9))

TypeScript的操场上试试吧。

这个函数虽然有效,但不是超级表达式的。typeof thingToAdd === 'string' 有两个目的。

  1. 它将类型从string | number 缩小到string
  2. 它将逻辑分支化,这样,string 可以被胁迫为number ,并添加到总数中。

你可以从阅读代码中推断出这一点。然而,如果我们改写它以捕捉意图呢?

让我们尝试创建一个shouldCoerceToNumber 常量来表达我们需要采取的行动。

function add(...thingsToAdd: (string | number)[]): number {
    let total = 0;
    for (const thingToAdd of thingsToAdd) {
        const shouldCoerceToNumber = typeof thingToAdd === 'string';
        if (shouldCoerceToNumber) {
            total += Number(thingToAdd);
        } else {
            total += thingToAdd;
        }
    }
    return total;
}

console.log(add(1, '7', '3', 9))

TypeScript的操场上试试。

这是有效的代码。然而,TypeScript 4.3被一个错误噎住了。

TypeScript 4.3 Error

正在浮现的错误是。

Operator '+=' cannot be applied to types 'number' and 'string | number'.(2365)

这里发生了什么?TypeScript不记得shouldCoerceToNumber 代表了从string | numberstringthingToAdd 的类型缩减。因此,当我们编写依赖它的代码时,thingToAdd 的类型与string | number 保持不变。

这有可怕的后果。这意味着我们无法编写我们感兴趣的、对代码库维护者更有利的、更具表现力的代码。这就是TypeScript 4.4与我们的新功能所释放的东西。

让我们改变操场,改用TypeScript 4.4。

No Error in TypeScript 4.4

TypeScript 游乐场中进行尝试。

现在我们已经切换到TypeScript 4.4,令人高兴的是,我们不再有错误了。而且,如截图所示,thingToAdd 变量已经被缩小到了string 。这是因为对别名条件的控制流分析已经开始发挥作用了。

我们现在正在编写更具表现力的代码,TypeScript也愿意我们走下去。

阅读更多

这个功能是对TypeScript语言的一个巨大补充。它应该对人们使用TypeScript编写代码的方式产生重大、长期、积极的影响。

要阅读更多内容,请查看优秀的TypeScript 4.4 测试版发布说明。还有一些其他令人兴奋的功能也将随这个版本一起发布。

非常感谢TypeScript团队再次改进语言,为人们编写可读代码做出了真正的贡献。

The postWrite more readable code with TypeScript 4.4appeared first onLogRocket Blog.