I was onboarding an experienced developer to TSX and faced a problem that I did not expect. When modern JavaScript is combined with JSX and TypeScript annotations, symbols like ( ) [ ] { } < > : end up playing too many roles and this becomes a significant learning barrier. Even a slightest change in a file can completely flip the meaning of the syntax used.
Our brain is adaptive, so folks who code modern web apps full time can easily read TSX and appreciate how expressive it is. But imagine it is your first project and you’ve only worked with ES5 before. Why is <Foo>{x}... a React node but <Foo>(x: Foo) => void is a generic function type? What is going on in({ param: myParam = 42 }: { param: number })?
Learning JSX and TypeScript step-by-step is the best approach, but it is not really necessary for experienced engineers who just need to pick a yet another dialect of a yet another language. The idea of code transpiling is simple, but the syntax is initially hard. What would help is some keyboard shortcut that would highlight TS-only stuff:
In practice, it’d be cool to have one command that temporarily dims all TS annotations and another command that dims everything but TS.
Of course, enums would need to have some special treatment because they impact both typings and JS runtime. However, this is a rare exception in the language so I would not worry about it too much.
I know that there exist online AST parsers, but they are too scary and can potentially make the onboarding worse. VS Code has a lot of flexibility, so how can we leverage it in some affordable way? What theme or extension to use?