Grokking Type-Level Programming: Crafting Arithmetic in TypeScript without Digits and Operators

\"\" — Photo by Chris Liverani on Unsplash

You may have heard that the TypeScript typing system is Turing complete. Literally, it means that you can write your own programming language or emulate Conway’s Game of Life using its types. Moreover, nowadays, there are complete 2D games written in TypeScript types (breaking news: there is DOOM in TypeScript types)!

In this article, I want to demonstrate the power of type-level programming in TypeScript, starting from the very basics. And what’s the beginning for us, the programmers? That’s right — numbers. I want to create the numeral system using only TypeScript types. By the end of this article, you’ll be able to manipulate numbers — even arrays of numbers — without using any digits or operators. Let’s get started!

In the middle of nowhere

“The journey of a thousand miles begins with one step.” — Lao Tzu

Every calculus or measurement system starts with zero. Zero is the neutral element for symmetric groups, where addition is a group operation in the group theory. Sorry, that got a bit nerdy. In short, we must define a zero for our type-level system to build everything else upon it.

type _Zero = \"🇺🇦\";

Here are two key points about this code line:

Abstracting from digits. I intentionally haven't used a \"0\" character (or even a 0-digit as a type, which I could). To abstract entirely from any pre-existing numeric representation, I decided to use my country's flag as a symbolic stand-in (Доброго вечора!)
Underscore prefix. I will use underscores to differentiate the internal types in my arithmetic system. Later, when we discuss the system's I/O, I will explain the relationship between internal and external types.

Numbers as a numeral system language

“Numbers are the universal language offered by the deity to humans as confirmation of the truth.” — St. Augustine of Hippo

In our algebra, we will operate on a set of positive integer numbers limited by the maximum. We will stop at 5, which will be enough to demonstrate the power of the TypeScript type system.

You might suspect, till now, that if we haven't provided any contextual sense for a zero in our system and put the flag emoji in it, what should we do with other numbers? Digits, Roman numerals, or other symbology don't matter when interpreting numbers in Turing complete systems. Relations matter!

Having a zero in our domain-specific language, we can define the number as the next recursion type:

type _Number = _Zero | { prev: _Number };

Every integer is the successor of the previous one, making this relationship crucial for future operations. Let's define the first generic, responsible for numbers relation

type _Next = { prev: T };

And finally, the prominent citizens of our village — the numbers!

type _One = _Next<_Zero>;
type _Two = _Next<_One>;
type _Three = _Next<_Two>;
type _Four = _Next<_Three>;
type _Five = _Next<_Four>;

type _Max = _Five;

Once again, we are responsible for defining the maximum value for our numeral system. Enforcing this limit will be helpful in future operations.

User-Friendly I/O

“Everything should be made as simple as possible, but not simpler.” — Albert Einstein

We are close to starting to create something computational. For now, we have defined the numeral system's \"numbers\" as TypeScript types.

Running ahead, I will not reveal a big secret if I say that the system's \"functions\" would be TypeScript generics. Generics take parameters like function arguments, and TypeScript’s type inference determines the return value.

However, using our already declared numeric types might be cumbersome because our users must always keep these definitions on hand. Fortunately, TypeScript provides literal types that we can consider as values of the numeral system. Let's imagine, for a while, how the function of adding would look in that case:

But we talked about the matter of predecessor-successor relations between types. How do literal types preserve it?

Let's consider previously defined numbers as internal types of our numeric system and literal types as external types. We will match them in a 1:1 relation—the user will provide literal-type arguments as input and receive the result in a literal-type view as output. However, the system will calculate the resulting type inferences based on internal types.

// The definition of \"external\" numbers
type _StringNumber = \"Zero\" | \"One\" | \"Two\" | \"Three\" | \"Four\" | \"Five\";

// Here, we convert \"internal\" types to \"external\"
type _StringifyNumber = T extends _Zero ? \"Zero\" 
    : T extends _One ? \"One\" 
    : T extends _Two ? \"Two\" 
    : T extends _Three ? \"Three\" 
    : T extends _Four ? \"Four\" 
    : T extends _Five ? \"Five\" : never;

// And vice versa, from \"external\" to \"internal\"
type _ParseNumber =  T extends  \"Zero\" ? _Zero 
    : T extends \"One\" ? _One 
    : T extends \"Two\" ? _Two 
    : T extends \"Three\" ? _Three 
    : T extends \"Four\" ? _Four 
    : T extends \"Five\" ? _Five : never;

As you remember, I mentioned that types with underscore prefixes are considered internal types. It means that users of our type-level system will not use them for user calculations. Eventually, to demonstrate user-specific types, let's start with some warm-up.

Increment: the first step into the world of Calculus

“From a tiny spark may a great fire grow.” — Dante Alighieri

For computer science, the increment is the most fundamental and, simultaneously, the most trivial operation. Attentive readers may have noticed that we have already implemented it as a _Next type. That will be right, but let's refine it to consider the upper limit of our algebra.

type _Increment = T extends _Max ? never : _Next;

As you see, we infer all exceeded values of our computations to never.

Let’s integrate this mathematical function with our I/O system from the previous section:

Referencing the schema above, we can introduce our first mathematical calculation crafted only on TypeScript types!

type Increment = 
  _StringifyNumber<_Increment<_ParseNumber>>;

Let's see what we have in the final stage:

Voila! We have a complete mathematical operation in the world without digits!

Addition without “+”

“Mathematics is the art of giving the same name to different things.” — Henri Poincaré

Let's move forward and create the most popular operation of arithmetics: addition. Looking at the implementation of our I/O converters, we can assert that iteration is not a big friend of type-level programming. The idea of gradual iteration from the first number to the sum of the numbers is natural but hard to complete in type-level systems.

What if we contract to the iteration's antagonist — recursion? It turns out that's a key! We can interpret the addition as the following recursion formula:

Can we implement this in terms of our numeral system? Let's break a formula into some meaningful tokens and consider them:

(a, b) parameters signature — as we have done with the increment function, generic parameters take care of it
b === 0 ? ... : ... condition — with the help of extends, TypeScript provides conditional types
add(...) recursion invocation — TypeScript allows recursive generics
a + 1 — we already implemented the increment in the previous paragraph
(b — 1) — the last secret puzzle that we need

Now, I propose you come to the start and recall what we define as the number of our numeral system:

type _Number = _Zero | { prev: _Number };

Notice the subtle hint about subtracting one from a number?

Reference to the prev! The previous number is the result of subtraction by one. So, we need to create a function that takes a number as an argument and returns its previous number.

This may be a dangerous intention because our definition of numbers includes a zero, which doesn't have a reference to a previous value.

Let's look at the recursion formula of an addition once again. In the condition predicate, we check the parameter's equality to zero. We use b only in the conditional branch, where b can't be a zero. This means we can create a non-zero assertion and use it in our decremental function.

Okay, we dive deeply this time, so let's push off from the bottom and rise to the surface together!

At first, the non-zero assertion that \"narrows\" the type:

type _NonZero = T extends _Zero ? never : T;

Next, the single subtraction by a prev reference:

