My first time using TypeScript

Introduction

Hey everybody!

We are officially into 2024, and I just finished up creating the backend for my upcoming project! As you may or may not know, December 7, 2023 I graduated from FullStack Academy's Web Development bootcamp and we were given a last project to work on beyond graduation.

I wanted to challenge myself and also incorporate typescript into my project as well so I can add another tool to my arsenal. Because of this challenge there has been some slight learning curve but for basics, if you are familiar with javascript then you should not have too much of a difficult time tackling typescript!

Javascript vs Typescript

So what's the difference between javascript and typescript?

One key difference is typescript has what's called a type system. This basically means that typescript keeps track of 'somethings' type, here let me explain.


const favNum: number = 3;


Here I declared a variable named favNum with type of number and gave it the value of 3. Don't worry you wouldn't need to declare a type for every variable! Typescript is smart enough to know that favNum is a type of number without being told so and plus that would be sort of redundant. I just wanted to share an example and I know you might be asking yourself,
'So why is this better? Is this not more code I would just have to write?'

Why use Typescript?

In short typescript can save you a ton of time in the debugging stage! And while yes it is technically writing more code but it's for good reason! I will use some real examples of instances where typescript helped me prevent an error from happening or fixing an error in a shorter amount of time from my recently completed project.

Take this code for example:

const userGoal = req.body;
let dictionary = {};
        Object.keys(userGoal).forEach(function (key) {
          dictionary = { ...dictionary, [key]: userGoal[key] };
        });

As you can see, I want to create an object named 'dictionary' with the incoming data within 'userGoal.' Now, nothing is wrong with this code, and it works as expected during my testing. However, this is where I believe TypeScript's type system may have saved me from a future error, thereby saving me time. I noticed that when hovering over the 'dictionary' variable, it showed a type of 'any.' This means TypeScript doesn't know what kind of data this variable should hold. While this is not necessarily bad, it is good practice to implement TypeScript's 'types' in situations like this. I also believe having types would help prevent a user error from occurring in the future if 'dictionary' still had a type of 'any.

Here's how I gave my dictionary object a type of:

// Here i create the interface outside of my server route and declaring what each 'key' should be so Typescript knows what to expect.
interface MoneyGoal {
  user_id: number;
  money_goal: number;
  frequency: string;
  target_date: Date;
  payment_amount: number;
  created: Date;
}

// We then change the dictionary line a bit, declaring exactly what each key's value should be and from where they're coming from.

let dictionary: MoneyGoal = {
          user_id: userGoal.user_id,
          money_goal: userGoal.money_goal,
          frequency: userGoal.frequency,
          target_date: userGoal.target_date,
          payment_amount: userGoal.payment_amount,
          created: userGoal.created,
        };
// And also remove the Object.keys function

So what's the point?

Adding an interface provides static type checking and allows typescript to catch type errors at compile rather than runtime.
In other words typescript really loves structure and is only concerned that the data it receives matches the structure its given. This is why typescript is known as a structurally typed type system. Something I noticed is typescript also helps aid your code editor with autocomplete!

Another honorable mention I want to include is Promise types. They look like this
Promise<t>
This is a generic type where the t is a placeholder for the type of data the Promise will eventually complete.

Why are they used?
As you know a promise represents a value that has not yet been created but will be sometime in the future.

Promise type example

interface User {
id: number;
username: string;
email: string;
}

async function createUser({ username, password, email, } : CreateUserParams): Promise<User> {
// Rest of code for function...
}

So createUser is a function that creates a user therefore this is asynchronous code and we are letting Typescript know that at the end of this function you will receive this object named User with included properties.

Typescript helps squash bugs!

In short the reasons we would use this is code readability, allowing the data readers to know exactly what they can expect from this function. Another big reason is Typescript is able to see the expected type from the expected Promise and will provide feedback if there is any mismatches.

My thoughts

Honestly my thoughts as someone who has used Typescript for the first time coming from Javascript background, I indeed enjoyed using Typescript a lot! Once you get passed the learning curve with knowing what types to use or why exactly typescript is 'angry', creating my backend for my project was faster than I originally thought it would take me and once I got into my testing all my created server routes I had less errors and if I did Typescript made the errors less of a hassle to find and fix the bugs!

Closing

Thank you for reading! I'm excited to jump into the front end development for this project and continue learning and using more of what Typescript has to offer! I hope I helped another newbie out there who may be starting out with Typescript as well!

What's your thoughts about Typescript? Let me know in the comments!

Until next time,
Let's squash these bugs!

Sources here

My portfolio