Typescript - First Impressions

Typescript Code

tl;dr Typescript definitely has some pluses and minuses, know them well before starting your project


Publish Date: 2021-08-20


Return Home

For the project I'm currently working on, I decided to try (once again) to finally learn and use Typescript with it. The stack just for reference is:

  • Next JS

  • Typescript

  • Strapi Headless CMS

  • Tailwind CSS

  • Heroku (backend), Vercel (frontend) - planned

Except for Typescript, I've used all of the other tech, so I won't talk about them here, but when the project is finished (hopefully soon) I'll talk more about them in the project review/portfolio section.

What is Typescript?

If you're a new web dev like I am, you may not know exactly what Typescript is yet. So, simply put Typescript (hereafter referred to as TS) is Javascript+, or to use more technical language it is a superset of Javascript. This just means it is Javascript (hereafter referred to as JS) with a number of additional capabilities.

These capabilities included things like automatic type checking in the editor (IE my variable takes a string, TS will check that variable does always have a string assigned to it). There are plenty of other more advanced features, but this is not intended to be a TS tutorial (plus there are people much better at TS than me out there to learn that).

Initial Impressions

Before starting this project, there was a common theme I heard about TS. It's potentially a super useful and great language to use, but it requires extra time and effort to implement in a project. That I definitely found to be true. Granted part of that was true because I am using it for the first time, but it did add a significant amount of work to find the proper types for different things that were not primitive types. Writing interfaces and just doing some of that extra stuff to get all the types in.

Using it with Next JS/React was another added layer of complexity. How to define different props and components and JSX things was also a bit confusing. This project is using the React hook useContext, and admittedly I wasn't able to figure out how (at least to this point) how to properly type useContext. So, in the end I ended up writing just that part in JS.

I feel this is rapidly changing, but another potential problem I've found sometimes in past attempts to use TS is that not all libraries have types already built in which makes it more difficult to use them because you then need to create that type on your own which is currently beyond my skill.

Super Important Takeaways From Using Typescript

Plan! The first big takeaway I can give to any developer thinking of using TS for a project (that is not already familiar with it of course) is to plan your project well. Are you going to use a framework? Are you going to use libraries to add more functionality or to simplify things? Does that library have TS types built in (or are they available somewhere else)? If you use something like React hooks do you know/can you find how to type those hooks? What kind of data will your project use, where/how is it fetching and sending that data? How is state being managed (if there is state)? Now, you don't need to use TS with every file/component in your project, but it's still good to know where you will use it and where you won't.

The second thing is to think does my project need TS? Will my project be better by implementing TS instead of JS? In this regard I see the decision to use TS similar to the decision of does it make sense to use a framework or vanilla JS in a project. Sometimes it will make a lot of sense. If you're passing tons of data around here and there or if the project is expect to get really big and use a lot of data, then TS makes a ton of sense to help ensure that unexpected errors do not occur. However, sometimes it doesn't make sense to use TS. If the site is a simpler static site - like a markdown blog - then why waste time, energy, project size by adding something that won't really add much (if any) value to the project?

Will I Continue to Use TS?

As long as the project meets the above two requirements, the answer is yes I will continue to use TS when possible. To be honest, I feel like I've barely scratched the surface of what is possible with TS. But, I have been very pleased with the functionality and benefits of using TS even in a relatively simple form. While sometimes it is annoying to get constant error messages about types, and TS seems to throw errors very quickly and often (like just creating a TSX file will throw an error until you actually write the template code), I do appreciate that I know that something won't work properly because I didn't pass the data properly rather than having to look at the browser and parsing the error message that pops up there.

We'll stop here for now since I just wanted to throw out some initial reactions to using TS. More to come later.