TS 踩坑笔记: 箭头函数添加泛型报错(Error: JSX element ‘T’ has no corresponding closing tag.ts(17008))

发布时间 2023-10-18 18:10:30作者: HuangBingQuan

前言

今天给大家分享一个在 React 项目中使用 TypeScript 遇到的错误

项目背景

React + TS 的项目配置,项目中关于 React 组件的使用 .tsx 后缀,其他单纯的文件使用 .ts 后缀

问题描述

在 React 组件附近定义泛型的箭头函数时产生 TS 报错警告,原本以为是语法写错了

但是实际上在 .ts 文件中是正常解析的,也就是说并不是语法问题

解决方案:加逗号

最后发现其实是因为泛型的语法与 JSX 的语法冲突,导致 TS 解析成 JSX 而产生 unexpected token 的问题

其实解决方案很简单

  • 一种是就不要写在 .tsx 文件里面就不会报错
  • 推荐)第二种就是在后面加一个逗号就能正确解析了