So, you’ve decided that Javascript is the language you want to pursue and learn. Upon googling “how to learn javascript” you quickly start seeing “Typescript” appearing again and again. Intrigued you wonder “what is Typescript? Is that something I need to know? Should I learn that instead?”.
A bit worried you continue your quest for knowledge. You probably even end up on a few blogs which have a tone of “oh, and you can do this in either Javascript or Typescript very easily, just do…”, which disheartens you more.
“Just do what again?! I don’t even know the language! Should I be learning Typescript or Javascript? Just give me a clear cut answer. I don’t want to decide if I need both, one or the other, or a third option!”.
Frustrated, you throw in the towel and give up..
Does that story seem reminiscent of trying to learn coding in this particular space? If the above is you, I’m here to tell you: You are not alone.
Unfortunately, once we pass a certain threshold of knowledge we forget what it was like being on the other side. It’s easy to start thinking of anyone interested in the language from a perspective of “they’ll figure it out, or it won’t be for them anyway”.
I’m sure guilty of this myself.
But why should we make the barrier to entry higher? Why should we actively prevent innovation and newcomers in a field that we care deeply about?
Something isn’t making sense.
So!
I’ve decided to write this article in an attempt to help you get started with Javascript – and its superset, Typescript. And expanding upon that, how you can go about learning more of it.
And the best part?
You don’t have to decide between A or B, you don’t have to consider your position between X or Y, or any other decision that you don’t yet have the knowledge to make!
I’ll be walking you through it all 👏
Typescript is just Javascript.
If you’re still reading, I’m assuming you have felt the pain above, and you are looking for someone to help make sense of it all.
So let’s start by clearing up what Typescript and Javascript is, how they are different as well as how they are similar.
At its core, we should remember that Typescript is just Javascript. It’s not a new language that looks similar. It doesn’t require another runtime. It’s not a library that has Javascript as a dependency.
It’s not a product of Angular, Svelte, Vue, NextJS, React or any other framework.
It is just Javascript.
“What the hell does that mean?!”
Deep breath, we’ll get through this! As I was saying…
Typescript is known as a superset of Javascript. That means it is built on top of Javascript, but provides some extra syntax in order to support – you guessed it! – types.
Javascript is not a compiled language, it runs as it is, through a Javascript Runtime. At this point, it’s not important that we know all of them, or even understand what they are. But you already know of the oldest, and most common Javascript Runtime: your web browser.
The second most widespread one, which we will be focusing on for the remainder of this article is nodeJS.
Typescript is different in that it has no runtimes, it needs to be transpiled into Javascript, before it can be run.
Typescript Transpilation, why and how?
First, let’s just clear up the terminology as I often see the two terms compiled and transpiled used interchangably on this topic.
Compilation is the act of converting a high-level language down into low-level (often assembly or even machine) code. C, C++ or C# are common examples of a compiled language.
Transpilation is the act of converting a high-level language to another high-level language. Such is the case with Typescript.
The act of transpiling Typescript into Javascript is famously simple and only requires installing a global npm package, called typescript.
Once that is in place, we can run tsc to transpile our code, at which point we can use node to run the output Javascript.
It may seem daunting, but trust me, it is not. This is a required step of the Typescript developer, so you will get to know this like the back of your hand in no time. And if you’re feeling limited by this approach I have already written about my recommended libraries for automating this step.
Where Javascript is written in a .js file, Typescript is written in a .ts file, and has a very similar syntax.
In fact, if you were to take any given Javascript file and simply change its extension in order to make it a Typescript file, that would work right away. Of course you would be missing the transpilation step, but the code itself would be valid.
Typescript is based on a set of rules, and while there are recommendations and norms, particularly with established frameworks, you can entirely modify and edit those rules to fit your style and preferences.
The Typescript configuration file
Remember that running the global Typescript command tsc is how we compile things?
Well the Typescript configuration file, conveniently titled tsconfig.json, should be located at the root of any of your projects and instructs Typescript on how to compile.
It contains rules about behaviors; what should be considered an error, what should be a warning, what should be skipped, what should be included and so on. and so forth.
In short, it ensures consistency. Much (all) of what the tsconfig file offers, is possible to define in the command line, but why risk mistyping or forgetting configuration options? Or the bother of having to store and copy/paste some long command?
Its even possible to set up a tsconfig so it includes regular .js files in its transpilation, in order for you to start incrementally converting a Javascript project, should you so desire.
In order to create a baseline configuration file, use a terminal to navigate to your project folder and type tsc --init. This will generate the configuration file and. you can go explore its contents.
If you are starting on a brand new project, I recommend enabling strict mode by setting the option "strict": true. This will make a bunch of warnings and errors show up in your editor, which at first may seem frustrating, but really it’s going to help you understand what Typescript does, much more quickly.
If, however, you find that the amount of errors are overwhelming and they are not making sense to you when trying to understand the errors, please proceed without strict mode!
If you are migrating an existing Javascript project, it might be advisable to go for a more incremental approach, as it will allow you to hit the ground running and start making progress today.
At the end of the day there is no one correct way to configure your tsconfig.json file, and while there are recommendations, you can tailor it to best suit your style and needs.
What I would recommend is lean on the defaults, don’t change too much. If you’re starting a new project, enable strict mode, and if not, make. sure you enable allowJs.
Alright! Still with me so far? Let’s see if we can’t make the project run
How to actually run the Typescript code
Having everything setup and ready to test your project, there are a few ways we can go about it. Don’t worry, I’ll lay them out and recommend my favorite.
Remember that Javascript is run with a Javascript runtime? That’s still the case, and there are no runtimes for Typescript.
While it’s not widely supported – yet anyway – the deno (and even more recently, bun!) runtime actually does support running Typescript as-is.
However, for this article we won’t be focusing on those, instead taking a more common approach.
Firstly, we’ll want to transpile our typescript using the command tsc. After this we can run our code, typing something like node dist/index.js.
As any efficient programmer, you left eye may already start twitching from the fact you have to use multiple commands in succession to achieve this, so don’t worry, there are better ways.
The most common approach is to use the popular Javascript development library nodemon, typically in addition to something like ts-node.
This was how I got started too!
However, even on a medium sized project that I work with on the daily, I find that its too slow, often taking 5-10 seconds to recompile and then reload files.
This is a perfectly good way to get started, but if you’re curious about other approaches as well as my personal favorite, I’ve already written about it in another post.
For now, I definitely recommend sticking with the above approach, especially if you’re on a brand new project where speed won’t matter as much, simply because it’s the easiest to get going with. Minimal configuration!
So how is Typescript different than Javascript?
The moment you’ve been waiting for. We’re finally at a point where we are ready to write some code.
Hopefully you have a small project configuration setup already, if not see the previous steps.
At this step it’s important that we have the tsconfig.json setup as well as installed typescript globally with npm.
Given that, let’s presume we have a simple file, index.js which contains the following code:
const hello = "hello world";
console.log(hello);Running the file with node index.js prints exactly what you would expect.
Yes, simple, I know. How could this possibly be changed with Typescript?
Well, let’s try it!
In order to convert a file all you have to do is change the file extension to .ts.
Once that’s done, running the file will no longer work, because we first need to transpile it. In order to do that simply type tsc in your terminal window.
Depending on your tsconfig.json configuration, you should see a new folder dist/ in the project directory in which you will see your index.js.
Transpilation done!
We can now simply run this file as before, using node dist/index.js.
Let’s try and sprinkle in some Typescript in this overly simple example:
const hello: number = 'hello world';Immediately your editor should flag this variable with an error, explaining that “string” is unassignable to type “number”.
This is Typescript in effect. We instructed the code that hello should be of type “number”, but instead assigned it to a string. As such, Typescript knows we’ve made a mistake and lets us know.
This is a simple, yet extremely powerful concept that helps us catch many errors way before they are shipped to production and become a tedious runtime error.
This can be a bit difficult to wrap ones head around as Javascript is normally dynamic to the extend that any variable can be reassigned to anything.
Conclusion
Getting up and running with Javascript, and subsequently Typescript, hopefully became a bit more clear with this intro.
It’s a fast growing and confusing field, and I imagine this is only much worse looking in from the outside.
However, learning and understanding the language will greatly benefit you as a developer as it currently is the language of the browser, for adding interactivity, whilst it also serves as an excellent backend technology, offering speeds that most languages can’t.
If this guide helped you and you are looking for more articles on how to become a better Typescript developer, sign up for the newsletter 👇
I’ll only be sending an email every other week, with the goal of leveling you up as a Typescript developer, teaching you concepts that are directly applicable to your projects.
Thanks for reading! 🙏