Explaining TypeScript

I recently fielded an interesting request that I thought might have some value outside of a private conversation.

Can you explain to me what TypeScript is?  As you would to a small child please 😂

Samuel Hughes – https://www.linkedin.com/in/samuel-hughes-16029b163/

This reminds me of a maxim I have encountered in a number of organisations to assist in preparing communication with clients or senior stakeholders: “Explain it so the CEO/Client/Sponsor won’t question it”. It is an essential life skill for getting what you want and so I always jump at the chance to give these muscles a workout.

My response

I’ll try…

Its a delightfully tricky question as it is about differences between two related programming languages so a certain level of technical knowledge has to be agreed.

A quick primer

To begin to answer this question we need a brief tour of the history of ‘data types‘ and how JavaScript handles them – the clue is in the name! Common data types include numbers (think of decimals and whole numbers, AKA integers), text (strings), bits/binary (the bare-bones 1s and 0s that computers operate on), dates and so on. Most computer languages that are designed to do work with data usually are very strict about types. For instance in the C# and Java (bizarrely unrelated to JavaScript) programming languages it’s very difficult to confuse data types. You’ll get obvious immediate errors if you try and mix calculations with a number and a string together. This is called ‘strong/strict typing’. On the other hand JavaScript was designed and built to work without too much fuss in its main job of manipulating HTML inside web browsers. HTML is just text, this includes representation of numbers and dates etc, it’s all just text and so HTML – at least for a long time at first – simply didn’t care about data types.

HTML is all just text!

It’s likely due to this fact that it was decided that JavaScript shouldn’t be strict about data types. In JavaScript everything is basically just data and you can mix it up if you like, meaning that JavaScript is a ‘weakly/loosely typed’ language. As an example, take this seemingly absurd calculation:

// "this phrase" multiplied by 50
"this phrase" * 50

This won’t cause an error in JavaScript, instead JavaScript will try it’s best to make sense of what you’re trying to do, often leading to unexpected results.

JavaScript code multiplying an object and a decimal number

This is a common source of derision for JavaScript and is repeatedly used to suggest that JavaScript isn’t a real programming language – programmers! Huh… what can I tell you 🙄

Enter TypeScript

In short, TypeScript is Microsoft’s attempt to make JavaScript care about data types. It’s intended to reduce unexpected behaviour – or bugs – that come from mixing data types. You write code that looks a lot like JavaScript but with added language features that make it behave a little more like Java, C#, etc. – one of the touted benefits is that TypeScript makes web programming more familiar to Java/C# developers.

Once you write your TypeScript code, you run it through a widget (called a ‘transpiler’, that translates source code from one language into another language) that spits out JavaScript ready to run in your browser. This widget – a small application called ‘tsc’, an abbreviation of ‘TypeScript Compiler’ – is particularly special though as it also seeks to catch when you’ve gone wrong with data types such as accidentally mixing up text and numbers in a calculation.

TypeScript showing the error

Of course TypeScript has been around a while now (since 2012!!!) and has grown really useful legs, arms and teeth that make it incredibly powerful, so the above is more than an oversimplification that does no justice to the current state of play. That said I’m hopeful that this should give you a sense of the what and why.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: