DEV Community

loading...
Cover image for Getting started with TypeScript as a JavaScript developer

Getting started with TypeScript as a JavaScript developer

sam_piggott profile image Sam Piggott Updated on ・5 min read

If you're a JavaScript developer, you might have heard of TypeScript already.

Or maybe you've had a quick dip into it, but the merit isn't immediately obvious.

Or perhaps your colleague hasn't stopped talking about it for the past two years, and you're keen to hear what all the hype's about.

Personally speaking, I've experienced all three of the above - and when I was first digging in to TypeScript, I found it quite difficult to find all the answers I needed as a beginner/hobbyist in one place.

I'm hoping that this article can:

  • Explain why you should bother learning TypeScript
  • Show you the advantages of why I think TypeScript's fantastic Demonstrate via examples the similarities between JavaScript and TypeScript

Why bother with TypeScript?

Let's start with an example. Spot the bug in this JavaScript code:

Did you spot it? It's a fairly common mistake - our function multiply multiplies a passed number by two…but we've gone and passed it a string.

We shouldn't be multiplying a string - we should be multiplying a number!

What's worse - we could very easily miss this bug. After all, when we run this JavaScript - perhaps embedded as part of a website, or Node.js application, myNumber will just be NaN.

Now, imagine if we passed myNumber to another function, with the intention of it to be used as a number. In the best case scenario, we'll be backtracking to find this not-so-obvious bug, and in the worst, our code is pushed live, and causes unexpected behaviour to our users!

And this, right here, is one of the main reasons TypeScript was created. TypeScript catches these problems before they reach runtime, and instead, are caught at compile time (I'll get into what that means in just a minute…)

Okay, I'm intrigued. Show me some examples!

Like a lot of developers out there, I learn best through examples. Let's check out some basic code snippets written in JavaScript, then see how each one could be written in TypeScript.

Example 1: Adding two numbers together

JavaScript:

TypeScript:

Example 2: Getting the first letter of a word

JavaScript:

TypeScript:

From these examples, you might be surprised with how similar writing TypeScript is to JavaScript is. At its core, TypeScript is just JavaScript, but with additional features to make life for a developer a little easier.

I'll explain in a bit more detail in just a minute, but first, here's a more complex example:

Example 3: Create a new object, then access a value on it

JavaScript:

TypeScript:

It's what you already know, just with some extra bits and pieces that will make your development life so much easier in the long run.

Shameless Self-Plug

Introduction to TypeScript Course Cover Photo

If you're enjoying reading this - I have a free Introduction to TypeScript video course available over on my YouTube channel!

I'll be uploading new parts to my channel every Wednesday but if you don't want to wait, you can visit here to download and binge the whole thing right away.

Alright, back to the article…

TypeScript is (not so) secretly just JavaScript

TypeScript-related programmer humour

(Sorry, couldn't resist.)

The thing is, we could write TypeScript files to our heart's content; but not a single web browser out there could understand it right now.

And therein lies the prestige. After all is said and done, TypeScript compiles into plain ol' JavaScript.

Diagram describing the TypeScript compiler

TypeScript files are written with the .ts file extension, and JavaScript is written with the .js file extension. Modern browsers can't understand TypeScript files in their native form. So, we need to turn it into something that it can understand - JavaScript!

This is where the TypeScript compiler comes in.
Once we're ready to ship our TypeScript code, we can run the TypeScript compiler on our .ts file(s), with a command like so:

tsc -w ./index.ts - outFile ./index.js

After running this on our index.ts TypeScript file, we should have an index.js file ready that we can import into our website, use as part of a Node.js application, create a Chrome extension with - anything, really, that you can do with JavaScript!

What's more, the compiler has another feature. It'll also tell us when we write bugs in our code, and even let us know how to fix it…

Uncovering bugs early

Let's take that JavaScript example from the top of this article:

…and let's write out what it would look like in TypeScript…

Now, let's see what happens when we try to compile our TypeScript code above with the TypeScript compiler, as we learned in the previous section…

tsc ./index.ts - outFile ./index.js

Terminal readout demonstrating a bad TypeScript compile

Uh-oh. This can't be good.

TypeScript created our index.js file, but it tells us there's something wrong with our code. It's explicitly telling us that we can't pass a string to a function which requires our value argument to be a number…so let's fix that bug!

Now, when we run it once again…

TypeScript compiler showing no errors

Hey, look! No errors!

We can now deploy our index.js file to wherever we want with the confidence that we don't have any type errors in our codebase.

Summary

This is the tip of the iceberg. Not even the tip - it's almost like an ice-cube balanced on top of an iceberg. If you're excited by this, then I promise you that there's much more to be excited by with TypeScript. It's insanely convenient and helpful, but also ridiculously powerful.

What's more; almost all of the major frontend frameworks (React.js, Vue, Angular) have TypeScript support nowadays - same with backend frameworks, too. You'll be able to write your TypeScript using the latest JavaScript features, but deploy JavaScript that works almost anywhere!

That's all for this introduction - but I'll be posting more articles about TypeScript in the coming weeks.

CodeSnap Logo

In the meantime, if you're interested in learning more TypeScript - my Introduction to TypeScript video course is available on my website, CodeSnap.io.

It's got basically everything I've mentioned here stuffed into the first two videos - and there's sixteen videos in the entire course.

If you're interested in checking out the course on YouTube, the playlist is available here, or, if you'd rather download and binge the entire thing, you can download it from here.

Thanks so much for reading - happy TypeScript'ing!

Discussion (9)

pic
Editor guide
Collapse
jonrandy profile image
Jon Randy • Edited

We can't multiply a string!

Well, actually, we can:

> "34" * 4
136
Enter fullscreen mode Exit fullscreen mode

TypeScript just feels like a crutch for devs coming from strongly typed languages who don't want to embrace doing things in a different way, and take advantage of all the stuff a weakly typed language provides.

I see JavaScript's weakly typed nature as a pro, not a con. There's lots of nice stuff you can do by taking advantage of implicit coercions. TypeScript bogs you down in formality and restricts creativity. It makes JS worse, not better. Not to mention all the tooling overhead. Waste of time

Collapse
sam_piggott profile image
Sam Piggott Author

Ah, interesting! I'll add that multiplication tip into the article. Thanks so much for pointing it out!

Collapse
annajmcdougall profile image
Anna J McDougall

Thank you for this very clear introduction! Very useful to get a little taste of TypeScript. I'll add it to the 'to learn' list!

Collapse
sam_piggott profile image
Sam Piggott Author

No worries! So glad you got something out of it!

Collapse
erkage profile image
erkage

file-ts-article-1-example-1-js is missing from above (6 is there instead).

Collapse
sam_piggott profile image
Sam Piggott Author

Apologies, forgot to add an extra gist that's meant to be there. Added it back in now :)

Collapse
erkage profile image
erkage

As far as i see it’s now the 7th example so still not the 1st 🙂.

Thread Thread
sam_piggott profile image
Sam Piggott Author

Think I might be a bit lost...are you referring to the gist that follows:

Let's take that JavaScript example from the top of this article:?

That one is intentionally the first Gist as it's the first example from the top of the article...might be missing something here though!

Collapse
microworlds profile image
Caleb David

Awesome introduction to ts