Angular, Schematics and the Future of TypeWiz

Will adopting Schematics make TypeWiz successful?

5 min readOct 9, 2018

TypeWiz is a project I started a few months ago. It discovers and adds type information to your TypeScript project — which can be very helpful when migrating existing projects from plain JavaScript to TypeScript, and also when you want to increase the type coverage in your existing TypeScript project — that is, adding more types in places where they are missing.

If you are not familiar with TypeWiz, you are invited to read Why I created TypeWiz, and if you want to go deeper, I also wrote a very detailed blog post explaining how TypeWiz works behind the scenes, where you cal learn about the Abstract Syntax Tree, how TypeScript represents your source code in memory and how to work with the compiler APIs, and how TypeWiz was implemented on top of that.

Everybody loved TypeWiz

When I told the world about TypeWiz , people were really excited about it, and I got a lot of positive feedback. The project was well received in the community, and fellow developers made some significant contributions, and Pavel 'PK' Kaminsky even created a logo for the project. I was pumped!

Looking at the download numbers, however, gave me an unpleasant surprise:

But… Nobody is Actually Using It

Despite the fact everybody loved TypeWiz, nobody is actually using it! Imagine spending countless night working on a project, publishing it, getting all this positive feedback, then working on it even more, guiding contributors from the community, refactoring the project and improving the code base to make it more modular and extensible, and then figuring out that it doesn’t give any value to other people? 😕

On the one hand, this is extremely frustrating. On the other hand, I am happy I created TypeWiz — apart from everything I learned about TypeScript internals, the AST, and working with MonoRepos, this also eventually led me to meeting Craig Spence, and creating projects such as BigTSQuery, allowing me to run complicated TypeScript source code queries over the entire collections of Open Source repositories in GitHub.

Is TypeWiz Really not Useful?

Honestly, I don’t know. One thing I can tell is that the complicated setup instructions sure didn’t help. Using TypeWiz with Node project is pretty straightforward, but still created some confusion. Using it on the front end is, however, a completely different story — you have to edit your Webpack configuration is several different places, and only if you did everything right, you may be able to start getting value out of the project.

This also creates a problem for people who use the Angular CLI or create-react-app, as they can’t easily customize their Webpack configuration.

A New Hope: Angular + TypeWiz = 💗

Over the past few months, several people have asked how to use TypeWiz with Angular CLI projects. This is challenging for two reasons: first, you can’t customize the Webpack configuration for the CLI. Second, even if you did find a way around this, the Angular Compiler Plugin does not allow other plugins or loaders modify its input, which means TypeWiz can’t really run in conjunction with it.

Initially, integrating TypeWiz with the Angular CLI seemed impossible. But after giving it some though I found a way that could provide a great user experience: creating an Angular Schematic that will patch your Angular CLI (by editing the source files inside your node_modules) and alter the built-in Webpack configuration to enable TypeWiz for your project.

In addition to that, I had to re-implement TypeWiz as a TypeScript Compiler Transformer, so it could run just before the Angular Compiler does.

I started prototyping the new Schematic, and it is pretty much ready for prime time. I just published the new package on npm, in order to make it as simple as possible to use TypeWiz with Angular.

Try TypeWiz with Angular, Share Your Feedback

To use the new TypeWiz schematic in your Angular CLI project, simply run:

ng add typewiz-angular

If you use yarn, please check if running this command created the following folder:

node_modules/typewiz-core/node_modules/typescript

If you do, please delete it. Otherwise, TypeWiz will use a different TypeScript version than your Angular CLI does, and that will create issues. I’m not sure why this only happens with yarn, but I hope to find a workaround soon.

The next time you ng serve your project, you should see a file called collected-types.json. This is where TypeWiz stores all the type information that it discovers when your code executes.

Test Your Setup

Add a new public field to your AppComponent class, but don’t specify the type. Then assign a numeric value to this field in your constructor. For instance:

Start your app, and then look inside the collected-types.json file. You should see some content written to it. Then, run the following command:

npm run typewiz:apply-types

This should instruct TypeWiz to update your source code with the Types it discovered. Open your app-component.ts file, and you should see that TypeWiz added the type number to the declaration of the new field.

The Future of TypeWiz is in Your Hands 🔮🤝

Giving up on TypeWiz was the easy thing to do. But then, I’d never know whether the reason it was never widely adopted was the lack of real value in the project, or the overly complicated setup procedure. That’s why I decided to run this experiment and make it dead simple to add it to your Angular projects.

Will it work? I don’t know. Now it is only up to you…