Next.js+TypeScript运行npm run dev报?可选属性Unexpected token错误如何解决

你使用的?{是Flow类型系统的可选属性语法，不符合TypeScript的语法规范，因此TS解析器识别到该符号时报错。TypeScript定义可选/可空属性的规则和Flow存在差异。

根据你的实际业务需求选择以下两种修改方式之一即可：

• 若ghostHighlight是可省略的可选属性（不传时默认值为undefined），将问号移动到属性名尾部：

type State<T_HT> = {
  ghostHighlight?: {
    position: T_ScaledPosition
  },
  isCollapsed: boolean,
}

• 若ghostHighlight必须传值，但允许值为null，将类型定义为联合类型：

type State<T_HT> = {
  ghostHighlight: {
    position: T_ScaledPosition
  } | null,
  isCollapsed: boolean,
}

修改完成后如果仍有报错，可按以下步骤排查：

• 确认项目根目录的tsconfig.json配置正确，compilerOptions.jsx配置项符合Next.js要求，通常设置为react-jsx即可
• 执行npx next clean清理Next.js本地缓存，再重新运行npm run dev

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