Vue组件用尖括号类型转换报Parsing error: Identifier expected如何解决

错误原因 #

你遇到的报错是TSX语法场景下的固有冲突导致的：
尖括号样式的类型断言是TypeScript早期的标准断言语法，但是当项目启用TSX语法支持（也就是文件后缀为.tsx、或者配置了支持JSX解析）时，解析器会优先把所有尖括号内容识别为JSX组件标签，和类型断言的语法规则冲突，就会抛出Parsing error: Identifier expected的解析错误。
而as关键字风格的类型断言是TypeScript后续专门为兼容TSX场景推出的断言语法，不存在和JSX标签的冲突问题，所以你的第一种写法可以正常运行。

尖括号断言的可用方案 #

如果你确实要使用第二种尖括号类型断言写法，可以选择以下两种方案之一：

• 如果你当前的Vue组件没有用到任何JSX写法，可以把组件文件的后缀从.tsx改为.ts，关闭该文件的JSX解析规则，尖括号类型断言就可以正常生效。
• 如果你必须保留.tsx后缀，你可以用括号包裹断言语句，规避解析器的识别冲突：

data: () => ({
  articles: (<GetLatestNewsArticlesModel[]>[])
}),

不过从语法兼容性和可读性角度考虑，更推荐你统一使用as风格的类型断言，不需要额外调整配置也不存在兼容问题。

内容的提问来源于stack exchange，提问作者tkit