如何在VSCode中高亮显示所有TypeScript标注（token）？

背景问题 #

我在给经验丰富的开发者做TSX入门引导时，遇到了一个意料之外的问题：当现代JavaScript结合JSX和TypeScript标注时，( ) [ ] { } < > :这类符号承担了太多角色，成了非常明显的学习障碍。哪怕文件只有极微小的改动，都可能彻底改变对应语法的含义。

我们的大脑适应性很强，全职做现代Web应用开发的开发者可以轻松读懂TSX，也非常认可它的表达能力。但如果是第一次接触这类项目、此前只用过ES5的开发者，很容易产生困惑：为什么<Foo>{x}...</Foo>是React节点，而<Foo>(x: Foo) => void却是泛型函数类型？({ param: myParam = 42 }: { param: number })这段代码到底是什么意思？

期望功能 #

循序渐进学习JSX和TypeScript确实是最佳方案，但对于只需要快速掌握这门新语言方言的资深工程师来说，完全没必要走这个流程。代码转译的概念非常简单，但初期的语法理解门槛很高。如果有快捷键可以只高亮属于TS的内容，会带来很大的帮助：

实际使用中，如果能有两个命令，一个可以临时调暗所有TS标注，另一个可以调暗除TS内容外的所有代码，会非常实用：

当然enums需要特殊处理，因为它们既影响类型定义，也会影响JS运行时，不过这是TypeScript中少见的例外，暂时不用过多考虑。

具体疑问 #

我知道有在线AST解析器，但它们的使用门槛太高，反而可能让入门过程更困难。VS Code的灵活性很高，有没有低成本的方式可以实现这个需求？应该使用什么主题或者扩展？

内容的提问来源于stack exchange，提问作者Alexander Kachkaev