books on shelves
The Anatomy of a Great Typescript Book

If I was to write a TypeScript book, I would aim it at web developers who have started using TS, but come from a JavaScript background and have now been put on a TS-based project.

I wouldn’t aim at a certain web framework like React, or Angular, but how a web developer can start to use all the more advanced features in TypeScript so they can write good, type-safe code for their application, no matter the framework they are using.

In this ‘book,’ I will cover briefly what TypeScript is and its aim. I think it is clear now what TypeScript is and what its original aim was, but if someone is coming to this ‘book’ without knowing anything about TS then a brief introduction is needed. Try to explain to someone who’d be asked or just started using TypeScript why it’s so good and why they should be using it over JavaScript.

I’d then move on to introduce Types, and the primitive types that you have in TS (string, number, boolean) then move on to how to define your Types and the various ways you can do this. How you can create Types from other Types, how to use the utility Types and build up the Types for your project. All the time I try to keep it framework agnostic but relate it to a web developer who is now working on a TS-based project for the first time. So they can see that there are primitive Types, but they aren’t all you have (not everything needs to be a string). How you can start to build your Types that are more descriptive and applicable to your application.

Then I’d start looking at classes and modules and how they can be used along with Types to create a common library that you can use within the components of the framework you are using whether it’s Angular, Vue or React. Building this library of domain-specific Types that describe the data of your application and how you can use classes and modules to structure this library.

After introducing this concept of building a library for your application, which is more domain-specific and provides the business logic your UI components need. I’d move on to using Generics and how they can improve the re-usability of this business logic library.

I found Generics in TypeScript a complex topic to understand, especially if you’ve come from something like JavaScript. They are a powerful concept to understand and to start making use of, when you do it takes the re-usability of your code to another level. I feel that as a web developer who has used a couple of UI frameworks, concepts like Generics and Type manipulation are features I know about but haven’t used much in my applications because so much is handled by the framework. If I learnt more about these advanced concepts of TypeScript they’d improve my code so much.

I would then start to finish the book by looking at the compiler, how it works, and how to make use of the TSConfig settings and compiler. Again through using UI frameworks a lot of the TS compiler settings are set up as part of the framework CLI tooling. Knowing more about this area can lead to more efficient code.

After all that I’d spend a little time looking at the various TypeScript libraries that are available which can be used along with the framework to improve Type safety and maintainability within an application. Libraries like ZOD and tRPC, for example.

Finally, I would then take this concept of learning to build an internal library of business logic for an application and go through how external libraries can be built that can be used to share business logic across multiple applications. If you are a web developer who works for an organisation who have more than an internal application that uses TypeScript and how using features like classes, modules and Generics a Type safe domain-based library can be built and used across all these applications.

I think the aim of this ‘book’ would be to show that, yes TypeScript is used by all the main web frameworks, but there is more to it than just writing the code behind your framework’s components. We learn a lot about frameworks but not so much about the language behind it

Free close up hand typing
Thinking in TypeScript

Throughout all my time with Angular and Vue, the one constant through both frameworks is TypeScript.

Generally, I always thought I knew TypeScript, but over the last couple of months, it’s clear that there is far more to TypeScript and what you can do with TypeScript than I knew.
After watching more and more videos on TypeScript I see that there is so much more I need and want to know about TS. So I’m starting to really study TS, to get to know it and make sure I’m using the advanced features of TS.

My plan for learning advanced TypeScript is:

  • Watch all the Matt Pocock Advanced TypeScript videos
  • Read through Programming TypeScript by Boris Cherry
  • Read Effective TypeScript by Dan Vanderkam
  • Read TypeScript 4 Design Patterns and Best Practices by Theo Despooudis

My aim is to learn the more advanced features of TS so when I have a new feature to add (using either Angular or Vue) or a bug to fix I start to think about the more advanced features of TypeScript e.g. Generics, Types, patterns etc, to how I approach this new feature or bug.

assorted books on shelf
Dealing With CommonJS based dependencies

An Angular quick tip I discovered today was if you have an application with many third-party libraries that use CommonJS instead of ES modules. You can add the names of these libraries to the "allowedCommonJsDependencies" option in the builder settings in Angular.json.
This helps remove all the warnings in your build, it is basically telling Angular that these libraries are ok to use CommonJS for now until they are updated.

This is great if you are updating an Angular app, but don’t want to go through and update all the dependencies that are still using the CommonJS approach. Then over time as you update these libraries they can be removed from the "allowedCommonJsDependencies" array.

Here’s a link to the official Angular docs on this – https://angular.io/guide/build#configuring-commonjs-dependencies