TypeScript non-null assertion operator breaks subsequent syntax highlighting

[mjbvz]

From @axefrog on May 11, 2017 23:38

• VSCode Version: 1.12.1
• OS Version: Windows 10

Without non-null assertion operator:

With non-null assertion operator:

The only difference between the above two examples is the presence of a non-null assertion postfix operator after the expression vars.get(name).

I've tried switching through all my color themes, and they all have the same issue, suggesting this is an issue with the way TypeScript is being tokenized, rather than with any particular theme itself.

Copied from original issue: microsoft/vscode#26496

[mjbvz]

Please post up the source of the examples along with the screenshots

[mjbvz]

From @axefrog on May 12, 2017 1:45

type Resolve = () => number;

class Test {
  first(values: Map<string, Resolve>): number {
    return values.has('a') ? values.get('a')!() : 0;
  }

  second(): string {
    return 'foo';
  }
}

Seems to be an interplay between the ternary operator, the not-null assertion operator and function call parentheses. Even the syntax highlighting for the above code sample here on Github seems to show a similar issue.

Workaround is to put parentheses around the asserted expression:

type Resolve = () => number;

class Test {
  first(values: Map<string, Resolve>): number {
    return values.has('a') ? (values.get('a')!)() : 0;
  }

  second(): string {
    return 'foo';
  }
}