How the TypeScript Compiler Compiles
huy.rocksThis is a bit misleading in where the "Type Checker" box is pictured, but I think it's due to an understandable confusion about how the compiler is structured.
Importantly, types do not affect TypeScript emit[1]: you can take a TS program, replace every type with Banana and the compiler will have the same output.
(I am not sure, but I think the TypeScript emitter does use a "type checker" object for type-adjacent things like resolving scopes. But it does not use such an object for checking types during emit. Another way of saying this is that type checking can be done during emit but conceptually it's a an optional segue on the side, not the box immediately leading to .js files.)
[1]: http://neugierig.org/software/blog/2016/04/typescript-types....
Hey, I'm the author of the article. Thank you so much for the feedback!
Yeah, look like I get the relation between Emitter and Type Checker in the reversed way [1] :D The type checker should provide an EmitResolver. I'll update the post and the diagram!
[1]: https://basarat.gitbook.io/typescript/overview/checker#assoc...
The article is great, sorry for the quibble!
The maybe too subtle point I was trying to make is that, even though the TypeChecker object literally provides an EmitResolver (I think? something like that?), in terms of the conceptual layout of the compiler, if you have a box labelled "Type Checker" it's natural for the reader to think it's where type checking happens.
In other words, the graph is something like
TypeChecker object -> EmitResolver -> js files | v type checking
Typo in the title (should be "Compiler" and not "Complier")
"You have 20 seconds to compile."
No this is typescript. They meant what they said. ;)
Does Typescript even compile or is it transpile?
Both. Type erasure is a transpilation process. Generating .d.ts and other type metadata files is a compilation process. (With conditional types alone the type checker is compiling a fully Turing complete mini-language.)
Excellent article. The entire blog has heaps of good stuff. What a find.
I wish more tech blogs were this well-written and focused.
Thank you so much!
Love the illustrations. How did you make them?
Not the author, but they look like they’re from Balsamiq.
I haven’t used it for a while, but I remember Balsamiq being a great tool, especially for quick low-fi UI wireframing.
Awesome, thanks for the URL!
The author here, I'm glad you loved it :D Yes, I'm using Balsamiq, it's a great tool! Sometimes I also use Excalidraw.com too