DEV Community

Cover image for Introducing TypeLib JS - simplified type detection and debugging
Schemetastic (Rodrigo)
Schemetastic (Rodrigo) Subscriber

Posted on • Updated on

Introducing TypeLib JS - simplified type detection and debugging

If you want to see it in action, check out the project landing page at: typelib.schemetastic.com

I do also have a promo short video about the project:

Why I created this project?

Verifying data types in JS is hard! And it can easily break code!!!
🫳🎤

...

🤏🎤 Okay, let explain in more detail.

JavaScript can handle dozens of types of data (most of them are some sort of object), but each type behaves differently, for example, a "string" doesn't behave in the same way as a new String("does").

To show you this, check some outputs that the native typeof returns:

typeof []; // object
typeof NaN; // number
typeof Infinity; // number
typeof null; // object [this is a bug actually]
typeof new Date(); // object
typeof new String("does"); // object
typeof new Blob(); // object
Enter fullscreen mode Exit fullscreen mode

Arguably, NaN, Infinity and -Infinity are like numbers... but not exactly, these are the kind of things that can break code if you are not aware of. If you wanted to individually verify these types, you would need to use different methods. TypeLib provides a unified experience to verify types.

Now check the TypeLib JS outputs for the same data:

type([]).is; // array
type(NaN).is; // nan
type(Infinity).is; // infinity
type(null).is; // null
type(new Date()).is; // date
type(new String("does")).is; // stringobject
type(new Blob()).is; // blob
Enter fullscreen mode Exit fullscreen mode

It makes more sense, doesn't it? You are actually receiving the results you are expecting with no complication, and it is semantic! But not just that, TypeLib was successfully tested with over 35 types of data... but... what if you don't need to be so specific?

TypeLib JS also classifies data in 9 different groups, for example, the .isNumeric property classifies numbers, NaN, Infinity, -Infinity and Big integers in that group. In the next post that will be released in the next few days, I will explain this in detail; And in a different post, I will explain how you can use it to debug code with typeErrorIf. If you don't want to miss it, 🔔 subscribe to this series and follow me!

How to install TypeLib JS?

In the terminal:

npm i typelib-js
Enter fullscreen mode Exit fullscreen mode

You can check the documentation for more details, (link of the repo below).

Support the project!

To create this project, I had to spend weeks researching, writing code, tests and documentation, making the website and more. And it's free under the MIT license.

One of the best ways to support this, is giving me a star 🌟 on GitHub, and if you want to, you can spread the word 📢. Of that way, more people will use it.

Link to the repo 🌟

Top comments (13)

Collapse
 
efpage profile image
Eckehard

I much appreciate your effort! Type checking is super important in Javascript and a nice lib could help to make things easier.

I like your coding style, it is very clear. But as type checks are used often and the lib is included in any project, the code should be thoroughly optimized for size and speed. Maybe arrow functions and a shorter names could save some bytes?

The following routine could be possibly faster and shorter:

var kindsList = [];
// Verify all the properties that are `true`, replace the word `is`, and push it to `kindsList`.
kindsProps.forEach(function (prop) {
     if (inst[prop]) kindsList.push(prop.toLowerCase().replace(/^is/, ''));
});
Enter fullscreen mode Exit fullscreen mode
  • RegEx-Replace can be very slow. slice(2) would do the same job
  • instead of forEach->push, you could use "filter":
console.log([1,2,3,4,5,6,7].filter(i => i>3))  // -> [ 4, 5, 6, 7 ]
Enter fullscreen mode Exit fullscreen mode

So, I suppose, your code could be like ths:

let kindsList = kindsProps.filter(prop => inst[prop]).map(p => p.slice(2).toLowerCase())
Enter fullscreen mode Exit fullscreen mode

I did not run this code, but maybe you can take this as an example.

Collapse
 
schemetastic profile image
Schemetastic (Rodrigo)

Arrow functions? In a previous version they were detected, but I removed them from the spec... 3 reasons

  1. Couldn't find a satisfying regex (arrow functions can have comments, and be written in different ways, for example, you can even omit the parenthesis)
  2. The only method I know to detect them imply that you verify if it is a function, and it doesn't have a prototype (thanks AI)... but I thought that JS may in the future would add another type of function without a prototype and could break code.
  3. TypeLib is a lot about developer experience... commonly, when you need to verify a function is because you would use it as a callback, some devs prefer arrow functions, other normal... I've got to realize that having to differentiate between one or another could be confusing and time-consuming... #I'm-not-a-rapper ... but maybe? Haha

By the way, I'm glad that you reviewed my code and that you liked it, I'm surprised that someone took the time to read it and review it, It took a lot of efforts to write that code in that way. Thanks for your suggestion, I don't know how much using a regex like that could affect performance, but your suggestion is valid, I will consider that for a future version. Really, thanks a lot.

Collapse
 
efpage profile image
Eckehard

I was just curious to see, how you did all the testing...

Collapse
 
vaddijaswant profile image
Jaswant Vaddi

nice Idea

Collapse
 
schemetastic profile image
Schemetastic (Rodrigo)

nice Comment 😉

Collapse
 
piko profile image
Piko

Great article!

Collapse
 
schemetastic profile image
Schemetastic (Rodrigo)

Thanks Piko, I've noticed you have been producing great videos on YouTube!

Collapse
 
piko profile image
Piko

You are too kind! 🤗

Collapse
 
artydev profile image
artydev

Very useful, thank you

Collapse
 
schemetastic profile image
Schemetastic (Rodrigo)

Thanks to you! If you are interested, next article will be posted on Monday!

Collapse
 
poetryofcode profile image
Poetry Of Code

Cool

Collapse
 
emmanuelayinde profile image
Emmanuel Ayinde

Thank you for sharing. I think I just found myself a new tool to add to my toolbox 😊

Collapse
 
schemetastic profile image
Schemetastic (Rodrigo)

Hey, your welcome! I'm glad you like it, I will be producing more tools and resources for developers soon!

Some comments may only be visible to logged-in visitors. Sign in to view all comments.