在打字稿中构建 React usecontext 出现编译问题

Question

所以我正在尝试构建一个 useAuth 上下文，因此在用户登录到应用程序后，以后可以从任何组件访问 jwt 令牌我遇到了一个以前从未有过的奇怪的编译问题，请看截图：

明码如下：

    import { createContext, useContext, useReducer } from "react";
import authReducer, { initialTokenValue } from "../reducers/authReducer";

const AuthContext = createContext(initialTokenValue);

export const AuthProvider = ({ children }) => {
  const [state, dispatch] = useReducer(authReducer, initialTokenValue);

  const fetchNewTokenValue = (token: any) => {
    dispatch({
      type: "GET_AUTH_TOKEN",
      payload: token,
    })
  };

  const value = {
    token: state.token,
    fetchNewTokenValue,
  };


  //VS code complain AuthContext as: Cannot find namespace 'AuthContext'.ts(2503)
  //No quick fixes available
  //and Operator '<' cannot be applied to types 'boolean' and 'RegExp'.ts(2365)
  //Unterminated regular expression literal.ts(1161)
  //No quick fixes available
  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>
}

const useAuth = () => {
  const context = useContext(AuthContext);

  if (context === undefined)  {
    throw new Error("useAuth must be used within AuthContext");
  }

  return context;
}

export default useAuth;

在理论中，它应该可以工作，然后我可以使用如下：

但是正如您在第一个屏幕截图中看到的，我找不到摆脱红线的方法。由于错误，该应用程序不是运行。很奇怪.. 它应该有效，对吧？任何人都可以指出我的设置有什么问题吗？谢谢

Answer 1

当使用 JSX 时，你的文件名应该以 .tsx 而不是 .ts 结尾（html 在 js 中）

在打字稿中构建 React usecontext 出现编译问题

Building React usecontext in typescript got compile issue

reactjs

react-native

react-redux

react-context

react-hooks