DEV Community

loading...
Cover image for Why You Should Use TypeScript Over JavaScript in 2021 | A Simple Example

Why You Should Use TypeScript Over JavaScript in 2021 | A Simple Example

doabledanny profile image Danny Adams Originally published at doabledanny.com ・5 min read

This article was originally posted on DoableDanny.com

Intro

I was recently making a meditation app called “Atomic Meditation” with React Native, and finally saw a strong reason to begin learning and using TypeScript over JavaScript for medium to larger size projects.

Before we start, I should explain that if you’ve never used React Native before, you can still follow this article. I’ll explain what’s going on as we go. Also, if you’ve used ReactJS, React Native, for the purpose of this article, is identical!

Let me show you how regular old JavaScript got me into a pickle...

Day 1 – All Going Well

In React Native there is something called Async Storage, which very simply allows you to store data permanently in your user’s mobile phone.

e.g.

AsyncStorage.setItem("@key", value)
Enter fullscreen mode Exit fullscreen mode

Async Storage only allows you to store strings, so to save a number, you would have to first convert it to a string.

Below, we are using the ReactJS useState hook to declare a variable called sessionCount and set its initial state to 0, and a setSessionCount function that allows us to alter the state of sessionCount.

const [sessionCount, setSessionCount] = useState(0)
Enter fullscreen mode Exit fullscreen mode

Let’s say that the user completes a meditation session (recall that I was making a meditation app), and sessionCount is keeping track of the total number of sessions that our user (who I will now refer to as Anxious Andy) has completed. We now need to add 1 to sessionCount. So, setSessionCount is called and 1 is added to the previous value. We then have to save this data as a string.

We shall do all of this in a function, let’s call it saveData:

// User completes a meditation…
const saveData = () => {
  setSessionCount(prev => {
    const newSessionCount = prev + 1

    AsyncStorage.setItem("@my_number", newSessionCount.toString())

    return newSessionCount
  })
}
Enter fullscreen mode Exit fullscreen mode

Everything goes well and A-little-less-anxious Andy calmly closes the app with a heightened sense of well-being.

Day 2 – The Calm Before the Storm

Anxious Andy retrieves a notification, reminding him it’s meditation time in 5 minutes. But he’s eager, so he goes straight to his room, pulls out his desk chair, sits comfortably (but alert), and opens up his Atomic Meditation app.

Now, when the app loads, Andy’s session data needs to be fetched from storage. In React, the useEffect hook allows us to execute a callback function when the component has mounted.

In the callback function, we asynchronously get the data from storage and then setSessionCount to the data we get back (“1”).

e.g.

useEffect(() => {
  AsyncStorage.getItem("@my_number").then(data => setSessionCount(data))
}, [])
Enter fullscreen mode Exit fullscreen mode

Now Anxious Andy completes another meditation successfully, so 1 needs to be added to sessionCount to keep track of the total number of sessions that he’s completed.

This new value is also saved permanently to storage – just as before.

e.g.

// User completes a meditation...
const saveData = () => {
  setSessionCount(prev => {
    const newSessionCount = prev + 1

    AsyncStorage.setItem("@my_number", newSessionCount.toString())

    return newSessionCount
  })
}
Enter fullscreen mode Exit fullscreen mode

The user has now completed 2 meditation sessions.

Day 3 – The Storm

Anxious-no-more Andy pulls out his phone and opens the app for his 3rd straight session (he’s doing well).

He wants to find out how well he’s doing, so he goes to the Stats Screen. “Ohh, lots of juicy statistics”, he murmurs to himself. “This app is awesome!”

But his love for the app diminishes quickly…

The app tells him he’s completed 11 sessions. He’s only completed 2!

Stats screen with wrong value

What went wrong

In day 1, we initially set sessionCount to 0 (a number).

The user completed a meditation, so we added 1. We then converted it to a string, “1”, and saved it to async storage (recall async storage only accepts strings).

In day 2, we retrieved the session count from async storage and setSessionCount to the value we received, “1” (a string).

