TypeScript used to be on my $#!% 💩 list

shecodez

shecodez

Posted on December 1, 2021

TypeScript used to be on my $#!% 💩 list

JavaScript (JS)

JS - a high-level, ECMAScript, interpreted / just-in-time compiled programming language developed by Brendan Eich of Netscape. Not to be confused with Java.

JavaScript was initially created to “make web pages alive”.

  • well known - JS is almost as old as the internet
  • JS is an OOP (object oriented programming) language
  • JS is single-threaded
  • but JS is weakly and dynamically typed

👩🏽‍💻 (me): Good ol' JavaScript, what more can I say about one of the worlds most popular scripting language? 🌎 (world): Learn to TypeScript or GTFO.

So I started learning TypeScript. Not gonna lie it was so painful in the beginning. I hadn't been working with JS long enough, understand JS well enough, or become annoyed enough by all the silly JS errors / browser compatibility issues to appreciate something like TS.

Thus, TS was very much so on my 💩 list, but I have since seen the light.

TypeScript (TS)

TS - a strongly typed programming language developed by Microsoft that builds on JavaScript, giving you better tooling at any scale.

Editor Checks

Suddenly debugging was less of a nightmare with editor checks, because if TS doesn't like it, it wont compile.

const user = {
  id: l334,
  firstName: "Nicole",
  lastName: "Nobles",
  job: "Web developer",
}

console.log(user.name)
Enter fullscreen mode Exit fullscreen mode

JS doesn't know to alert me that user doesn't have a name property.

but with TS I get an error:
Property 'name' does not exist on type { firstName: string; lastName: string; job: string }

Auto-complete

No more guessing what properties are on an object.

Interfaces

If I made a User interface I can't add / remove any required properties to the object.

*Note: adding ? after a property makes it optional.

interface User {
  id: number
  firstName: string
  lastName: string
  job: string
  remote?: boolean
}

function updateUser(id: number, update: Partial<User>) {
  const data = getUser(id)
  const user = { ...data, ...update, city: "Hachiōji" }
  saveUser(id, user)
}
Enter fullscreen mode Exit fullscreen mode

TS will rightfully complain that 'city' does not exist on interface 'User'.

This only the tip of the TS iceberg. Don't take my word for it, you can check out the documentation here.

Conclusion

Once given a proper chance TypeScript has been amazingly helpful at saving me time and hard ache with features Editor Check, Auto-complete, and Interfaces. I won't lie sometimes I just slap any on things and call it a day, but it eats away at me until I get it typed like the rest of the project.

So, Keep calm, and Type(Script) on. Thanks for reading! 😊

💖 💪 🙅 🚩
shecodez
shecodez

Posted on December 1, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related