Understanding Javascript code with Typescript compiler API (Part 1)

Second part -    • Modifying Javascript with Typescript compi...  

Typescript compiler API provides access to the internal parts of Typescript compiler (TSC) to build transformers and static analysis tools.

1. Intro and why programmatic transformation - 0:00
2 Renaming manually is hard - 0:46
3. Renaming using editor tools (editor demo) - 2:14
4. How does VSCode understand Javascript? - 6:52
5. JS/TS language plugin ( VS Code uses TSC) - 7:52
5.1. Language service - 8:39
5.2. Virtual file in Language service (editor demo) - 10:41
6. Parser - 13:46
7. How does AST look - 15:26
7.1. Can we replace a function with a expression? (editor demo) - 17:27
7.2. Parsers are everywhere - 20:05
8. Linker and symbols - 21:44
9. Let's look at some ASTs - 26:26
9.1. ts-ast-viewer.com and astexplorer.net - 28:20
9.2. SourceFile - 30:46
9.3. VariableDeclaration - 33:22
9.4. Expression vs statement - 38:53
9.5. Addition = Binary + PlusToken - 42:00
10. Coding, finally! - 44:45
10.1. Demo webapp - 46:12
10.2. Boilerplate code - 47:04
10.3. Console.log all variables - 51:52, 54:02
10.4. Run that code - 55:29
11. Ending - 56:30

Today, we start with the basics of - why we need to understand our code programmatically, how VS Code + TSC works, parser and linker, look at some ASTs and start writing some code to explore it.

This video only has one code example, to console.log all variables. In the next one, we will see more interesting transformations like duplicating some of your statements, swapping two sides of a assignment expression and renaming a variable. Stay tuned.

One good example of static analysis tool (using TSC) is https://typedoc.org/ - it reads all type information and jsdoc-style comments from your source code (JS/TS) to create a external documentation.