The user completed a meditation, so we added 1 to sessionCount. But “1” + 1 in JavaScript is “11”, not 2.

We forgot to convert the data we got back from storage back into an integer.

The worst thing is that our program flagged no errors, this bug went freely unnoticed and caused us problems down the road. It can be difficult to find the source of problems like this!

JavaScript allowed us to freely and unknowingly change the data type of a variable throughout our program.

The Solution – TypeScript

What is TypeScript?

If you’re not familiar with TypeScript, basically it’s JavaScript with a few extra superpowers. Variables cannot change types – if they do, TypeScript will throw an error.

Browsers can’t understand TypeScript, so all of your TypeScript files are compiled down in JavaScript files (or a single “bundle” JS file).

How to use TypeScript with React Native

Adding TypeScript to an existing React Native project is easy – an npm install and a couple of config files and it’s done!

Now all I have to do is change my file from App.js to App.tsx to get automatic type checking.

As soon as the file extension is changed, TypeScript throws a wobbler (English slang for tantrum) telling me that the sessionCount variable which I initialised to a type of number is being assigned to a string:

TypeScript error

I now have to perform a check to make sure the data is not null, and then convert that data from a string to a number (using parseInt) to get rid of the error:

useEffect(() => {
  AsyncStorage.getItem("@my_number").then(data => {
    if (data) {
      setSessionCount(parseInt(data))
    }
  })
}, [])
Enter fullscreen mode Exit fullscreen mode

TypeScript forces us to write better, more robust code. Awesome!

Best resource to learn TypeScript

I learned TypeScript by following The Net Ninja’s TypeScript series.

If I need to learn a new language or framework, my first call-to-action is to check if the Net Ninja has done a series on it. He's superb!

Also, the official TypeScript docs are pretty good.

Conclusion

We can now sleep a little easier knowing that our variables can’t freely change type throughout our program. Thanks TypeScript.

N.B. JavaScript is still great for smaller projects. But for medium to large projects, or small projects that have the potential to scale, TypeScript is probably a worthy investment. And if you know JavaScript, learning TypeScript isn’t difficult.

If you enjoyed this article, then you can say thanks by checking out my Atomic Meditation app. Meditation is a great way to quieten the mind and cut away anxiety. The app is inspired by the bestselling book Atomic Habits, and is based on doing at least 2 minutes of meditation every day to develop a daily meditation habit. Please leave me a review if you enjoy it, it helps!

Have a great day :)

Discussion (9)

Collapse
manuthecoder profile image
𝙼𝚊𝚗𝚞𝚃𝚑𝚎𝙲𝚘𝚍𝚎𝚛

Nice!
How do I compile typescript?
I would like to use it someday, but I don't know hoe to ;)

I have a web hosting server (cPanel) and how do I compile/install/setup typescript?

Collapse
doabledanny profile image
Collapse
manuthecoder profile image
Collapse
bcowley1220 profile image
Brendan Cowley

I'm going to need a lot more than an atomic meditation app for the pain and suffering the typescript has caused... Bwhahaha... But thanks for the article.

Collapse
thewix profile image
TheWix

For a small enough project it probably isn't worth it. For anything of decent size, longevity, and with more than one developer any project would benefit from static typing. I found this to be even better with FP.

Type checking give you free testing and if you can use concepts like smart constructors, brands, unions, etc then you get better checking than traditional C-style languages.

Collapse
doabledanny profile image
Collapse
turbo63 profile image
Rustam Taramov

Danny, article is good 👍. But Atomic mediation app - I can't understand, how it works and for what ? 🙂 (I downloaded from android market)

Collapse
doabledanny profile image
Danny Adams Author

It's based on doing a minimum of 2 mins of meditation everyday. After 2 mins, the next day is unlocked. But after the 2 mins is up, you can continue for as long as you like - you'll likely want to carry on for longer!

The app also records your day streak and sends a daily reminder so it's perfect if you want to start a daily meditation habit.

You can check out this landing page if you'd like more info: 60daysofmeditation.com/

Thanks Rustam :)

Forem Open with the Forem app