DEV Community

Cover image for How TypeScript can change your life
Chris Bongers
Chris Bongers

Posted on • Originally published at


How TypeScript can change your life

JavaScript is now one of the most used programming languages, and it's fantastic at what it does.
But it's not always strict enough. It will give us a lot of freedom, which sometimes is exactly what we want.
But for big applications not ideal, as we can break parts over time.

An example of this might be a variable you have in your database, it's intended as a number, but one day it returns a stringed version of a number like '123'.

This might not be the end of the world, but let's say you were doing calculations with this, and always expected a number, so you don't parse it in any way.

That's exactly where TypeScript would have warned you about the value not being correctly defined.

So, what is TypeScript?

TypesScript is a superset of JavaScript, giving us static typing, classes, and interfaces.

As a benefit from using those, our IDEs can give us a better developer experience because they will tell us what to expect from certain functions/variables.

TypeScript IDE support

TypeScript runs before your code runs, making sure that the types of your code are correctly typed.

For instance, let's take this as an example:

let demo: number;
demo = 'string';
Enter fullscreen mode Exit fullscreen mode

We create the let as a number type, so it's wrong to assign it as a string value, and TypeScript will let us know.

TypeScript type error

A good thing to keep in mind is that TypeScript won't change your output code.

Eventually, your output will be plain JavaScript, but we ensured the variables and types are exactly what we expected.

You can compare it to SASS/SCSS. It's a different way of writing CSS, but the result is just plain CSS.

How to get started

Before diving into TypeScript, I would suggest getting familiar with TypeScript. I'll be using the upcoming articles to go through it's basics.

But let's take an introductory look at what it takes to move from JavaScript to TypeScript.

We will need to convert our existing .js files to .ts files.

Then we will need a typescript compiler to convert these .ts into plain .js files again.

The TypeScript compiler is called tsc.
We can install it by installing the following package.

npm install -g typescript
Enter fullscreen mode Exit fullscreen mode

Once done, we can run tsc file.ts to check that specific file.

This command will determine if our TypeScript is valid and output the same name but as a .js file.

Let's add the wrong typed code as we discussed before:

let myName: string;
myName = 123;
console.log(`Hello ${myName}`);
Enter fullscreen mode Exit fullscreen mode

If we now try to compile this code, we get the following error.

TypeScript compiler error

However, the index.js file is still being generated with the converted JavaScript version.

This is because, in the end, TypeScript is there to help us, but it will just assume we know what we are doing.
It warned us about something, and it's up to us to do something with this.

However, you can tell it not to compile on an error by using the --noEmitOnError flag.

What's next

Now that we broadly know what TypeScript is and what it does, what can we do next?

In the next couple of articles, we'll be going through the basics of TypeScript.

  • Types
  • Interfaces
  • Functions
  • And more

Keep an eye out for the upcoming articles if you are interested in learning TypeScript with me πŸ™Œ.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Top comments (3)

lexlohr profile image
Alex Lohr

TypeScript is another part of testing your code, in this case for type soundness during compile time. In your testing pyramid, it comes even before unit tests, because it runs rather fast and catches errors on a very low level.

dailydevtips1 profile image
Chris Bongers

I really like how it makes us more strict in defining what a variable should be.
Or better: What it shouldn't be.

It makes me (at least) more aware of isolating certain interfaces before even using them.

I think a lot of people tend to say it looks like overkill, but by using it you grow so used to it, that by now it actually saves so much time and hassle later on.

lexlohr profile image
Alex Lohr

It's tests and documentation in a concise form that soon becomes second nature. And the advanced types allow for some interesting things, like autocompletion of derived properties.

Join us at DEV Find what you were looking for? Sign up so you can:
🌚 Enable dark mode
πŸ”  Change your default font
πŸ“š Adjust your experience level to see more relevant content