React with TS 中奇怪的“解析错误：意外的令牌”

Question

我有这个辅助函数，它在用 JavaScript 编写时运行良好。但是当我添加 TypeScript 时，奇怪的事情开始发生。那是一个带有函数的文件：

interface Toy {
  setId: string;
  name: string;
  year: number;
  themeId: number;
  themeName: string;
  subthemeId: number;
  subthemeName: string;
  parts: number;
  imageUrl: string;
  brandName: string;
}
enum SortBy {
  NameAsc = 'name-asc',
  NameDsc = 'name-dsc',
  PartsAsc = 'parts-asc',
  PartsDsc = 'parts-dsc',
  YearAsc = 'year-asc',
  YearDsc = 'year-dsc'
}
type Property = 'name' | 'parts' | 'year';
type Type = 'asc' | 'dsc';
type SortParams = [Property, Type];

const sortToys = (_toys: Toy[], sortBy: SortBy): any => {
  const toys = _toys.sort((toy1, toy2) => {
    const [property, type] = <SortParams>sortBy.split('-');
    const properties = {
      toy1: toy1[property],
      toy2: toy2[property]
    };
    if (properties.toy1 > properties.toy2) {
      return type === 'asc' ? 1 : -1;
    } else if (properties.toy1 < properties.toy2) {
      return type === 'asc' ? -1 : 1;
    }
    return 0;
  });
  const pages = [];
  while (toys.length) {
    pages.push(toys.splice(0, 30));
  }
  return pages;
};

export default sortToys;

这是我在尝试构建项目时遇到的错误：

src\utils\helpers\filterToys.ts
  Line 12:11:  Parsing error: Unexpected token, expected "}"      

  10 |     const [property, type] = <SortParams>sortBy.split('-');
  11 |     const properties = {
> 12 |       toy1: toy1[property],
     |           ^
  13 |       toy2: toy2[property]
  14 |     };
  15 |     if (

我知道对象本身没有问题，但可能发生了一些事情。我想不通，也许有人看到了什么奇怪的东西？

Answer 1

出现此错误是因为 TS 不确定你是否使用 JSX。

尽量避免使用<Type>variable 符号。

如果要使用类型断言，只需使用as 运算符即可。

interface Toy {
  setId: string;
  name: string;
  year: number;
  themeId: number;
  themeName: string;
  subthemeId: number;
  subthemeName: string;
  parts: number;
  imageUrl: string;
  brandName: string;
}
enum SortBy {
  NameAsc = 'name-asc',
  NameDsc = 'name-dsc',
  PartsAsc = 'parts-asc',
  PartsDsc = 'parts-dsc',
  YearAsc = 'year-asc',
  YearDsc = 'year-dsc'
}
type Property = 'name' | 'parts' | 'year';
type Type = 'asc' | 'dsc';
type SortParams = [Property, Type];

const sortToys = (_toys: Toy[], sortBy: SortBy): any => {
  const toys = _toys.sort((toy1, toy2) => {
    const [property, type] = sortBy.split('-') as SortParams; // fixed
    const properties = {
      toy1: toy1[property],
      toy2: toy2[property]
    };
    if (properties.toy1 > properties.toy2) {
      return type === 'asc' ? 1 : -1;
    } else if (properties.toy1 < properties.toy2) {
      return type === 'asc' ? -1 : 1;
    }
    return 0;
  });
  const pages = [];
  while (toys.length) {
    pages.push(toys.splice(0, 30));
  }
  return pages;
};

export default sortToys;

Playground