TypeScript-typförklaring genererar ett meddelande: Tecknet ">" är inte giltigt inuti ett JSX-element

I den här koden:

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('&');
};

när jag kör mitt esbuild-skript, kastar det fel i:

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

säga

Tecknet ">" är inte giltigt inuti ett JSX-element

någon idé om varför detta kan hända?

Svar #1

Samma fel uppstod i min kod efter uppdateringen av eslint-loader. I mitt fall ändrade eslint-loader beteende så att det automatiskt vet hur man hanterar varje fil (js, jsx, ts, tsx). Så jag behövde uppdatera min webpack-konfiguration

från

{
    test: /\.tsx?$/,
    loader: 'esbuild-loader',
    options: {
        target: 'esnext',
        loader: 'tsx'
    }

}

till

{
    test: /\.tsx?$/,
    loader: 'esbuild-loader',
    options: {
        target: 'esnext'
    }

}

Svar #2

TypeScript-handboken varnar:

Kom ihåg hur man skriver en typförsäkran:

const foo = <foo>bar;

Detta hävdar att variabeln bar har typen foo. Eftersom TypeScript också använder vinkelparenteser för typförsäkringar, skulle en kombination med JSX:s syntax medföra vissa parseringssvårigheter. Som ett resultat tillåter inte TypeScript vinkelparentestypförsäkringar i .tsx-filer.

Eftersom ovanstående syntax inte kan användas i .tsx-filer, bör en alternativ typförsäkringsoperator användas: as. Exemplet kan enkelt skrivas om med as-operatorn.

const foo = bar as foo;

I ditt fall är raden som orsakar felet let row=<any>[]; som, bokstavligt talat, borde skrivas som let row=[] as any;. Även om let row: string[]=[]; skulle vara att föredra framför båda.