我try 过用打字脚本练习打字体操,我的目标是实现对数字文字的数学运算. 首先,我实现了类型BuildArray:

type BuildArray<
    Length extends number, 
    Ele = unknown, 
    Arr extends unknown[] = []
> = Arr['length'] extends Length 
        ? Arr 
        : BuildArray<Length, Ele, [...Arr, Ele]>;
type MyArray = BuildArray<3> // type MyArray = [unknown, unknown, unknown]

然后,我实现了类型Add:

type Add<Num1 extends number, Num2 extends number> = 
    [...BuildArray<Num1>, ...BuildArray<Num2>]['length']
type AddResult = Add<2, 5> // type AddResult = 7

但是,当我try 在Add的基础上实现Multiply时,出现错误:

type Multiply<Num1 extends number, Num2 extends number, Counter extends number = 0, Result extends number = 0> =
    Counter extends Num2?
    Result:
    Multiply<Num1, Num2, Add<Counter, 1>, Add<Num1, Result>>
type MultiplyResult = Multiply<4, 5> // type MultiplyResult = 20

虽然结果是正确的,但出现编译错误:

enter image description here

Playground link

有人能告诉我为什么会发生这个编译错误吗?

推荐答案

当你在Add<Counter, 1>中超过Counter时,它正在扩展类型number,但它仍然是未知数.当它从Add传递到BuildArray时,你就会得到这样的判断:

Arr['length'] extends Length?

基于该判断,您有不同的预期类型ArrBuildArray<Length, Ele, [...Arr, Ele]>,它们将再次出现相同的问题.

回到Add,在未知数字的情况下,打字脚本不会实现这个lengthprops 是Array的props ,而Array已经是number了.

因此,您获得了正确的值,但是类型本身仍然不能确定这是不是number,因为BuildArray中的判断Arr['length'] extends Length?不能被解析为知道Arr是我们试图访问length的类型.

我不确定这是否足够清楚,但TL;DR:为了以最小的更改实现您所需的内容,您需要告诉TypeScrip,这Add类型将始终是number,而不是依赖于TypeScrip本身来学习.

例如,您可以通过添加& number来强制此信息:

type Add<Num1 extends number, Num2 extends number> =
    [...BuildArray<Num1>, ...BuildArray<Num2>]['length'] & number
// −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−^^^^^^^^

或进行任何类型的判断.

Playground link

Javascript相关问答推荐

使用TMS Web Core中的HTML模板中的参数调用过程

如何分配类型脚本中具有不同/额外参数的函数类型

在React中获取数据后,如何避免不必要的组件闪现1秒?

字节数组通过echo框架传输到JS blob

Next.js(react)使用moment或不使用日期和时间格式

为什么promise对js中的错误有一个奇怪的优先级?

如何从隐藏/显示中删除其中一个点击?

Webpack在导入前混淆文件名

当我try 将值更改为True时,按钮不会锁定

将相关数据组合到两个不同的数组中

在JS/TS中将复杂图形转换为数组或其他数据 struct

使用Reaction窗体挂钩注册日历组件

构建器模式与参数对象输入

如何在AG-Grid文本字段中创建占位符

JWT Cookie安全性

JavaScript将字符串数字转换为整数

我如何才能让p5.js在不使用实例模式的情况下工作?

为什么我的Reaction组件不能使用createBrowserRouter呈现?

如何使用Reaction/Redux创建购物车逻辑?

使用Firebase实时数据库`update`在同一 node 上执行多个更新