6

The Art of Type Programming

 4 years ago
source link: https://itnext.io/the-art-of-type-programming-cfd933bdfff7
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

Types in typescript can get out of control quickly, for example, to merge two objects(599-medium-merge), the solution can be :

1*qJz8qTvS2dZxcZCMBkA1Eg.png?q=20
the-art-of-type-programming-cfd933bdfff7

or to find diff of two objects(645-medium-diff):

1*B78gvkfsQdzn_ulMvv1Efw.png?q=20
the-art-of-type-programming-cfd933bdfff7

Type Programming vs Type Gymnastics

Yes, we can implement Merge, Diff and then forget about them, as long as it works, we will not concern about that any more. Thus, during the creation of types, tricks are used, spaghetti code such as nested ternary expressions(conditional types) are ignored deliberately.

Great, it just works!

What we don’t do in everyday programming is what we always do in type programming, or more accurately, type gymnastics.

In this article, I’d like to propose that we treat type programming as real programming.

TypeType is used in the following examples, which is a programming language designed for typescript type generation.

Type Statement -> Type Expression

In typetype, we don’t use ternary expression as conditional type, instead, we use traditional if & else.

1*qaPfsXfZX8cTnPQBkwcH9w.png?q=20
the-art-of-type-programming-cfd933bdfff7

“type function” is used to declare function of types, type in and type out, which is called “generic” in typescript, but in nature, it’s function of types, we will be explicit about this.

“^{…}” is called block expression, in this block, statement will be translated to type expression in typescript. In this example, “if statement” will be translated to “conditional type” .

You can see it in action in playground: https://mistlog.github.io/typetype-playground/.

To implement “isNumberString”, we have another option now:

1*Ll1KOgWPfke528-rln1rDQ.png?q=20
the-art-of-type-programming-cfd933bdfff7
1*gAleceLp3svxK5wi_Rk4kA.png?q=20
the-art-of-type-programming-cfd933bdfff7

Mapped types are represented as “for in statement”:

1*GxO24bEpo3fhbZAR68ot6w.png?q=20
the-art-of-type-programming-cfd933bdfff7

Then, solutions of Merge and Diff can be:

1*y40LVjY5in6VDjD_SNGktw.png?q=20
the-art-of-type-programming-cfd933bdfff7

No tricks

We don’t use tricks to merge objects, instead, we use intuitive object spread syntax. For example, in url-parser-2:

1*panWUr2GrPysRxJQDD3jvw.png?q=20
the-art-of-type-programming-cfd933bdfff7

object spread is translated to object$assign:

1*XCr0dNeVNc4ItW2H2_WbqA.png?q=20
the-art-of-type-programming-cfd933bdfff7

then we polyfill it to make it available globally:

1*whrAkzydxrSwKniJobSU_Q.png?q=20
the-art-of-type-programming-cfd933bdfff7

To conclude

There is nothing special about type programming when we treat it as normal programming. As you can see above, just “if else” or nested “if else” and “for in”.


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK