Angular, Schematics and the Future of TypeWiz

Will adopting Schematics make TypeWiz successful?

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.

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:

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.

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.

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.

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:


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.

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.

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…

This is the 9th post in my Postober challenge — writing something new every single day throughout October.

I will tweet whenever I publish a new post, promise! ✍



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Uri Shaked

Google Developer Expert for Web Technologies, Maker and Public Speaker