What is the token name for types in VSCode Typescript syntax highlighting?

Question

I'd like to change the styling of my VSCode syntax highlighting, so that I can differentiate between types and classes.

class Thing; // should be one color
type ThingT; // should be another color

What is the name the token name I would need to specify? Will I need TODO Highlight?

Answer 1

The foreground color of class uses the scope entity.name.type.class.ts. type uses entity.name.type.alias.ts.

Update: If overriding in settings.json, use:

"editor.semanticTokenColorCustomizations": {
    "enabled": true,
    "rules": {
        "type": {
            "foreground": "#ff0000" // color here
        }
    }
}

---

FYI, you can see scopes with the Developer: Inspect Editor Tokens and Scopes command. For example, I got this for my TypeScript class:

language	typescript
standard token type	Other
foreground	#FFCB6B
background	#0F0F0F
contrast ratio	12.78
---	---
textmate scopes	entity.name.type.class.ts meta.class.ts source.ts
foreground	entity.name.type.class { "foreground": "#FFCB6B" }

You might also use the Developer: Generate Color Theme From Current Settings command: