TypeScript：字符“>”在 JSX 元素内无效

Question

在这段代码中：

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

当我运行我的 esbuild 脚本时，它会引发错误：

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

说

字符“>”在 JSX 元素中无效

知道为什么会这样吗？

Answer 1

TypeScript 手册警告：

回想一下如何编写类型断言：

 const foo = <foo>bar;

这断言变量bar的类型为foo 。 由于 TypeScript 也使用尖括号进行类型断言，将其与 JSX 的语法结合起来会带来一定的解析困难。 因此，TypeScript 不允许在.tsx文件中使用尖括号类型断言。

由于上述语法不能在.tsx文件中使用，因此应使用备用类型断言运算符： as 。 这个例子可以很容易地用as操作符重写。

 const foo = bar as foo;

在您的情况下，故障线是let row = <any>[]; 从字面上看，应该写成let row = [] as any; . 虽然let row: string[] = []; 会比任何一个都好。