Your Javascript and the Typescript compiler api

Do you use VS Code and wonder how it can go to definition or rename variables so easily? Then this talk is perfect for you.

Typescript compiler understands a lot about the Javascript and JSX we write everyday. Come, let’s explore how to use parts of the compiler and modify our JS code for fun.

Typescript compiler is not just about TS - it helps us with the Javascript and React code we write everyday. If you use VS Code to edit Javascript, you are already using it behind the scenes.

Gist - We will look briefly at how Typescript internals power the JS/TS language features in VS Code, understand how our Javascript code looks to a compiler (AST, symbols) using explorative tools and build some code transformations on screen.

Takeaway - Hopefully at the end of the talk, we will understand how easy it is to use parts of the compiler and consider it as a powerful tool to modify your code programmatically.

Details -

Typescript compiler api includes parts of the actual compiler (parse, linker, etc) which is opened up for separate consumption.

Part 1 (5 min) - How does VS Code understand JS? Through language service. That, in turn, uses the lower level TSC api to build higher level utils. We will only look at this lower level api for today.

Ok, so what does it provide? Parser (gives AST), linker (gives scoping and variables) and stringify (from AST to code).

Part 2 (7 min) - Let’s look at this AST thing. We’ll open up TS AST Viewer or look at a annotated screenshot to see what each line and some construct maps to in the AST. For ex, import statements, variable declaration, assignment expression and functions.

There can be different variables (in diff. scopes) with the same variable name. How do we connect the related ones? They share a common symbol.

Part 3 (15 min) - Let’s use it to do something. We will build 3 examples -

a. just console.log all variable names (i.e. how to filter nodes). What if we return every node twice? Well, duplicate statements.

b. let’s swap sides of every simple assignment expression, like a = b to b = a (i.e. modify nodes). What happens in complex assignment expr.?

c. time to get serious. Let’s rename a variable, just like VS code (i.e. find and replace nodes).

Part 4 (2 min) - Conclusion - What can i build with this? Let’s see some examples. It’s easy once you get started.

I understand it’s hard to teach the basics of AST and also show some AST transformation in the same talk. So, I’ll try to keep things more explorative and visual.

1. One of the things I will try to do is show the line-by-line transformations using some from-to animation. Hopefully that will reduce the disconnect.
2. AST explorers show a lot of information, which might be distracting in a presentation. I’ll show a custom annotated version to highlight only some parts.

It is still considered a bit advanced topic. So, unfortunately it might not be suitable for some audiences with the intended pace.