React Context与TypeScript创建报错求助：排查代码问题

核心问题 #

你遇到的所有报错都是文件扩展名不匹配导致的连锁反应：你在.ts文件中编写了JSX语法（<NavBarContext.Provider>这类标签），但TypeScript默认仅在.tsx扩展名的文件中解析JSX，编译器无法识别JSX的<>语法，进而将其误判为正则表达式或比较运算符，引发一堆语法错误。

修复步骤 #

1. 修改文件扩展名
   将NavBarContext.ts重命名为NavBarContext.tsx，让TypeScript正确识别JSX语法。

2. （可选）完善Context类型定义
   原代码中createContext(null)未指定类型，后续使用Context时可能会缺失类型提示，建议补充类型定义优化代码：

   import React, { createContext, ReactNode } from 'react'
   import { linkData } from '../data'
   
   // 定义Context值的类型
   type NavBarContextValue = {
     linkData: typeof linkData
   }
   
   // 指定Context类型并提供合理默认值
   export const NavBarContext = createContext<NavBarContextValue | null>(null)
   
   export const NavBarProvider = ({ children }: { children: ReactNode }) => {
     return (
       <NavBarContext.Provider value={{ linkData }}>
         {children}
       </NavBarContext.Provider>
     )
   }
   

报错原因解释 #

• "Unterminated regular expression literal."、"Operator '<' cannot be applied to types 'boolean' and 'RegExp'."：编译器把JSX的<符号误判为正则表达式的起始或比较运算符，引发语法解析错误。
• "Cannot find namespace 'NavBarContext'."、"'>' expected."等：属于语法解析错误导致的连锁报错，并非变量或逻辑本身存在问题，修复扩展名后这些错误会自动消失。

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