type _Prev = _NonZero[\"prev\"];

And finally, ladies and gentlemen, the final form of addition!

type _Add =  
  B extends _Zero 
    ? A 
    : A extends _Max 
      ? never 
      : _Add<_Next, _Prev>;

Wrapping it to the user-friendly I/O…

type Add = 
  _StringifyNumber<_Add<_ParseNumber, _ParseNumber>>;

And finally, we have the long-awaited result!

\"\" — Oops! The result exceeded our algebraic maximum.

The subtraction operation can also be represented as recursion. Could you guess the formula in the comments? We can also implement this in our numeral system, which will be left in your exercise.

Bonus chapter: mapping of an array

“Nature is an infinite sphere whose center is everywhere and whose circumference is nowhere.”— Blaise Pascal

So far, we have defined a concept of number in our numeral system, implemented the basic mathematical operations in the realm of numbers, and finally convinced ourselves of the power of type-level programming.

So, if we defined the number as a TypeScript type, what’s stopping us from determining the array type of these \"numbers\"? Correct, nothing! The final trick for today will be implementing the function that returns the array's length.

This example doesn't require converting every array item by \"parse-stringify\" manipulations as we did above because we don't care about array content. We care about the array structure, which is so popular, particularly in functional programming languages.

To get the head and the tail or the array type, we must be able to use inferred types.

type Head = T extends [infer First, ...infer Rest] ? First : never;

type Tail = T extends [infer First, ...infer Rest] ? Rest : never;

What do we need it for? Okay, now let's return to our initial idea of calculating the length of an array.

Can we represent the length function as a recursion? Sure, we can!

We already have all the puzzles for the implementation of this recursion, so let's implement it!

type _ArrLength = 
  T extends [] 
    ? _Zero 
    : _Increment<_ArrLength>>;

And convert the result to a meaningful output…

type ArrLength = _StringifyNumber<_ArrLength>;

Let's check the result:

Kinda works, hah?

Final words

No digits, no operators — just as I promised at the beginning, we did it! This numeric system, built purely with TypeScript types, can evolve into even more sophisticated forms — your imagination is the only limit.

For example, my next step was the creation of the map function for arrays with the transformation callback as a generic parameter. And what do you suggest considering as a next step?

Thank you for reading the article. This article was in my mind for a year, and I finally put it on paper. Did it spark your curiosity, even for a moment? If so, give it a clap or drop a comment if you want to see more content like this.

Keep your types in shape! 🚀

Article references:

Thank you for being a part of the community

Before you go:

Be sure to clap and follow the writer ️👏️️
Follow us: X | LinkedIn | YouTube | Newsletter | Podcast | Differ
Check out CoFeed, the smart way to stay up-to-date with the latest in tech 🧪
Start your own free AI-powered blog on Differ 🚀
Join our content creators community on Discord 🧑🏻‍💻
For more content, visit plainenglish.io + stackademic.com

$\"\"$
Grokking Type-level Programming: Crafting Arithmetic in TypeScript without Digits and Operators was originally published in JavaScript in Plain English on Medium, where people are continuing the conversation by highlighting and responding to this story.
","contentEncoded","
Grokking Type-Level Programming: Crafting Arithmetic in TypeScript without Digits and Operators
Photo by Chris Liverani on Unsplash
You may have heard that the TypeScript typing system is Turing complete. Literally, it means that you can write your own programming language or emulate Conway’s Game of Life using its types. Moreover, nowadays, there are complete 2D games written in TypeScript types (breaking news: there is DOOM in TypeScript types)!
In this article, I want to demonstrate the power of type-level programming in TypeScript, starting from the very basics. And what’s the beginning for us, the programmers? That’s right — numbers. I want to create the numeral system using only TypeScript types. By the end of this article, you’ll be able to manipulate numbers — even arrays of numbers — without using any digits or operators. Let’s get started!
In the middle of nowhere
“The journey of a thousand miles begins with one step.” — Lao Tzu
Every calculus or measurement system starts with zero. Zero is the neutral element for symmetric groups, where addition is a group operation in the group theory. Sorry, that got a bit nerdy. In short, we must define a zero for our type-level system to build everything else upon it.
type _Zero = \"🇺🇦\";
Here are two key points about this code line:
Abstracting from digits. I intentionally haven't used a \"0\" character (or even a 0-digit as a type, which I could). To abstract entirely from any pre-existing numeric representation, I decided to use my country's flag as a symbolic stand-in (Доброго вечора!)
Underscore prefix. I will use underscores to differentiate the internal types in my arithmetic system. Later, when we discuss the system's I/O, I will explain the relationship between internal and external types.
Numbers as a numeral system language
“Numbers are the universal language offered by the deity to humans as confirmation of the truth.” — St. Augustine of Hippo
In our algebra, we will operate on a set of positive integer numbers limited by the maximum. We will stop at 5, which will be enough to demonstrate the power of the TypeScript type system.
You might suspect, till now, that if we haven't provided any contextual sense for a zero in our system and put the flag emoji in it, what should we do with other numbers? Digits, Roman numerals, or other symbology don't matter when interpreting numbers in Turing complete systems. Relations matter!
$\"\"$
Having a zero in our domain-specific language, we can define the number as the next recursion type:
type _Number = _Zero | { prev: _Number };
Every integer is the successor of the previous one, making this relationship crucial for future operations. Let's define the first generic, responsible for numbers relation
type _Next = { prev: T };
And finally, the prominent citizens of our village — the numbers!
type _One = _Next<_Zero>;
type _Two = _Next<_One>;
type _Three = _Next<_Two>;
type _Four = _Next<_Three>;
type _Five = _Next<_Four>;

type _Max = _Five;
Once again, we are responsible for defining the maximum value for our numeral system. Enforcing this limit will be helpful in future operations.
User-Friendly I/O
“Everything should be made as simple as possible, but not simpler.” — Albert Einstein
We are close to starting to create something computational. For now, we have defined the numeral system's \"numbers\" as TypeScript types.
Running ahead, I will not reveal a big secret if I say that the system's \"functions\" would be TypeScript generics. Generics take parameters like function arguments, and TypeScript’s type inference determines the return value.
However, using our already declared numeric types might be cumbersome because our users must always keep these definitions on hand. Fortunately, TypeScript provides literal types that we can consider as values of the numeral system. Let's imagine, for a while, how the function of adding would look in that case:
$\"\"$
But we talked about the matter of predecessor-successor relations between types. How do literal types preserve it?
Let's consider previously defined numbers as internal types of our numeric system and literal types as external types. We will match them in a 1:1 relation—the user will provide literal-type arguments as input and receive the result in a literal-type view as output. However, the system will calculate the resulting type inferences based on internal types.
// The definition of \"external\" numbers
type _StringNumber = \"Zero\" | \"One\" | \"Two\" | \"Three\" | \"Four\" | \"Five\";

// Here, we convert \"internal\" types to \"external\"
type _StringifyNumber = T extends _Zero ? \"Zero\"
: T extends _One ? \"One\"
: T extends _Two ? \"Two\"
: T extends _Three ? \"Three\"
: T extends _Four ? \"Four\"
: T extends _Five ? \"Five\" : never;

// And vice versa, from \"external\" to \"internal\"
type _ParseNumber = T extends \"Zero\" ? _Zero
: T extends \"One\" ? _One
: T extends \"Two\" ? _Two
: T extends \"Three\" ? _Three
: T extends \"Four\" ? _Four
: T extends \"Five\" ? _Five : never;
As you remember, I mentioned that types with underscore prefixes are considered internal types. It means that users of our type-level system will not use them for user calculations. Eventually, to demonstrate user-specific types, let's start with some warm-up.
Increment: the first step into the world of Calculus
“From a tiny spark may a great fire grow.” — Dante Alighieri
For computer science, the increment is the most fundamental and, simultaneously, the most trivial operation. Attentive readers may have noticed that we have already implemented it as a _Next type. That will be right, but let's refine it to consider the upper limit of our algebra.
type _Increment = T extends _Max ? never : _Next;
As you see, we infer all exceeded values of our computations to never.
Let’s integrate this mathematical function with our I/O system from the previous section:
$\"\"$
Referencing the schema above, we can introduce our first mathematical calculation crafted only on TypeScript types!
type Increment =
_StringifyNumber<_Increment<_ParseNumber>>;
Let's see what we have in the final stage:
$\"\"$
$\"\"$
$\"\"$
Voila! We have a complete mathematical operation in the world without digits!
Addition without “+”
“Mathematics is the art of giving the same name to different things.” — Henri Poincaré
Let's move forward and create the most popular operation of arithmetics: addition. Looking at the implementation of our I/O converters, we can assert that iteration is not a big friend of type-level programming. The idea of gradual iteration from the first number to the sum of the numbers is natural but hard to complete in type-level systems.
What if we contract to the iteration's antagonist — recursion? It turns out that's a key! We can interpret the addition as the following recursion formula:
$\"\"$
Can we implement this in terms of our numeral system? Let's break a formula into some meaningful tokens and consider them:
(a, b) parameters signature — as we have done with the increment function, generic parameters take care of it
b === 0 ? ... : ... condition — with the help of extends, TypeScript provides conditional types
add(...) recursion invocation — TypeScript allows recursive generics
a + 1 — we already implemented the increment in the previous paragraph
(b — 1) — the last secret puzzle that we need
Now, I propose you come to the start and recall what we define as the number of our numeral system:
type _Number = _Zero | { prev: _Number };
Notice the subtle hint about subtracting one from a number?
Reference to the prev! The previous number is the result of subtraction by one. So, we need to create a function that takes a number as an argument and returns its previous number.
This may be a dangerous intention because our definition of numbers includes a zero, which doesn't have a reference to a previous value.
Let's look at the recursion formula of an addition once again. In the condition predicate, we check the parameter's equality to zero. We use b only in the conditional branch, where b can't be a zero. This means we can create a non-zero assertion and use it in our decremental function.
Okay, we dive deeply this time, so let's push off from the bottom and rise to the surface together!
At first, the non-zero assertion that \"narrows\" the type:
type _NonZero = T extends _Zero ? never : T;
Next, the single subtraction by a prev reference:
type _Prev = _NonZero[\"prev\"];
And finally, ladies and gentlemen, the final form of addition!
type _Add =
B extends _Zero
? A
: A extends _Max
? never
: _Add<_Next , _Prev>;
Wrapping it to the user-friendly I/O…
type Add =
_StringifyNumber<_Add<_ParseNumber , _ParseNumber>>;
And finally, we have the long-awaited result!
$\"\"$
$\"\"$
$\"\"$
Oops! The result exceeded our algebraic maximum.
The subtraction operation can also be represented as recursion. Could you guess the formula in the comments? We can also implement this in our numeral system, which will be left in your exercise.
Bonus chapter: mapping of an array
“Nature is an infinite sphere whose center is everywhere and whose circumference is nowhere.”— Blaise Pascal
So far, we have defined a concept of number in our numeral system, implemented the basic mathematical operations in the realm of numbers, and finally convinced ourselves of the power of type-level programming.
So, if we defined the number as a TypeScript type, what’s stopping us from determining the array type of these \"numbers\"? Correct, nothing! The final trick for today will be implementing the function that returns the array's length.
This example doesn't require converting every array item by \"parse-stringify\" manipulations as we did above because we don't care about array content. We care about the array structure, which is so popular, particularly in functional programming languages.
$\"\"$
To get the head and the tail or the array type, we must be able to use inferred types.
type Head = T extends [infer First, ...infer Rest] ? First : never;

type Tail = T extends [infer First, ...infer Rest] ? Rest : never;
What do we need it for? Okay, now let's return to our initial idea of calculating the length of an array.
Can we represent the length function as a recursion? Sure, we can!
$\"\"$
We already have all the puzzles for the implementation of this recursion, so let's implement it!
type _ArrLength =
T extends []
? _Zero
: _Increment<_ArrLength>>;
And convert the result to a meaningful output…
type ArrLength = _StringifyNumber<_ArrLength>;
Let's check the result:
$\"\"$
$\"\"$
Kinda works, hah?
Final words
No digits, no operators — just as I promised at the beginning, we did it! This numeric system, built purely with TypeScript types, can evolve into even more sophisticated forms — your imagination is the only limit.
For example, my next step was the creation of the map function for arrays with the transformation callback as a generic parameter. And what do you suggest considering as a next step?
Thank you for reading the article. This article was in my mind for a year, and I finally put it on paper. Did it spark your curiosity, even for a moment? If so, give it a clap or drop a comment if you want to see more content like this.
Keep your types in shape! 🚀
Article references:
TypeScripts Type System is Turing Complete
Flappy Bird written in type-level Typescript
Conway's Game of Life
TypeScript types can run DOOM
Thank you for being a part of the community
Before you go:
Be sure to clap and follow the writer ️👏️️
Follow us: X | LinkedIn | YouTube | Newsletter | Podcast | Differ
Check out CoFeed, the smart way to stay up-to-date with the latest in tech 🧪
Start your own free AI-powered blog on Differ 🚀
Join our content creators community on Discord 🧑🏻‍💻
For more content, visit plainenglish.io + stackademic.com
$\"\"$
Grokking Type-level Programming: Crafting Arithmetic in TypeScript without Digits and Operators was originally published in JavaScript in Plain English on Medium, where people are continuing the conversation by highlighting and responding to this story.
","freeContentEncoded","textContent","Grokking Type-Level Programming: Crafting Arithmetic in TypeScript without Digits and OperatorsPhoto by Chris Liverani on UnsplashYou may have heard that the TypeScript typing system is Turing complete. Literally, it means that you can write your own programming language or emulate Conway’s Game of Life using its types. Moreover, nowadays, there are complete 2D games written in TypeScript types (breaking news: there is DOOM in TypeScript types)!In this article, I want to demonstrate the power of type-level programming in TypeScript, starting from the very basics. And what’s the beginning for us, the programmers? That’s right — numbers. I want to create the numeral system using only TypeScript types. By the end of this article, you’ll be able to manipulate numbers — even arrays of numbers — without using any digits or operators. Let’s get started!In the middle of nowhere“The journey of a thousand miles begins with one step.” — Lao TzuEvery calculus or measurement system starts with zero. Zero is the neutral element for symmetric groups, where addition is a group operation in the group theory. Sorry, that got a bit nerdy. In short, we must define a zero for our type-level system to build everything else upon it.type _Zero = \"🇺🇦\";Here are two key points about this code line:Abstracting from digits. I intentionally haven't used a \"0\" character (or even a 0-digit as a type, which I could). To abstract entirely from any pre-existing numeric representation, I decided to use my country's flag as a symbolic stand-in (Доброго вечора!)Underscore prefix. I will use underscores to differentiate the internal types in my arithmetic system. Later, when we discuss the system's I/O, I will explain the relationship between internal and external types.Numbers as a numeral system language“Numbers are the universal language offered by the deity to humans as confirmation of the truth.” — St. Augustine of HippoIn our algebra, we will operate on a set of positive integer numbers limited by the maximum. We will stop at 5, which will be enough to demonstrate the power of the TypeScript type system.You might suspect, till now, that if we haven't provided any contextual sense for a zero in our system and put the flag emoji in it, what should we do with other numbers? Digits, Roman numerals, or other symbology don't matter when interpreting numbers in Turing complete systems. Relations matter!Having a zero in our domain-specific language, we can define the number as the next recursion type:type _Number = _Zero | { prev: _Number };Every integer is the successor of the previous one, making this relationship crucial for future operations. Let's define the first generic, responsible for numbers relationtype _Next = { prev: T };And finally, the prominent citizens of our village — the numbers!type _One = _Next;type _Two = _Next;type _Three = _Next;type _Four = _Next;type _Five = _Next;type _Max = _Five;Once again, we are responsible for defining the maximum value for our numeral system. Enforcing this limit will be helpful in future operations.User-Friendly I/O“Everything should be made as simple as possible, but not simpler.” — Albert EinsteinWe are close to starting to create something computational. For now, we have defined the numeral system's \"numbers\" as TypeScript types.Running ahead, I will not reveal a big secret if I say that the system's \"functions\" would be TypeScript generics. Generics take parameters like function arguments, and TypeScript’s type inference determines the return value.However, using our already declared numeric types might be cumbersome because our users must always keep these definitions on hand. Fortunately, TypeScript provides literal types that we can consider as values of the numeral system. Let's imagine, for a while, how the function of adding would look in that case:But we talked about the matter of predecessor-successor relations between types. How do literal types preserve it?Let's consider previously defined numbers as internal types of our numeric system and literal types as external types. We will match them in a 1:1 relation—the user will provide literal-type arguments as input and receive the result in a literal-type view as output. However, the system will calculate the resulting type inferences based on internal types.// The definition of \"external\" numberstype _StringNumber = \"Zero\" | \"One\" | \"Two\" | \"Three\" | \"Four\" | \"Five\";// Here, we convert \"internal\" types to \"external\"type _StringifyNumber = T extends _Zero ? \"Zero\" : T extends _One ? \"One\" : T extends _Two ? \"Two\" : T extends _Three ? \"Three\" : T extends _Four ? \"Four\" : T extends _Five ? \"Five\" : never;// And vice versa, from \"external\" to \"internal\"type _ParseNumber = T extends \"Zero\" ? _Zero : T extends \"One\" ? _One : T extends \"Two\" ? _Two : T extends \"Three\" ? _Three : T extends \"Four\" ? _Four : T extends \"Five\" ? _Five : never;As you remember, I mentioned that types with underscore prefixes are considered internal types. It means that users of our type-level system will not use them for user calculations. Eventually, to demonstrate user-specific types, let's start with some warm-up.Increment: the first step into the world of Calculus“From a tiny spark may a great fire grow.” — Dante AlighieriFor computer science, the increment is the most fundamental and, simultaneously, the most trivial operation. Attentive readers may have noticed that we have already implemented it as a _Next type. That will be right, but let's refine it to consider the upper limit of our algebra.type _Increment = T extends _Max ? never : _Next;As you see, we infer all exceeded values of our computations to never.Let’s integrate this mathematical function with our I/O system from the previous section:Referencing the schema above, we can introduce our first mathematical calculation crafted only on TypeScript types!type Increment = _StringifyNumber>>;Let's see what we have in the final stage:Voila! We have a complete mathematical operation in the world without digits!Addition without “+”“Mathematics is the art of giving the same name to different things.” — Henri PoincaréLet's move forward and create the most popular operation of arithmetics: addition. Looking at the implementation of our I/O converters, we can assert that iteration is not a big friend of type-level programming. The idea of gradual iteration from the first number to the sum of the numbers is natural but hard to complete in type-level systems.What if we contract to the iteration's antagonist — recursion? It turns out that's a key! We can interpret the addition as the following recursion formula:Can we implement this in terms of our numeral system? Let's break a formula into some meaningful tokens and consider them:(a, b) parameters signature — as we have done with the increment function, generic parameters take care of itb === 0 ? ... : ... condition — with the help of extends, TypeScript provides conditional typesadd(...) recursion invocation — TypeScript allows recursive genericsa + 1 — we already implemented the increment in the previous paragraph(b — 1) — the last secret puzzle that we needNow, I propose you come to the start and recall what we define as the number of our numeral system:type _Number = _Zero | { prev: _Number };Notice the subtle hint about subtracting one from a number?Reference to the prev! The previous number is the result of subtraction by one. So, we need to create a function that takes a number as an argument and returns its previous number.This may be a dangerous intention because our definition of numbers includes a zero, which doesn't have a reference to a previous value.Let's look at the recursion formula of an addition once again. In the condition predicate, we check the parameter's equality to zero. We use b only in the conditional branch, where b can't be a zero. This means we can create a non-zero assertion and use it in our decremental function.Okay, we dive deeply this time, so let's push off from the bottom and rise to the surface together!At first, the non-zero assertion that \"narrows\" the type:type _NonZero = T extends _Zero ? never : T;Next, the single subtraction by a prev reference:type _Prev = _NonZero[\"prev\"];And finally, ladies and gentlemen, the final form of addition!type _Add = B extends _Zero ? A : A extends _Max ? never : _Add, _Prev>;Wrapping it to the user-friendly I/O…type Add = _StringifyNumber, _ParseNumber>>;And finally, we have the long-awaited result!Oops! The result exceeded our algebraic maximum.The subtraction operation can also be represented as recursion. Could you guess the formula in the comments? We can also implement this in our numeral system, which will be left in your exercise.Bonus chapter: mapping of an array“Nature is an infinite sphere whose center is everywhere and whose circumference is nowhere.”— Blaise PascalSo far, we have defined a concept of number in our numeral system, implemented the basic mathematical operations in the realm of numbers, and finally convinced ourselves of the power of type-level programming.So, if we defined the number as a TypeScript type, what’s stopping us from determining the array type of these \"numbers\"? Correct, nothing! The final trick for today will be implementing the function that returns the array's length.This example doesn't require converting every array item by \"parse-stringify\" manipulations as we did above because we don't care about array content. We care about the array structure, which is so popular, particularly in functional programming languages.To get the head and the tail or the array type, we must be able to use inferred types.type Head = T extends [infer First, ...infer Rest] ? First : never;type Tail = T extends [infer First, ...infer Rest] ? Rest : never;What do we need it for? Okay, now let's return to our initial idea of calculating the length of an array.Can we represent the length function as a recursion? Sure, we can!We already have all the puzzles for the implementation of this recursion, so let's implement it!type _ArrLength = T extends [] ? _Zero : _Increment>>;And convert the result to a meaningful output…type ArrLength = _StringifyNumber>;Let's check the result:Kinda works, hah?Final wordsNo digits, no operators — just as I promised at the beginning, we did it! This numeric system, built purely with TypeScript types, can evolve into even more sophisticated forms — your imagination is the only limit.For example, my next step was the creation of the map function for arrays with the transformation callback as a generic parameter. And what do you suggest considering as a next step?Thank you for reading the article. This article was in my mind for a year, and I finally put it on paper. Did it spark your curiosity, even for a moment? If so, give it a clap or drop a comment if you want to see more content like this.Keep your types in shape! 🚀Article references:TypeScripts Type System is Turing CompleteFlappy Bird written in type-level TypescriptConway's Game of LifeTypeScript types can run DOOMThank you for being a part of the communityBefore you go:Be sure to clap and follow the writer ️👏️️Follow us: X | LinkedIn | YouTube | Newsletter | Podcast | DifferCheck out CoFeed, the smart way to stay up-to-date with the latest in tech 🧪Start your own free AI-powered blog on Differ 🚀Join our content creators community on Discord 🧑🏻‍💻For more content, visit plainenglish.io + stackademic.comGrokking Type-level Programming: Crafting Arithmetic in TypeScript without Digits and Operators was originally published in JavaScript in Plain English on Medium, where people are continuing the conversation by highlighting and responding to this story.","published","strategy","content-ready","locked","deletedAt","isSyncedFromOwnBlog","original","duplicatesCount","duplicateVersion","originalArticleId","errorsCount","appearance","color","backgroundColor","shortSummary","summary","bullets","persons","places","words","sentiment","subject","meta","eventId","5eb40eaa7cb116f8c67fe060dcef9bdbb45a82d23e7039051cab1bf03931d9e8","nostrRootEvent","event",{"_18":166,"_170":171,"_172":173,"_66":174,"_186":25,"_135":187,"_188":189},"sig","395617ff9d10508105ffe7fa3168467e34098f1dc77d3158637cf48c548f0f5e56983c10430219b41a94fd5a4bf629dc26ef580d4c85d81d669ef76766f63a1a","kind",1,[175,176,177,181,184],[163,122],[34,127],[178,179,28,180],"a","30023:d12614be726049c7ecfeb7307a63d38418bb82b91866b8764a903ff28ed99bc6:3b7fd9ae-ff1a-487c-b5c4-d3922b16ef80","mention",[182,183],"client","Layer3.press",[185,25,28],"p","pubkey","Grokking Type-level Programming: Crafting Arithmetic in TypeScript without Digits and Operators\n\n\n\nnostr:naddr1qvzqqqr4gupzp5fxzjl8yczfclk0ades0f3a8pqchwptjxrxhpmy4ypl728dnx7xqqjrxc3hvejrjct994nxvvtp956rsdmr943r2ce594jrxwfjxf3rzdn9vcurqeh2sm8 ","created_at",1752066939,"authorNPub","markdown","### Grokking Type-Level Programming: Crafting Arithmetic in TypeScript without Digits and Operators\n\nPhoto by [Chris Liverani](https://unsplash.com/@chrisliverani?utm_source=medium&utm_medium=referral) on [Unsplash](https://unsplash.com?utm_source=medium&utm_medium=referral)\n\n> You may have heard that the TypeScript typing system is [Turing complete](https://github.com/microsoft/TypeScript/issues/14833). Literally, it means that you can write your own programming language or emulate [Conway’s Game of Life](https://en.wikipedia.org/wiki/Conway%27s_Game_of_Life) using its types. Moreover, nowadays, there are complete [2D games](https://tyvm.100x.software/) written in TypeScript types (**breaking news: there is** [**DOOM**](https://www.youtube.com/watch?v=0mCsluv5FXA) **in TypeScript types)**!\n\n> In this article, I want to demonstrate the power of type-level programming in TypeScript, starting from the very basics. And what’s the beginning for us, the programmers? That’s right — numbers. I want to create the numeral system using only TypeScript types. By the end of this article, you’ll be able to manipulate numbers — even arrays of numbers — without using any digits or operators. Let’s get started!\n\n### In the middle of nowhere\n\n> **“**The journey of a thousand miles begins with one step.**”** — Lao Tzu\n\nEvery calculus or measurement system starts with zero. Zero is the neutral element for symmetric groups, where addition is a group operation in the group theory. Sorry, that got a bit nerdy. In short, we must define **a zero** for our type-level system to build everything else upon it.\n\ntype \\_Zero = \"🇺🇦\";\n\nHere are two key points about this code line:\n\n1. **Abstracting from digits.** I intentionally haven't used a \"0\" character (or even a 0-digit as a type, which I could). To abstract entirely from any pre-existing numeric representation, I decided to use my country's flag as a symbolic stand-in (_Доброго вечора!_)\n2. **Underscore prefix.** I will use underscores to differentiate the _internal_ types in my arithmetic system. Later, when we discuss the system's I/O, I will explain the relationship between internal and external types.\n\n### Numbers as a numeral system language\n\n> “Numbers are the universal language offered by the deity to humans as confirmation of the truth.” — St. Augustine of Hippo\n\nIn our algebra, we will operate on a set of positive integer numbers limited by the maximum. We will stop at 5, which will be enough to demonstrate the power of the TypeScript type system.\n\nYou might suspect, till now, that if we haven't provided any contextual sense for a zero in our system and put the flag emoji in it, what should we do with other numbers? Digits, Roman numerals, or other symbology don't matter when interpreting numbers in Turing complete systems. Relations matter!\n\n![](https://cdn-images-1.medium.com/max/1024/1*M76HBKujYr_fKQbd2PZuqA.png)\n\nHaving a zero in our domain-specific language, we can define the number as the next recursion type:\n\ntype \\_Number = \\_Zero | { prev: \\_Number };\n\nEvery integer is the successor of the previous one, making this relationship crucial for future operations. Let's define the first generic, responsible for numbers relation\n\ntype \\_Next = { prev: T };\n\nAnd finally, the prominent citizens of our village — the numbers!\n\ntype \\_One = \\_Next<\\_Zero>; \ntype \\_Two = \\_Next<\\_One>; \ntype \\_Three = \\_Next<\\_Two>; \ntype \\_Four = \\_Next<\\_Three>; \ntype \\_Five = \\_Next<\\_Four>; \n \ntype \\_Max = \\_Five;\n\nOnce again, we are responsible for defining the maximum value for our numeral system. Enforcing this limit will be helpful in future operations.\n\n### User-Friendly I/O\n\n> “Everything should be made as simple as possible, but not simpler.” — Albert Einstein\n\nWe are close to starting to create something computational. For now, we have defined the numeral system's \"_numbers\"_ as TypeScript types.\n\nRunning ahead, I will not reveal a big secret if I say that the system's _\"functions\"_ would be TypeScript generics. Generics take parameters like function arguments, and TypeScript’s type inference determines the return value.\n\nHowever, using our already declared numeric types might be cumbersome because our users must always keep these definitions on hand. Fortunately, TypeScript provides literal types that we can consider as values of the numeral system. Let's imagine, for a while, how the function of adding would look in that case:\n\n![](https://cdn-images-1.medium.com/max/1024/1*tEH3J8HjdqSvMK9Mj9TXQQ.png)\n\nBut we talked about the matter of predecessor-successor relations between types. How do literal types preserve it?\n\nLet's consider previously defined numbers as _internal_ types of our numeric system and literal types as _external_ types. We will match them in a 1:1 relation—the user will provide literal-type arguments as input and receive the result in a literal-type view as output. However, the system will calculate the resulting type inferences based on internal types.\n\n// The definition of \"external\" numbers \ntype \\_StringNumber = \"Zero\" | \"One\" | \"Two\" | \"Three\" | \"Four\" | \"Five\"; \n \n// Here, we convert \"internal\" types to \"external\" \ntype \\_StringifyNumber = T extends \\_Zero ? \"Zero\" \n : T extends \\_One ? \"One\" \n : T extends \\_Two ? \"Two\" \n : T extends \\_Three ? \"Three\" \n : T extends \\_Four ? \"Four\" \n : T extends \\_Five ? \"Five\" : never; \n \n// And vice versa, from \"external\" to \"internal\" \ntype \\_ParseNumber = T extends \"Zero\" ? \\_Zero \n : T extends \"One\" ? \\_One \n : T extends \"Two\" ? \\_Two \n : T extends \"Three\" ? \\_Three \n : T extends \"Four\" ? \\_Four \n : T extends \"Five\" ? \\_Five : never;\n\nAs you remember, I mentioned that types with underscore prefixes are considered internal types. It means that users of our type-level system will not use them for user calculations. Eventually, to demonstrate user-specific types, let's start with some warm-up.\n\n### Increment: the first step into the world of Calculus\n\n> “From a tiny spark may a great fire grow.” — Dante Alighieri\n\nFor computer science, the increment is the most fundamental and, simultaneously, the most trivial operation. Attentive readers may have noticed that we have already implemented it as a \\_Next type. That will be right, but let's refine it to consider the upper limit of our algebra.\n\ntype \\_Increment = T extends \\_Max ? never : \\_Next;\n\nAs you see, we infer all exceeded values of our computations to never.\n\nLet’s integrate this mathematical function with our I/O system from the previous section:\n\n![](https://cdn-images-1.medium.com/max/1024/1*z0xpguJRdg_NRX53H7Zuww.png)\n\nReferencing the schema above, we can introduce our first mathematical calculation crafted only on TypeScript types!\n\ntype Increment = \n \\_StringifyNumber<\\_Increment<\\_ParseNumber\\>>;\n\nLet's see what we have in the final stage:\n\n![](https://cdn-images-1.medium.com/max/650/1*0ejCxiHG2zQNORnUMCFo3A.png)\n\n![](https://cdn-images-1.medium.com/max/650/1*Sbrh9FGOVKGvxVc07YO83w.png)\n\n![](https://cdn-images-1.medium.com/max/650/1*U_SBRpaUXAGnp6KBZgeXlw.png)\n\nVoila! We have a complete mathematical operation in the world without digits!\n\n### Addition without “+”\n\n> “Mathematics is the art of giving the same name to different things.” — Henri Poincaré\n\nLet's move forward and create the most popular operation of arithmetics: addition. Looking at the implementation of our I/O converters, we can assert that _iteration_ is not a big friend of type-level programming. The idea of gradual iteration from the first number to the sum of the numbers is natural but hard to complete in type-level systems.\n\nWhat if we contract to the iteration's antagonist — _recursion_? It turns out that's a key! We can interpret the addition as the following recursion formula:\n\n![](https://cdn-images-1.medium.com/max/1024/1*qkJj4wrB-u5n-5HjbEEFkQ.png)\n\nCan we implement this in terms of our numeral system? Let's break a formula into some meaningful tokens and consider them:\n\n* (a, b) parameters signature — as we have done with the increment function, generic parameters take care of it\n* b === 0 ? ... : ... condition — with the help of extends, TypeScript provides conditional types\n* add(...) recursion invocation — TypeScript allows recursive generics\n* a + 1 — we already implemented the increment in the previous paragraph\n* (b — 1) — the last secret puzzle that we need\n\nNow, I propose you come to the start and recall what we define as the number of our numeral system:\n\ntype \\_Number = \\_Zero | { prev: \\_Number };\n\nNotice the subtle hint about subtracting one from a number?\n\nReference to the prev! The previous number is the result of subtraction by one. So, we need to create a _function_ that takes a _number_ as an argument and returns its previous number.\n\nThis may be a dangerous intention because our definition of numbers includes a zero, which doesn't have a reference to a previous value.\n\nLet's look at the recursion formula of an addition once again. In the condition predicate, we check the parameter's equality to zero. We use **b** only in the conditional branch, where **b** can't be a zero. This means we can create a non-zero assertion and use it in our decremental function.\n\nOkay, we dive deeply this time, so let's push off from the bottom and rise to the surface together!\n\nAt first, the non-zero assertion that \"narrows\" the _type_:\n\ntype \\_NonZero = T extends \\_Zero ? never : T;\n\nNext, the single subtraction by a _prev_ reference:\n\ntype \\_Prev = \\_NonZero\\[\"prev\"\\];\n\nAnd finally, ladies and gentlemen, the final form of addition!\n\ntype \\_Add = \n B extends \\_Zero \n ? A \n : A extends \\_Max \n ? never \n : \\_Add<\\_Next, \\_Prev**\\>;**\n\n**Wrapping it to the user-friendly I/O…**\n\n**type Add** **= \n \\_StringifyNumber<\\_Add<\\_ParseNumber, \\_ParseNumber**\\>>;****\n\n****And finally, we have the long-awaited result!****\n\n****![](https://cdn-images-1.medium.com/max/608/1*cedBjZ3Xfqagzji0aDDtZw.png)****\n\n****![](https://cdn-images-1.medium.com/max/610/1*7yHnojGQDQKVuc3X3mDLow.png)****\n\n****![](https://cdn-images-1.medium.com/max/620/1*LxAjTIlH-CPJGIjq7IUz8Q.png)\n\nOops! The result exceeded our algebraic maximum.\n\n****\n\n****The subtraction operation can also be represented as recursion. Could you guess the formula in the comments? We can also implement this in our numeral system, which will be left in your exercise.****\n\n### ****Bonus chapter: mapping of an array****\n\n> ****“Nature is an infinite sphere whose center is everywhere and whose circumference is nowhere.”— Blaise Pascal****\n\n****So far, we have defined a concept of number in our numeral system, implemented the basic mathematical operations in the realm of numbers, and finally convinced ourselves of the power of type-level programming.****\n\n****So, if we defined the number as a TypeScript type, what’s stopping us from determining the array type of these \"numbers\"? Correct, nothing! The final trick for today will be implementing the function that returns the array's length.****\n\n****This example doesn't require converting every array item by \"parse-stringify\" manipulations as we did above because we don't care about array content. We care about the array structure, which is so popular, particularly in functional programming languages.****\n\n****![](https://cdn-images-1.medium.com/max/1024/1*GB41odmRVvlb2j9o2a40PA.png)****\n\n****To get the _head_ and the _tail_ or the array type, we must be able to use **inferred types.******\n\n****type Head = T extends \\[infer First, ...infer Rest\\] ? First : never; \n \ntype Tail = T extends \\[infer First, ...infer Rest\\] ? Rest : never;****\n\n****What do we need it for? Okay, now let's return to our initial idea of calculating the length of an array.****\n\n****Can we represent the length function as a recursion? Sure, we can!****\n\n****![](https://cdn-images-1.medium.com/max/1024/1*4bhks8rrjXPjnuqOqq0Q3w.png)****\n\n****We already have all the puzzles for the implementation of this recursion, so let's implement it!****\n\n****type \\_ArrLength = \n T extends \\[\\] \n ? \\_Zero \n : \\_Increment<\\_ArrLength\\>>;****\n\n****And convert the result to a meaningful output…****\n\n****type ArrLength = \\_StringifyNumber<\\_ArrLength\\>;****\n\n****Let's check the result:****\n\n****![](https://cdn-images-1.medium.com/max/1024/1*oWp0mgbBlshgcqPTmi4knA.png)****\n\n****![](https://cdn-images-1.medium.com/max/1024/1*jbcizqLDI_-q85wPhYKBuQ.png)****\n\n****Kinda works, hah?****\n\n### ****Final words****\n\n****No digits, no operators — just as I promised at the beginning, we did it! This numeric system, built purely with TypeScript types, can evolve into even more sophisticated forms — your imagination is the only limit.****\n\n****For example, my next step was the creation of the _map_ function for arrays with the transformation callback as a generic parameter. And what do you suggest considering as a next step?****\n\n****Thank you for reading the article. This article was in my mind for a year, and I finally put it on paper. Did it spark your curiosity, even for a moment? If so, give it a _clap_ or drop a _comment_ if you want to see more content like this.****\n\n****Keep your types in shape! 🚀****\n\n#### ****Article references:****\n\n* ****[TypeScripts Type System is Turing Complete](https://github.com/microsoft/TypeScript/issues/14833)****\n* ****[Flappy Bird written in type-level Typescript](https://tyvm.100x.software/)****\n* ****[Conway's Game of Life](https://en.wikipedia.org/wiki/Conway's_Game_of_Life)****\n* ****[TypeScript types can run DOOM](https://www.youtube.com/watch?v=0mCsluv5FXA)****\n\n### ****Thank you for being a part of the community****\n\n****_Before you go:_****\n\n* ****Be sure to **clap** and **follow** the writer ️👏**️️******\n* ****Follow us: [**X**](https://x.com/inPlainEngHQ) | [**LinkedIn**](https://www.linkedin.com/company/inplainenglish/) | [**YouTube**](https://www.youtube.com/channel/UCtipWUghju290NWcn8jhyAw) | [**Newsletter**](https://newsletter.plainenglish.io/) | [**Podcast**](https://open.spotify.com/show/7qxylRWKhvZwMz2WuEoua0) | [**Differ**](https://differ.blog/inplainenglish)****\n* ****[**Check out CoFeed, the smart way to stay up-to-date with the latest in tech**](https://cofeed.app/) **🧪******\n* ****[**Start your own free AI-powered blog on Differ**](https://differ.blog/) 🚀****\n* ****[**Join our content creators community on Discord**](https://discord.gg/in-plain-english-709094664682340443) 🧑🏻‍💻****\n* ****For more content, visit [**plainenglish.io**](https://plainenglish.io/) + [**stackademic.com**](https://stackademic.com/)****\n\n****![](https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=71af0127041a)\n\n* * *\n\n[Grokking Type-level Programming: Crafting Arithmetic in TypeScript without Digits and Operators](https://javascript.plainenglish.io/grokking-type-level-programming-crafting-arithmetic-in-typescript-without-digits-and-operators-71af0127041a) was originally published in [JavaScript in Plain English](https://javascript.plainenglish.io) on Medium, where people are continuing the conversation by highlighting and responding to this story.\n\n****","freeMarkdown","kind1EventId","kind30023EventId","42661e21ed34059216eec8423e5cf63e6dc296a8de38d48775247ad8f338c86d","kind30023",{"_18":196,"_170":199,"_172":200,"_66":201,"_186":25,"_135":214,"_188":215},"4ac5669c9758b4d1e0d979ce8b69925b59568dfd80c7870e52596f8dca9629734acec2c6a106cf6742c8e06013b9ea052701a950447ce07144026a48f52a2d07",30023,[202,205,206,209,210,212,213],[203,204],"r","https://drewdru.layer3.press/articles/3b7fd9ae-ff1a-487c-b5c4-d3922b16ef80",[30,122],[207,208],"published_at","NaN",[34,127],[211,117],"d",[182,183],[185,25,28],"Grokking Type-level Programming: Crafting Arithmetic in TypeScript without Digits and Operators\n### Grokking Type-Level Programming: Crafting Arithmetic in TypeScript without Digits and Operators\n\nPhoto by [Chris Liverani](https://unsplash.com/@chrisliverani?utm_source=medium&utm_medium=referral) on [Unsplash](https://unsplash.com?utm_source=medium&utm_medium=referral)\n\n> You may have heard that the TypeScript typing system is [Turing complete](https://github.com/microsoft/TypeScript/issues/14833). Literally, it means that you can write your own programming language or emulate [Conway’s Game of Life](https://en.wikipedia.org/wiki/Conway%27s_Game_of_Life) using its types. Moreover, nowadays, there are complete [2D games](https://tyvm.100x.software/) written in TypeScript types (**breaking news: there is** [**DOOM**](https://www.youtube.com/watch?v=0mCsluv5FXA) **in TypeScript types)**!\n\n> In this article, I want to demonstrate the power of type-level programming in TypeScript, starting from the very basics. And what’s the beginning for us, the programmers? That’s right — numbers. I want to create the numeral system using only TypeScript types. By the end of this article, you’ll be able to manipulate numbers — even arrays of numbers — without using any digits or operators. Let’s get started!\n\n### In the middle of nowhere\n\n> **“**The journey of a thousand miles begins with one step.**”** — Lao Tzu\n\nEvery calculus or measurement system starts with zero. Zero is the neutral element for symmetric groups, where addition is a group operation in the group theory. Sorry, that got a bit nerdy. In short, we must define **a zero** for our type-level system to build everything else upon it.\n\ntype \\_Zero = \"🇺🇦\";\n\nHere are two key points about this code line:\n\n1. **Abstracting from digits.** I intentionally haven't used a \"0\" character (or even a 0-digit as a type, which I could). To abstract entirely from any pre-existing numeric representation, I decided to use my country's flag as a symbolic stand-in (_Доброго вечора!_)\n2. **Underscore prefix.** I will use underscores to differentiate the _internal_ types in my arithmetic system. Later, when we discuss the system's I/O, I will explain the relationship between internal and external types.\n\n### Numbers as a numeral system language\n\n> “Numbers are the universal language offered by the deity to humans as confirmation of the truth.” — St. Augustine of Hippo\n\nIn our algebra, we will operate on a set of positive integer numbers limited by the maximum. We will stop at 5, which will be enough to demonstrate the power of the TypeScript type system.\n\nYou might suspect, till now, that if we haven't provided any contextual sense for a zero in our system and put the flag emoji in it, what should we do with other numbers? Digits, Roman numerals, or other symbology don't matter when interpreting numbers in Turing complete systems. Relations matter!\n\n![](https://cdn-images-1.medium.com/max/1024/1*M76HBKujYr_fKQbd2PZuqA.png)\n\nHaving a zero in our domain-specific language, we can define the number as the next recursion type:\n\ntype \\_Number = \\_Zero | { prev: \\_Number };\n\nEvery integer is the successor of the previous one, making this relationship crucial for future operations. Let's define the first generic, responsible for numbers relation\n\ntype \\_Next = { prev: T };\n\nAnd finally, the prominent citizens of our village — the numbers!\n\ntype \\_One = \\_Next<\\_Zero>; \ntype \\_Two = \\_Next<\\_One>; \ntype \\_Three = \\_Next<\\_Two>; \ntype \\_Four = \\_Next<\\_Three>; \ntype \\_Five = \\_Next<\\_Four>; \n \ntype \\_Max = \\_Five;\n\nOnce again, we are responsible for defining the maximum value for our numeral system. Enforcing this limit will be helpful in future operations.\n\n### User-Friendly I/O\n\n> “Everything should be made as simple as possible, but not simpler.” — Albert Einstein\n\nWe are close to starting to create something computational. For now, we have defined the numeral system's \"_numbers\"_ as TypeScript types.\n\nRunning ahead, I will not reveal a big secret if I say that the system's _\"functions\"_ would be TypeScript generics. Generics take parameters like function arguments, and TypeScript’s type inference determines the return value.\n\nHowever, using our already declared numeric types might be cumbersome because our users must always keep these definitions on hand. Fortunately, TypeScript provides literal types that we can consider as values of the numeral system. Let's imagine, for a while, how the function of adding would look in that case:\n\n![](https://cdn-images-1.medium.com/max/1024/1*tEH3J8HjdqSvMK9Mj9TXQQ.png)\n\nBut we talked about the matter of predecessor-successor relations between types. How do literal types preserve it?\n\nLet's consider previously defined numbers as _internal_ types of our numeric system and literal types as _external_ types. We will match them in a 1:1 relation—the user will provide literal-type arguments as input and receive the result in a literal-type view as output. However, the system will calculate the resulting type inferences based on internal types.\n\n// The definition of \"external\" numbers \ntype \\_StringNumber = \"Zero\" | \"One\" | \"Two\" | \"Three\" | \"Four\" | \"Five\"; \n \n// Here, we convert \"internal\" types to \"external\" \ntype \\_StringifyNumber = T extends \\_Zero ? \"Zero\" \n : T extends \\_One ? \"One\" \n : T extends \\_Two ? \"Two\" \n : T extends \\_Three ? \"Three\" \n : T extends \\_Four ? \"Four\" \n : T extends \\_Five ? \"Five\" : never; \n \n// And vice versa, from \"external\" to \"internal\" \ntype \\_ParseNumber = T extends \"Zero\" ? \\_Zero \n : T extends \"One\" ? \\_One \n : T extends \"Two\" ? \\_Two \n : T extends \"Three\" ? \\_Three \n : T extends \"Four\" ? \\_Four \n : T extends \"Five\" ? \\_Five : never;\n\nAs you remember, I mentioned that types with underscore prefixes are considered internal types. It means that users of our type-level system will not use them for user calculations. Eventually, to demonstrate user-specific types, let's start with some warm-up.\n\n### Increment: the first step into the world of Calculus\n\n> “From a tiny spark may a great fire grow.” — Dante Alighieri\n\nFor computer science, the increment is the most fundamental and, simultaneously, the most trivial operation. Attentive readers may have noticed that we have already implemented it as a \\_Next type. That will be right, but let's refine it to consider the upper limit of our algebra.\n\ntype \\_Increment = T extends \\_Max ? never : \\_Next;\n\nAs you see, we infer all exceeded values of our computations to never.\n\nLet’s integrate this mathematical function with our I/O system from the previous section:\n\n![](https://cdn-images-1.medium.com/max/1024/1*z0xpguJRdg_NRX53H7Zuww.png)\n\nReferencing the schema above, we can introduce our first mathematical calculation crafted only on TypeScript types!\n\ntype Increment = \n \\_StringifyNumber<\\_Increment<\\_ParseNumber\\>>;\n\nLet's see what we have in the final stage:\n\n![](https://cdn-images-1.medium.com/max/650/1*0ejCxiHG2zQNORnUMCFo3A.png)\n\n![](https://cdn-images-1.medium.com/max/650/1*Sbrh9FGOVKGvxVc07YO83w.png)\n\n![](https://cdn-images-1.medium.com/max/650/1*U_SBRpaUXAGnp6KBZgeXlw.png)\n\nVoila! We have a complete mathematical operation in the world without digits!\n\n### Addition without “+”\n\n> “Mathematics is the art of giving the same name to different things.” — Henri Poincaré\n\nLet's move forward and create the most popular operation of arithmetics: addition. Looking at the implementation of our I/O converters, we can assert that _iteration_ is not a big friend of type-level programming. The idea of gradual iteration from the first number to the sum of the numbers is natural but hard to complete in type-level systems.\n\nWhat if we contract to the iteration's antagonist — _recursion_? It turns out that's a key! We can interpret the addition as the following recursion formula:\n\n![](https://cdn-images-1.medium.com/max/1024/1*qkJj4wrB-u5n-5HjbEEFkQ.png)\n\nCan we implement this in terms of our numeral system? Let's break a formula into some meaningful tokens and consider them:\n\n* (a, b) parameters signature — as we have done with the increment function, generic parameters take care of it\n* b === 0 ? ... : ... condition — with the help of extends, TypeScript provides conditional types\n* add(...) recursion invocation — TypeScript allows recursive generics\n* a + 1 — we already implemented the increment in the previous paragraph\n* (b — 1) — the last secret puzzle that we need\n\nNow, I propose you come to the start and recall what we define as the number of our numeral system:\n\ntype \\_Number = \\_Zero | { prev: \\_Number };\n\nNotice the subtle hint about subtracting one from a number?\n\nReference to the prev! The previous number is the result of subtraction by one. So, we need to create a _function_ that takes a _number_ as an argument and returns its previous number.\n\nThis may be a dangerous intention because our definition of numbers includes a zero, which doesn't have a reference to a previous value.\n\nLet's look at the recursion formula of an addition once again. In the condition predicate, we check the parameter's equality to zero. We use **b** only in the conditional branch, where **b** can't be a zero. This means we can create a non-zero assertion and use it in our decremental function.\n\nOkay, we dive deeply this time, so let's push off from the bottom and rise to the surface together!\n\nAt first, the non-zero assertion that \"narrows\" the _type_:\n\ntype \\_NonZero = T extends \\_Zero ? never : T;\n\nNext, the single subtraction by a _prev_ reference:\n\ntype \\_Prev = \\_NonZero\\[\"prev\"\\];\n\nAnd finally, ladies and gentlemen, the final form of addition!\n\ntype \\_Add = \n B extends \\_Zero \n ? A \n : A extends \\_Max \n ? never \n : \\_Add<\\_Next, \\_Prev**\\>;**\n\n**Wrapping it to the user-friendly I/O…**\n\n**type Add** **= \n \\_StringifyNumber<\\_Add<\\_ParseNumber, \\_ParseNumber**\\>>;****\n\n****And finally, we have the long-awaited result!****\n\n****![](https://cdn-images-1.medium.com/max/608/1*cedBjZ3Xfqagzji0aDDtZw.png)****\n\n****![](https://cdn-images-1.medium.com/max/610/1*7yHnojGQDQKVuc3X3mDLow.png)****\n\n****![](https://cdn-images-1.medium.com/max/620/1*LxAjTIlH-CPJGIjq7IUz8Q.png)\n\nOops! The result exceeded our algebraic maximum.\n\n****\n\n****The subtraction operation can also be represented as recursion. Could you guess the formula in the comments? We can also implement this in our numeral system, which will be left in your exercise.****\n\n### ****Bonus chapter: mapping of an array****\n\n> ****“Nature is an infinite sphere whose center is everywhere and whose circumference is nowhere.”— Blaise Pascal****\n\n****So far, we have defined a concept of number in our numeral system, implemented the basic mathematical operations in the realm of numbers, and finally convinced ourselves of the power of type-level programming.****\n\n****So, if we defined the number as a TypeScript type, what’s stopping us from determining the array type of these \"numbers\"? Correct, nothing! The final trick for today will be implementing the function that returns the array's length.****\n\n****This example doesn't require converting every array item by \"parse-stringify\" manipulations as we did above because we don't care about array content. We care about the array structure, which is so popular, particularly in functional programming languages.****\n\n****![](https://cdn-images-1.medium.com/max/1024/1*GB41odmRVvlb2j9o2a40PA.png)****\n\n****To get the _head_ and the _tail_ or the array type, we must be able to use **inferred types.******\n\n****type Head = T extends \\[infer First, ...infer Rest\\] ? First : never; \n \ntype Tail = T extends \\[infer First, ...infer Rest\\] ? Rest : never;****\n\n****What do we need it for? Okay, now let's return to our initial idea of calculating the length of an array.****\n\n****Can we represent the length function as a recursion? Sure, we can!****\n\n****![](https://cdn-images-1.medium.com/max/1024/1*4bhks8rrjXPjnuqOqq0Q3w.png)****\n\n****We already have all the puzzles for the implementation of this recursion, so let's implement it!****\n\n****type \\_ArrLength = \n T extends \\[\\] \n ? \\_Zero \n : \\_Increment<\\_ArrLength\\>>;****\n\n****And convert the result to a meaningful output…****\n\n****type ArrLength = \\_StringifyNumber<\\_ArrLength\\>;****\n\n****Let's check the result:****\n\n****![](https://cdn-images-1.medium.com/max/1024/1*oWp0mgbBlshgcqPTmi4knA.png)****\n\n****![](https://cdn-images-1.medium.com/max/1024/1*jbcizqLDI_-q85wPhYKBuQ.png)****\n\n****Kinda works, hah?****\n\n### ****Final words****\n\n****No digits, no operators — just as I promised at the beginning, we did it! This numeric system, built purely with TypeScript types, can evolve into even more sophisticated forms — your imagination is the only limit.****\n\n****For example, my next step was the creation of the _map_ function for arrays with the transformation callback as a generic parameter. And what do you suggest considering as a next step?****\n\n****Thank you for reading the article. This article was in my mind for a year, and I finally put it on paper. Did it spark your curiosity, even for a moment? If so, give it a _clap_ or drop a _comment_ if you want to see more content like this.****\n\n****Keep your types in shape! 🚀****\n\n#### ****Article references:****\n\n* ****[TypeScripts Type System is Turing Complete](https://github.com/microsoft/TypeScript/issues/14833)****\n* ****[Flappy Bird written in type-level Typescript](https://tyvm.100x.software/)****\n* ****[Conway's Game of Life](https://en.wikipedia.org/wiki/Conway's_Game_of_Life)****\n* ****[TypeScript types can run DOOM](https://www.youtube.com/watch?v=0mCsluv5FXA)****\n\n### ****Thank you for being a part of the community****\n\n****_Before you go:_****\n\n* ****Be sure to **clap** and **follow** the writer ️👏**️️******\n* ****Follow us: [**X**](https://x.com/inPlainEngHQ) | [**LinkedIn**](https://www.linkedin.com/company/inplainenglish/) | [**YouTube**](https://www.youtube.com/channel/UCtipWUghju290NWcn8jhyAw) | [**Newsletter**](https://newsletter.plainenglish.io/) | [**Podcast**](https://open.spotify.com/show/7qxylRWKhvZwMz2WuEoua0) | [**Differ**](https://differ.blog/inplainenglish)****\n* ****[**Check out CoFeed, the smart way to stay up-to-date with the latest in tech**](https://cofeed.app/) **🧪******\n* ****[**Start your own free AI-powered blog on Differ**](https://differ.blog/) 🚀****\n* ****[**Join our content creators community on Discord**](https://discord.gg/in-plain-english-709094664682340443) 🧑🏻‍💻****\n* ****For more content, visit [**plainenglish.io**](https://plainenglish.io/) + [**stackademic.com**](https://stackademic.com/)****\n\n****![](https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=71af0127041a)\n\n* * *\n\n[Grokking Type-level Programming: Crafting Arithmetic in TypeScript without Digits and Operators](https://javascript.plainenglish.io/grokking-type-level-programming-crafting-arithmetic-in-typescript-without-digits-and-operators-71af0127041a) was originally published in [JavaScript in Plain English](https://javascript.plainenglish.io) on Medium, where people are continuing the conversation by highlighting and responding to this story.\n\n****\n",1752066938,"publishedToNostr","htmlContentKind30023","
Grokking Type-Level Programming: Crafting Arithmetic in TypeScript without Digits and Operators
\n
Photo by Chris Liverani on Unsplash
\n
\n
You may have heard that the TypeScript typing system is Turing complete. Literally, it means that you can write your own programming language or emulate Conway’s Game of Life using its types. Moreover, nowadays, there are complete 2D games written in TypeScript types (breaking news: there is DOOM in TypeScript types)!
\n
\n
\n
In this article, I want to demonstrate the power of type-level programming in TypeScript, starting from the very basics. And what’s the beginning for us, the programmers? That’s right — numbers. I want to create the numeral system using only TypeScript types. By the end of this article, you’ll be able to manipulate numbers — even arrays of numbers — without using any digits or operators. Let’s get started!
\n
\n
In the middle of nowhere
\n
\n
“The journey of a thousand miles begins with one step.” — Lao Tzu
\n
\n
Every calculus or measurement system starts with zero. Zero is the neutral element for symmetric groups, where addition is a group operation in the group theory. Sorry, that got a bit nerdy. In short, we must define a zero for our type-level system to build everything else upon it.
\n
type _Zero = \"🇺🇦\";
\n
Here are two key points about this code line:
\n
\n
Abstracting from digits. I intentionally haven't used a \"0\" character (or even a 0-digit as a type, which I could). To abstract entirely from any pre-existing numeric representation, I decided to use my country's flag as a symbolic stand-in (Доброго вечора!)
\n
Underscore prefix. I will use underscores to differentiate the internal types in my arithmetic system. Later, when we discuss the system's I/O, I will explain the relationship between internal and external types.
\n
\n
Numbers as a numeral system language
\n
\n
“Numbers are the universal language offered by the deity to humans as confirmation of the truth.” — St. Augustine of Hippo
\n
\n
In our algebra, we will operate on a set of positive integer numbers limited by the maximum. We will stop at 5, which will be enough to demonstrate the power of the TypeScript type system.
\n
You might suspect, till now, that if we haven't provided any contextual sense for a zero in our system and put the flag emoji in it, what should we do with other numbers? Digits, Roman numerals, or other symbology don't matter when interpreting numbers in Turing complete systems. Relations matter!
\n
$\"\"$
\n
Having a zero in our domain-specific language, we can define the number as the next recursion type:
\n
type _Number = _Zero | { prev: _Number };
\n
Every integer is the successor of the previous one, making this relationship crucial for future operations. Let's define the first generic, responsible for numbers relation
\n
type _Next = { prev: T };
\n
And finally, the prominent citizens of our village — the numbers!
\n
type _One = _Next<_Zero>;
\ntype _Two = _Next<_One>;
\ntype _Three = _Next<_Two>;
\ntype _Four = _Next<_Three>;
\ntype _Five = _Next<_Four>;
\n
type _Max = _Five;
\n
Once again, we are responsible for defining the maximum value for our numeral system. Enforcing this limit will be helpful in future operations.
\n
User-Friendly I/O
\n
\n
“Everything should be made as simple as possible, but not simpler.” — Albert Einstein
\n
\n
We are close to starting to create something computational. For now, we have defined the numeral system's \"numbers\" as TypeScript types.
\n
Running ahead, I will not reveal a big secret if I say that the system's \"functions\" would be TypeScript generics. Generics take parameters like function arguments, and TypeScript’s type inference determines the return value.
\n
However, using our already declared numeric types might be cumbersome because our users must always keep these definitions on hand. Fortunately, TypeScript provides literal types that we can consider as values of the numeral system. Let's imagine, for a while, how the function of adding would look in that case:
\n
$\"\"$
\n
But we talked about the matter of predecessor-successor relations between types. How do literal types preserve it?
\n
Let's consider previously defined numbers as internal types of our numeric system and literal types as external types. We will match them in a 1:1 relation—the user will provide literal-type arguments as input and receive the result in a literal-type view as output. However, the system will calculate the resulting type inferences based on internal types.
\n
// The definition of \"external\" numbers
\ntype _StringNumber = \"Zero\" | \"One\" | \"Two\" | \"Three\" | \"Four\" | \"Five\";
\n
// Here, we convert \"internal\" types to \"external\"
\ntype _StringifyNumber = T extends _Zero ? \"Zero\"
\n: T extends _One ? \"One\"
\n: T extends _Two ? \"Two\"
\n: T extends _Three ? \"Three\"
\n: T extends _Four ? \"Four\"
\n: T extends _Five ? \"Five\" : never;
\n
// And vice versa, from \"external\" to \"internal\"
\ntype _ParseNumber = T extends \"Zero\" ? _Zero
\n: T extends \"One\" ? _One
\n: T extends \"Two\" ? _Two
\n: T extends \"Three\" ? _Three
\n: T extends \"Four\" ? _Four
\n: T extends \"Five\" ? _Five : never;
\n
As you remember, I mentioned that types with underscore prefixes are considered internal types. It means that users of our type-level system will not use them for user calculations. Eventually, to demonstrate user-specific types, let's start with some warm-up.
\n
Increment: the first step into the world of Calculus
\n
\n
“From a tiny spark may a great fire grow.” — Dante Alighieri
\n
\n
For computer science, the increment is the most fundamental and, simultaneously, the most trivial operation. Attentive readers may have noticed that we have already implemented it as a _Next type. That will be right, but let's refine it to consider the upper limit of our algebra.
\n
type _Increment = T extends _Max ? never : _Next;
\n
As you see, we infer all exceeded values of our computations to never.
\n
Let’s integrate this mathematical function with our I/O system from the previous section:
\n
$\"\"$
\n
Referencing the schema above, we can introduce our first mathematical calculation crafted only on TypeScript types!
\n
type Increment =
\n_StringifyNumber<_Increment<_ParseNumber>>;
\n
Let's see what we have in the final stage:
\n
$\"\"$
\n
$\"\"$
\n
$\"\"$
\n
Voila! We have a complete mathematical operation in the world without digits!
\n
Addition without “+”
\n
\n
“Mathematics is the art of giving the same name to different things.” — Henri Poincaré
\n
\n
Let's move forward and create the most popular operation of arithmetics: addition. Looking at the implementation of our I/O converters, we can assert that iteration is not a big friend of type-level programming. The idea of gradual iteration from the first number to the sum of the numbers is natural but hard to complete in type-level systems.
\n
What if we contract to the iteration's antagonist — recursion? It turns out that's a key! We can interpret the addition as the following recursion formula:
\n
$\"\"$
\n
Can we implement this in terms of our numeral system? Let's break a formula into some meaningful tokens and consider them:
\n
\n
(a, b) parameters signature — as we have done with the increment function, generic parameters take care of it
\n
b === 0 ? ... : ... condition — with the help of extends, TypeScript provides conditional types
\n
add(...) recursion invocation — TypeScript allows recursive generics
\n
a + 1 — we already implemented the increment in the previous paragraph
\n
(b — 1) — the last secret puzzle that we need
\n
\n
Now, I propose you come to the start and recall what we define as the number of our numeral system:
\n
type _Number = _Zero | { prev: _Number };
\n
Notice the subtle hint about subtracting one from a number?
\n
Reference to the prev! The previous number is the result of subtraction by one. So, we need to create a function that takes a number as an argument and returns its previous number.
\n
This may be a dangerous intention because our definition of numbers includes a zero, which doesn't have a reference to a previous value.
\n
Let's look at the recursion formula of an addition once again. In the condition predicate, we check the parameter's equality to zero. We use b only in the conditional branch, where b can't be a zero. This means we can create a non-zero assertion and use it in our decremental function.
\n
Okay, we dive deeply this time, so let's push off from the bottom and rise to the surface together!
\n
At first, the non-zero assertion that \"narrows\" the type:
\n
type _NonZero = T extends _Zero ? never : T;
\n
Next, the single subtraction by a prev reference:
\n
type _Prev = _NonZero[\"prev\"];
\n
And finally, ladies and gentlemen, the final form of addition!
\n
type _Add =
\nB extends _Zero
\n? A
\n: A extends _Max
\n? never
\n: _Add<_Next, _Prev**>;**
\n
Wrapping it to the user-friendly I/O…
\n
type Add =
\n_StringifyNumber<_Add<_ParseNumber, _ParseNumber>>;****
\n
And finally, we have the long-awaited result!
\n
$\"\"$
\n
$\"\"$
\n
**** $\"\"$
\n
Oops! The result exceeded our algebraic maximum.
\n
\n
The subtraction operation can also be represented as recursion. Could you guess the formula in the comments? We can also implement this in our numeral system, which will be left in your exercise.
\n
Bonus chapter: mapping of an array
\n
\n
“Nature is an infinite sphere whose center is everywhere and whose circumference is nowhere.”— Blaise Pascal
\n
\n
So far, we have defined a concept of number in our numeral system, implemented the basic mathematical operations in the realm of numbers, and finally convinced ourselves of the power of type-level programming.
\n
So, if we defined the number as a TypeScript type, what’s stopping us from determining the array type of these \"numbers\"? Correct, nothing! The final trick for today will be implementing the function that returns the array's length.
\n
This example doesn't require converting every array item by \"parse-stringify\" manipulations as we did above because we don't care about array content. We care about the array structure, which is so popular, particularly in functional programming languages.
\n
$\"\"$
\n
To get the head and the tail or the array type, we must be able to use inferred types.
\n
****type Head = T extends [infer First, ...infer Rest] ? First : never;
\n
type Tail = T extends [infer First, ...infer Rest] ? Rest : never;****
\n
What do we need it for? Okay, now let's return to our initial idea of calculating the length of an array.
\n
Can we represent the length function as a recursion? Sure, we can!
\n
$\"\"$
\n
We already have all the puzzles for the implementation of this recursion, so let's implement it!
\n
type _ArrLength =
\nT extends []
\n? _Zero
\n: _Increment<_ArrLength>>;
\n
And convert the result to a meaningful output…
\n
type ArrLength = _StringifyNumber<_ArrLength>;
\n
Let's check the result:
\n
$\"\"$
\n
$\"\"$
\n
Kinda works, hah?
\n
Final words
\n
No digits, no operators — just as I promised at the beginning, we did it! This numeric system, built purely with TypeScript types, can evolve into even more sophisticated forms — your imagination is the only limit.
\n
For example, my next step was the creation of the map function for arrays with the transformation callback as a generic parameter. And what do you suggest considering as a next step?
\n
Thank you for reading the article. This article was in my mind for a year, and I finally put it on paper. Did it spark your curiosity, even for a moment? If so, give it a clap or drop a comment if you want to see more content like this.
\n
Keep your types in shape! 🚀
\n
Article references:
\n
\n
TypeScripts Type System is Turing Complete
\n
Flappy Bird written in type-level Typescript
\n
Conway's Game of Life
\n
TypeScript types can run DOOM
\n
\n
Thank you for being a part of the community
\n
Before you go:
\n
\n
Be sure to clap and follow the writer ️👏️️
\n
Follow us: X | LinkedIn | YouTube | Newsletter | Podcast | Differ
\n
Check out CoFeed, the smart way to stay up-to-date with the latest in tech 🧪
\n
Start your own free AI-powered blog on Differ 🚀
\n
Join our content creators community on Discord 🧑🏻‍💻
\n
For more content, visit plainenglish.io + stackademic.com
\n
\n
**** $\"\"$
\n
\n
Grokking Type-level Programming: Crafting Arithmetic in TypeScript without Digits and Operators was originally published in JavaScript in Plain English on Medium, where people are continuing the conversation by highlighting and responding to this story.
\n
","pubDate","2025-03-03T00:52:29.000Z","modifiedAt","2025-07-09T13:13:18.109Z","storyId","likes","reposts","comments",2,"tweets",[],{"_18":19,"_20":21,"_22":23,"_24":25,"_26":-5,"_27":28,"_29":28,"_30":31,"_32":33,"_34":35,"_36":15,"_37":-5,"_38":-5,"_39":40,"_41":42,"_43":44,"_45":44,"_46":47,"_48":231,"_77":-5},{"_18":47,"_50":23,"_51":23,"_52":31,"_32":53,"_54":35,"_55":31,"_56":40,"_57":-5,"_58":59,"_60":-5,"_61":-5,"_62":33,"_63":31,"_64":25,"_65":-5,"_66":232,"_68":-5,"_69":70,"_71":59,"_72":59,"_73":-5,"_74":-5,"_75":-5,"_76":-5,"_43":44,"_45":44},[],"relatedArticles",[],"actionData","errors"]