非TS环境下如何通过JSDoc让VS Code识别useContext的Provider类型？

可以通过JSDoc的类型推导实现需求，无需硬编码所有类型定义，具体步骤如下：

1. 推导Provider value的类型
   先写出要传入AuthContext.Provider的value对象，再用typeof自动推导它的类型并创建类型别名：

// 定义Provider要使用的value对象
const authProviderValue = {
  login: async (username, password) => {
    // 登录逻辑实现
  },
  logout: async () => {
    // 登出逻辑实现
  }
};

/** @typedef {typeof authProviderValue} AuthContextType */

2. 给AuthContext标注类型
   创建Context时，用@type指定它为React Context类型，泛型参数使用刚才推导的AuthContextType：

/** @type {import('react').Context<AuthContextType>} */
const AuthContext = React.createContext(null);

3. 子组件中识别useContext返回类型
   调用useContext后，用JSDoc标注变量类型为AuthContextType，VS Code就能自动识别出正确的返回类型：

function ChildComponent() {
  /** @type {AuthContextType} */
  const x = React.useContext(AuthContext);
  // 此时x会显示期望的类型：{ login: (username: any, password: any) => Promise<void>; logout: () => Promise<void> }
  return <div>{/* 组件内容 */}</div>;
}

原理说明 #

通过typeof authProviderValue自动推导value的完整类型，避免了手动硬编码所有属性和方法的类型；同时给Context标注关联类型后，VS Code能将Provider传入的value类型与Context绑定，最终在子组件中通过JSDoc指定类型，就能正确识别useContext的返回值类型。

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