VS Code TypeScript syntax highlighting gets messed up after type

Question

In TypeScript on VS Code I have the following type:

export type PgInheritableTableWithColumns<
  T extends TableConfig
> = PgTableWithColumns<T> & {
  extend<
    TNewTableName extends string,
    TNewColumnsMap extends Record<string, PgColumnBuilderBase>
  > (
    name: TNewTableName,
    columns: TNewColumnsMap,
    extraConfig?: (self: BuildExtraConfigColumns<TNewTableName, TNewColumnsMap, 'pg'>) => PgTableExtraConfigValue[]
  ): PgInheritableTableWithColumns<{
    name: TNewTableName;
    schema: T['schema'];
    columns: BuildColumns<TNewTableName, TNewColumnsMap, 'pg'> & T['columns'];
    dialect: 'pg';
  }>;

  extend<
    TNewTableName extends string,
    TNewColumnsMap extends Record<string, PgColumnBuilderBase>
  >(
    name: TNewTableName,
    columns: (columnTypes: PgColumnsBuilders) => TNewColumnsMap,
    extraConfig?: (self: BuildExtraConfigColumns<TNewTableName, TNewColumnsMap, 'pg'>) => PgTableExtraConfigValue[]
  ): PgInheritableTableWithColumns<{
    name: TNewTableName;
    schema: T['schema'];
    columns: BuildColumns<TNewTableName, TNewColumnsMap, 'pg'> & T['columns'];
    dialect: 'pg';
  }>;
};

Why does it mess up my syntax highlighting in the rest of the file?

Messed up syntax highlighting:

Correct highlighting:

By splitting up the type into type + interface like

interface ExtendFn<T extends TableConfig> {
  extend<
    TNewTableName extends string,
    TNewColumnsMap extends Record<string, PgColumnBuilderBase>
  >(
    name: TNewTableName,
    columns: TNewColumnsMap,
    extraConfig?: (self: BuildExtraConfigColumns<TNewTableName, TNewColumnsMap, 'pg'>) => PgTableExtraConfigValue[]
  ): PgInheritableTableWithColumns<{
    name: TNewTableName;
    schema: T['schema'];
    columns: BuildColumns<TNewTableName, TNewColumnsMap, 'pg'> & T['columns'];
    dialect: 'pg';
  }>;

  extend<
    TNewTableName extends string,
    TNewColumnsMap extends Record<string, PgColumnBuilderBase>
  >(
    name: TNewTableName,
    columns: (columnTypes: PgColumnsBuilders) => TNewColumnsMap,
    extraConfig?: (self: BuildExtraConfigColumns<TNewTableName, TNewColumnsMap, 'pg'>) => PgTableExtraConfigValue[]
  ): PgInheritableTableWithColumns<{
    name: TNewTableName;
    schema: T['schema'];
    columns: BuildColumns<TNewTableName, TNewColumnsMap, 'pg'> & T['columns'];
    dialect: 'pg';
  }>;
}

export type PgInheritableTableWithColumns<
  T extends TableConfig
> = PgTableWithColumns<T> & ExtendFn<T>;

The highlighting goes back to normal. Is it a VS Code bug?

I don't know why (it looks related to the intersection type, but also does not work with a union type), but if you put extends up to and including the opening parentheses on a single line, the syntax highlighting seems to work. Both: extend<TNewTableName extends string, TNewColumnsMap extends Record<string, PgColumnBuilderBase>>( — Silvermind
– Silvermind, Commented Nov 13 at 17:03

Soufiane Sakhi · Accepted Answer · 2025-11-16 17:18:09Z

1

It seems to be an issue with the TextMate grammar file for TypeScript for VS Code.

It doesn't properly support the extends keyword, here is an open issue portraying the same behavior https://github.com/microsoft/TypeScript-TmLanguage/issues/1048

The workaround you found seems to be working

answered Nov 16 at 17:18

Soufiane Sakhi

1111 bronze badge

New contributor

Sign up to request clarification or add additional context in comments.

Comments

RedCMD · Accepted Answer · 2025-11-17 02:56:26Z

0

caused by the TypeScipt TextMate grammar not supporting multi-line function typeparameters correctly

heres the repo https://github.com/microsoft/TypeScript-TmLanguage/issues
and a similar issue https://github.com/microsoft/TypeScript-TmLanguage/issues/1048

single line works correctly

type ABC = string;

export type Foo =  {
  extend<ABC extends string,> (): string;
};

export const A = 5;

multi-line broken

type ABC = string;

export type Foo =  {
  extend<
    ABC extends string,
  > (): string;
};

export const A = 5;

answered Nov 17 at 2:56

RedCMD

5324 silver badges9 bronze badges

Collectives™ on Stack Overflow

VS Code TypeScript syntax highlighting gets messed up after type

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related