Tallan's Technology Blog

Tallan's Top Technologists Share Their Thoughts on Today's Technology Challenges

Synthetic Type Inference in JavaScript

Aesa Kamar

StaticDynamicInference

TypeScript is Microsoft’s Open Source solution to the dynamic nature of JavaScript. It served the job of making code safer and more maintainable, but a lot of people find it bulky and cumbersome to use. By enabling a new compiler flag in VS Code, you can get IntelliSense, static type information, and code completion for free. And the best part is, you can keep writing vanilla JavaScript!


 

To start, you can add a file called “jsconfig.json” to the root of your project. You’ll need to add some compiler options, and set “allowSyntheticDefaultImports” to true.

jsconfig

 

This allows the VSCode precompiler to get type information about your variables and functions, presenting you with handy information when you hover over a symbol.

introTypeInference

 

You can get type information about primitives, or even more complex objects.

objectTypeInference

 

And your es6 class declarations too!

classTypeInference

 

The synthetic type inference is smart and can infer return types of expressions and function calls.

operationsAndOptions

 

You can import libraries and modules and still have the benefits of type inference and completion, as long as the modules have JSDoc documentation.

importingNpmModules

 

Even after multiple function applications, we have static type inference to guide us at every step.

identityFunction

 

Since it uses JSDoc, we can specify JSDoc params where necessary to add type annotations to arguments.

identityFunctionAnnotations

 

Return types can still be inferred even when using JSDoc.

identityFunctionSmartReturn

 


 

Type inference is especially useful when invoking more complex behaviors. Here we create a pipeline of logic to:

  • Start with a range of numbers from 0 to 100
  • Convert each of the numbers to its string form and English word form
  • Group the result by the length of the English word form of the number

At each step, we have the compiler giving us type information about the objects we are working with. This helps to reduce our cognitive loads as programmers, making it easier to identify mistakes in our logic.

inferredComplexType

 

When we evaluate the expression, our run-time object matches the compile-time inferred type perfectly.

evaluatedComplexType


 

The VSCode transpiler, the esLint linter, and the lodash library have helped me to write JavaScript both productively and correctly.

I have a strong background Functional Programming, so I’m fond of type safety. The idea is that your compiler can reduce your cognitive load by holding your hand and making sure you don’t write things incorrectly.

Everything is very well documented and I would strongly encourage you to read up on the documentation.

lodash.com/docs

code.visualstudio.com/Docs/languages/javascript

eslint.org/docs/user-guide/configuring

3 Comments. Leave new

That’s cool. Thanks for the article.

I couldn’t work out this bit though:
Since it uses JSDoc, we can specify JSDoc params where necessary to add type annotations to arguments.

How did you insert that JSDoc annotation? Is it a command or did you use a plug in?

Hey, John
Yeah, I used an extension to generate the JSDoc. There are many good ones, like Lit-It and DocThis. I find it prevents me from making mistakes versus writing it out by hand.

Excellent. Thanks for that.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

\\\