TypeScript类型实现加减乘除详解

 更新时间:2023年04月14日 14:06:28   作者:嘉琪coder  
这篇文章主要为大家介绍了TypeScript类型实现加减乘除示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

引言

在网上看到这道题目:请用TS类型实现整除?

type A = Divide<1, 0> // never
type B = Divide<4, 2> // 2
type C = Divide<10, 3> // 3

看完题目,我真的毫无思路,TS类型还能实现除法???一脸懵逼的我认真地研究了一位叫做  JoeYan大佬的解答:

type Tuple<T extends number, U extends any[] = []> =
    U['length'] extends T ? U : Tuple<T, [...U, any]>
type Subtract<
    A extends number,
    B extends number
> = Tuple<A> extends [...Tuple<B>, ...infer R] ? R['length'] : never
type SmallerThan<
    A extends number,
    B extends number,
    S extends any[] = []
> = S['length'] extends B
    ? false
    : S['length'] extends A
    ? true
    : SmallerThan<A, B, [...S,A]>
type Divide<A extends number, B extends number, S extends any[] = []> =
    B extends 0 ? never : SmallerThan<A, B> extends true ? S['length'] : Divide<Subtract<A, B>, B, [...S, any]>;
type res = Divide<200, 10> // 20

分析

乍一看,真的惊呆了,但是一步一步分析,还是能够看懂的,本文将整个研究的过程记录了下来:

TS类型没有直接提供数字的加减乘除,所以这位大佬的减法和整除都是通过数组长度计数来实现的。我平时体操练习很少,在没看他的解答前,我永远不会想到还能这么玩儿。

Divide

如果要实现98%10,假设A是98,B是10,让A一直减B,直到A小于B,无法继续再减,就能得到整除的结果。

A能减去9次B,每次进行减10的时候,往S(用来计数的数组,初始值为空数组)里面push一个元素。A减去9次10后,S数组的长度是9。此时A是8,B是10,A小于B,返回S的长度9。

type Divide<A extends number, B extends number, S extends number[] = []> =
    B extends 0 ? never : SmallerThan<A, B> extends true ? S['length'] : Divide<Subtract<A, B>, B, [...S, any]>;

上面这段代码的字面意思是:

  • B是否为0,直接返回never
  • A如果小于B,返回S的长度
  • A如果大于B,我们执行A-B,然后我们给S数组push一个元素,再次计算Divide

接下来,让我们开始逐个分析。

SmallerThan

SmallerThan用于判断A是否小于B

type res = SmallerThan<10,2>  // res为false
type res = SmallerThan<2,20> // res为true
type SmallerThan<
    A extends number,
    B extends number,
    S extends any[] = []
> = S['length'] extends B
    ? false
    : S['length'] extends A
    ? true
    : SmallerThan<A, B, [...S,any]>

字面上看起来是:

  • S的长度等于B,返回false
  • S的长度不等于B且S的长度等于A,返回true
  • S的长度不等于A和B,将any推入S数组

接下来举例来看:

type res = SmallerThan<3,2>  
// 首先S['length']=0 ,所以不等于A和B,此时将any推入数组,S数组变成[any]
// 接下来S['length'] =1,还是B等于A和B,此时继续将A放入数组,S数组变成[any,any]
// 此时S['length'] = 2,所以得出S的长度等于B,返回false

总之,S的长度是一次一次的累加的,先等于谁的长度,谁就更小。 如果S的长度先等于B的长度,那么就是A>B。如果S的长度先等于A的长度,就是A<B

Tuple

作用是将数字转成数组,且数组的长度等于数字的大小

type Tuple<T extends number, U extends any[] = []> =
    U['length'] extends T ? U : Tuple<T, [...U, any]>
type res4 = Tuple<3> // [any, any, any]‘
// 基本上和上面的SmallerThan差不多,就是不够长度,就push一个any进去

Subtract

顾名思义,获取A-B的值

type Subtract<
    A extends number,
    B extends number
> = Tuple<A> extends [...Tuple<B>, ...infer R] ? R : never
type res3 = Subtract<10,8> // [any, any]
type Subtract<
    A extends number,
    B extends number
