TypeScript: The character ">" is not valid inside a JSX element

Question

In this code:

export const createCategoriesParams = (filters: string[]) => {
  const tags = [...filters].filter(i => i !== 'All');
  // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
  let row = <any>[];

  tags.forEach(item => {
    row.push(`tag=${item}`);
  });

  return row.join('&');
};

when I run my esbuild script, it throws error in:

tags.forEach((item, ind) => {

saying

The character ">" is not valid inside a JSX element

any idea why this could be happening?

Answer 1

The TypeScript handbook warns :

Recall how to write a type assertion:

 const foo = <foo>bar;

This asserts the variable bar to have the type foo . Since TypeScript also uses angle brackets for type assertions, combining it with JSX's syntax would introduce certain parsing difficulties. As a result, TypeScript disallows angle bracket type assertions in .tsx files.

Since the above syntax cannot be used in .tsx files, an alternate type assertion operator should be used: as . The example can easily be rewritten with the as operator.

 const foo = bar as foo;

In your case, the line at fault is let row = <any>[]; which, taken literally, should be written as let row = [] as any; . Though let row: string[] = []; would be preferable to either.