TypeScript keywords

keshavsaharia commented

2025-04-17 01:00:19 +02:00

(Migrated from github.com)

I am looking to contribute a minor update to the parser in the way it handles TypeScript keywords - specifically, certain TypeScript keywords like satisfies (https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-9.html) are not being correctly formatted as keywords.

To include this in the grammar, would I simply need to update the javascript.grammar file?

I am looking to contribute a minor update to the parser in the way it handles TypeScript keywords - specifically, certain TypeScript keywords like `satisfies` (https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-9.html) are not being correctly formatted as keywords. <img width="521" alt="Image" src="https://github.com/user-attachments/assets/bbb59ccf-4d15-421a-b3e5-4deb2e417672" /> To include this in the grammar, would I simply need to update the `javascript.grammar` file?

keshavsaharia commented

2025-04-17 01:01:57 +02:00

(Migrated from github.com)

Also, in case Marijn Haverbeke is reading this, my sincerest gratitude for all your tireless efforts!

marijnh commented

2025-04-17 08:10:44 +02:00

(Migrated from github.com)

Unfortunately, the TypeScript project doesn't publish a complete description of all the extensions they make to the grammar, so the more obscure ones I tend to find out about only through issue reports like this. Attached patch adds the satisfies operator.

Unfortunately, the TypeScript project doesn't publish a complete description of all the extensions they make to the grammar, so the more obscure ones I tend to find out about only through issue reports like this. Attached patch adds the `satisfies` operator.

❤️ 1

bmeurer commented

2025-04-17 09:45:32 +02:00

(Migrated from github.com)

I just updated Chrome DevTools to @lezer/javascript 1.5.0 locally and tried both the example from this post

type StringChecker = (value: string) => boolean;

const valueChecker = function(value: string|number) {
        return true;
} satisfies StringChecker;

and the example from the TypeScript documentation

type Colors = "red" | "green" | "blue";
type RGB = [red: number, green: number, blue: number];
const palette = {
    red: [255, 0, 0],
    green: "#00ff00",
    blue: [0, 0, 255]
} satisfies Record<Colors, string | RGB>;

console.log(palette.green);

but in both cases satisfies doesn't seem to be decorated as keyword.

I didn't dig deeper yet, though.

I just updated Chrome DevTools to @lezer/javascript 1.5.0 locally and tried both the example from this post ```ts type StringChecker = (value: string) => boolean; const valueChecker = function(value: string|number) { return true; } satisfies StringChecker; ``` and the example from the TypeScript documentation ```ts type Colors = "red" | "green" | "blue"; type RGB = [red: number, green: number, blue: number]; const palette = { red: [255, 0, 0], green: "#00ff00", blue: [0, 0, 255] } satisfies Record<Colors, string | RGB>; console.log(palette.green); ``` but in both cases `satisfies` doesn't seem to be decorated as keyword. I didn't dig deeper yet, though.

marijnh commented

2025-04-18 17:52:18 +02:00

(Migrated from github.com)

I forgot to add highlighting tags to the new token. Should be fixed now.

I forgot to add highlighting tags to the new token. Should be [fixed](https://codemirror.net/try/#c=aW1wb3J0IHtiYXNpY1NldHVwLCBFZGl0b3JWaWV3fSBmcm9tICJjb2RlbWlycm9yIgppbXBvcnQge2phdmFzY3JpcHR9IGZyb20gIkBjb2RlbWlycm9yL2xhbmctamF2YXNjcmlwdCIKCm5ldyBFZGl0b3JWaWV3KHsKICBkb2M6ICJhIHNhdGlzZmllcyBCXG4iLAogIGV4dGVuc2lvbnM6IFtiYXNpY1NldHVwLCBqYXZhc2NyaXB0KHt0eXBlc2NyaXB0OiB0cnVlfSldLAogIHBhcmVudDogZG9jdW1lbnQuYm9keQp9KQo=) now.

❤️ 1

keshavsaharia commented

2025-04-23 04:16:11 +02:00

(Migrated from github.com)

Thank you for this latest update @marijnh , it seems like it has improved the highlighting for all TypeScript keywords. I'm using CodeMirror 6 to build a free TypeScript reference guide and have found it to be marvelously easy to add things like inline errors and highlighting. Still a work in progress but hopefully you can see some Codemirror 6 features in the wild 😃

Thank you for this latest update @marijnh , it seems like it has improved the highlighting for all TypeScript keywords. I'm using CodeMirror 6 to build a [free TypeScript reference guide](https://ts.coach) and have found it to be marvelously easy to add things like inline errors and highlighting. Still a work in progress but hopefully you can see some Codemirror 6 features in the wild 😃

bmeurer commented

2025-04-23 16:49:18 +02:00

(Migrated from github.com)

Thanks Marijn!

Rows
Columns

TypeScript keywords #45