> = Tuple<A> extends [...Tuple<B>, ...infer R] ? R['length'] : never
type res3 = Subtract<20,10> // 10
// 一开始把A转换长度为20的数组,B转换成长度为10的数组,然后让ts自己去infer,A的长度等于B的长度加上多少长度的数组,然后返回R的长度

最后

前面已经实现了整除和减法,本着练习的态度,让我们再实现一下乘法和加法。

加法

仿照前面的Subtract,不难实现:

type Add<A extends number, B extends number > = [...Tuple<A>,...Tuple<B>] extends [... infer T] ? T['length']:never

乘法

接下来,让我们实现一下乘法:

5*6 可以看作,5+5+5+5+5+5。

A*B,也就是A要累加自己B次。如果我们每进行一次加法,就让被乘数B减一,直到被乘数B为0,也就完成了累加。

type Tuple<T extends number, U extends any[] = []> =
    U['length'] extends T ? U : Tuple<T, [...U, any]>
type Mutiply<A extends number, B extends number, S extends any[] = []> = B extends 0 ? S['length'] : Mutiply<A, Subtract<B, 1>, [...S, ...Tuple<A>]>
type res = Mutiply<5,6> //30

坑点

type Tuple<T extends number, S extends any[] = []> = S['length'] extends T ? S : Tuple<T, [...S, any]> // 不报错
// type Tuple<T extends number, S extends any[] = []> = T extends S['length'] ? S : Tuple<T, [...S, any]> 
// 不能写成T extends S['length'],ts会报递归可能是无限的

总结

我觉得还是套路为主,在研究了别人的除法实现后,也就能很容易实现加法和乘法。但如果没有前面的研究,想破脑子也很难实现。

以上就是TypeScript类型实现加减乘除详解的详细内容,更多关于TypeScript类型加减乘除的资料请关注脚本之家其它相关文章!

相关文章

  • typescript类型体操及关键字使用示例详解

    typescript类型体操及关键字使用示例详解

    这篇文章主要为大家介绍了typescript类型体操及关键字使用示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-11-11
  • 前端轻量级MVC框架CanJS详解

    前端轻量级MVC框架CanJS详解

    你可能听说了这个新MVC框架: CanJS。还有什么比用它来创建一个联系人Web App更能深入了解它的办法呢?当看完这篇教程,你将全面了解用它的什么工具来创建你自己的Web App。
    2014-09-09
  • TypeScript 基本数据类型实例详解

    TypeScript 基本数据类型实例详解

    这篇文章主要为大家介绍了TypeScript 基本数据类型实例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-01-01
  • TypeScript中的递归类型示例解析

    TypeScript中的递归类型示例解析

    这篇文章主要为大家介绍了TypeScript中的递归类型示例解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-04-04
  • TS 中的类型推断与放宽实例详解

    TS 中的类型推断与放宽实例详解

    这篇文章主要为大家介绍了TS 中的类型推断与放宽实例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-10-10
  • TypeScript学习轻松玩转类型操作

    TypeScript学习轻松玩转类型操作

    这篇文章主要为大家介绍了TypeScript学习轻松玩转类型操作,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-07-07
  • TS中Array.reduce提示没有与此调用匹配的重载解析

    TS中Array.reduce提示没有与此调用匹配的重载解析

    这篇文章主要为大家介绍了TS中Array.reduce提示没有与此调用匹配的重载解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-06-06
  • 使用typeScript 进行扁平化数据转树实现demo

    使用typeScript 进行扁平化数据转树实现demo

    这篇文章主要介绍了使用typeScript 进行扁平化数据转树实现demo,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-06-06
  • 联合类型Union Types与交叉类型Intersection Types区别解析

    联合类型Union Types与交叉类型Intersection Types区别解析

    这篇文章主要为大家介绍了联合类型Union Types与交叉类型Intersection Types区别详解
    2023-06-06
  • laytpl 精致巧妙的JavaScript模板引擎

    laytpl 精致巧妙的JavaScript模板引擎

    laytpl是一款颠覆性的JavaScript模板引擎,它用巧妙的实现方式,将自身的体积变得小巧玲珑,不仅性能接近极致,并且还具备传统前端引擎的几乎所有功能
    2014-08-08

最新评论