React项目中TypeScript泛型报SyntaxError：缺少分号问题排查

我写了一段符合TypeScript语法的代码：

function f<T>() {}

type TEST<T> = typeof f<T>

这段代码在TypeScript Playground中可正常运行，但在React项目构建时抛出以下错误：

Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: index.tsx: Missing semicolon.

错误指向代码中的这个位置：

type TEST<T> = typeof f<T>
                       ^

请问这是什么原因导致的？是不是Babel的问题？我的预期是让TEST<T>类型对应任意T下的() => void。

原因分析 #

这确实是Babel处理TypeScript语法时的兼容性问题。旧版本的@babel/preset-typescript不支持在typeof后直接使用泛型调用（即typeof f<T>这种写法），它会把<T>误解析为JSX语法或者普通的小于号，从而触发语法错误。

TypeScript本身原生支持这种语法，但Babel的TypeScript预设在早期版本中对该语法的处理不完善，导致构建失败。

解决方法 #

• 升级Babel依赖：将@babel/core、@babel/preset-typescript以及babel-loader升级到最新稳定版本，新版本已经修复了该语法解析问题。
• 使用替代写法：如果暂时无法升级依赖，可以改用间接写法实现相同效果：

  function f<T>() {}
  
  type F = typeof f;
  type TEST<T> = F<T>;
  

  这种写法先获取f的泛型函数类型，再传入T进行实例化，同样能得到() => void的类型，同时可被旧版本Babel正确解析。

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