You're Learning Typescript All Wrong: 3 Concepts to add to your learning path

I thought I didn't like TypeScript.

Turns out, I just didn't really know how to use it beyond adding a type after a variable.

I'm not here to sell you on the benefits of TS. There are 238 articles posted just yesterday on LinkedIn and Medium to sway your opinion.

Honestly, I'm not sure I'm sold on it just yet.

• It adds additional complexity

• TS adds a compilation step which seems to have improved but still - a little slower (also, it compiles to JS 🧐)

• Not every library is on the TS train yet, which means devs need to declare Types manually or rely on yet another 3rd party library

So why learn it?

TypeScript was the fastest growing language last year. It's just not possible to ignore anymore.

Bootcamps have been slow to adopt it which leaves most junior devs forced to learn it on their own at work or through copy/paste tutorials. Shout at Matt Pocock who has some amazing material you should check out: https://www.totaltypescript.com/

Unfortunately, I bet most of you are making the same mistakes I did when I first started.

You added a type after a variable. Hooray!

This was me when I first started using TS. I thought to myself, "All this additional tooling just make sure a string is not coerced to a number?"

For real?

Once I ran into some issues with a NodeJS/Express project I was refactoring from JS to TS, I started looking for better ways to incorporate TS. I was adding too many interfaces and types which were similar but not exactly alike.

There had to be a better way to just litter types everywhere.

This is when I found

• Generics

• Decorators

• Mapped Types

Here are some simple use cases for each of the following concepts:

Generics

Generics provide a way to create reusable types that can work with a variety of data types. Using generics allow you to write functions and classes with placeholder types (a generic type if you will 😉), which can later be replaced with specific types when instantiated or invoked.

In this example, the fetchBody function is generic and takes a type parameter T. When calling the function, you can specify what T will be which makes ApiResponse more dynamic and able to handle multiple types.

Decorators

Decorators have been available in JS for a while with certain libraries but are part of TS out of the box.

Decorators wrap a function and can extend functionality, or in the example below, can be used to output the runtime of a function.

Mapped Types

To really kick up your TS game, you're gonna want to make use of mapped types which allow for more flexibility by extending types for re-use.

Here's an example of making a User type read-only (you cannot modify the instance)

I'll be adding more TypeScript material to my Not Another Course offering as I see this is language is quickly going from "nice-to-have" to "must-have" quickly.

For a gentle into to TS in a hands on project check out the beta version of this challenge https://github.com/CodeCoachJS/node_express_starter/tree/typescript_version

Scroll down to the TODOS section and fix the issues in the codebase to make it work.

Enjoy!