useのインタフェース見る

export function use<T>(usable: Usable<T>): T;

export type Usable<T> = PromiseLike<T> | Context<T>;

interface PromiseLike<T> {
    /**
     * Attaches callbacks for the resolution and/or rejection of the Promise.
     * @param onfulfilled The callback to execute when the Promise is resolved.
     * @param onrejected The callback to execute when the Promise is rejected.
     * @returns A Promise for the completion of which ever callback is executed.
     */
    then<TResult1 = T, TResult2 = never>(onfulfilled?: ((value: T) => TResult1 | PromiseLike<TResult1>) | undefined | null, onrejected?: ((reason: any) => TResult2 | PromiseLike<TResult2>) | undefined | null): PromiseLike<TResult1 | TResult2>;
}

interface Context<T> extends Provider<T> {
  Provider: Provider<T>;
  Consumer: Consumer<T>;
  /**
   * Used in debugging messages. You might want to set it
   * explicitly if you want to display a different name for
   * debugging purposes.
   *
   * @see {@link https://legacy.reactjs.org/docs/react-component.html#displayname Legacy React Docs}
   */
  displayName?: string | undefined;
}

export type Usable<T> = PromiseLike<T> | Context<T>;

/**
 * Context lets components pass information deep down without explicitly
 * passing props.
 *
 * Created from {@link createContext}
 *
 * @see {@link https://react.dev/learn/passing-data-deeply-with-context React Docs}
 * @see {@link https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/context/ React TypeScript Cheatsheet}
 *
 * @example
 *
 * ```tsx
 * import { createContext } from 'react';
 *
 * const ThemeContext = createContext('light');
 * ```
 */
interface Context<T> extends Provider<T> {
    Provider: Provider<T>;
    Consumer: Consumer<T>;
    /**
     * Used in debugging messages. You might want to set it
     * explicitly if you want to display a different name for
     * debugging purposes.
     *
     * @see {@link https://legacy.reactjs.org/docs/react-component.html#displayname Legacy React Docs}
     */
    displayName?: string | undefined;
}

/**
 * Wraps your components to specify the value of this context for all components inside.
 *
 * @see {@link https://react.dev/reference/react/createContext#provider React Docs}
 *
 * @example
 *
 * ```tsx
 * import { createContext } from 'react';
 *
 * const ThemeContext = createContext('light');
 *
 * function App() {
 *   return (
 *     <ThemeContext.Provider value="dark">
 *       <Toolbar />
 *     </ThemeContext.Provider>
 *   );
 * }
 * ```
 */
type Provider<T> = ProviderExoticComponent<ProviderProps<T>>;

/**
 * Describes the props accepted by a Context {@link Provider}.
 *
 * @template T The type of the value the context provides.
 */
interface ProviderProps<T> {
    value: T;
    children?: ReactNode | undefined;
}

/**
 * An {@link ExoticComponent} with a `propTypes` property applied to it.
 *
 * @template P The props the component accepts.
 */
interface ProviderExoticComponent<P> extends ExoticComponent<P> {
}

/**
 * An object masquerading as a component. These are created by functions
 * like {@link forwardRef}, {@link memo}, and {@link createContext}.
 *
 * In order to make TypeScript work, we pretend that they are normal
 * components.
 *
 * But they are, in fact, not callable - instead, they are objects which
 * are treated specially by the renderer.
 *
 * @template P The props the component accepts.
 */
interface ExoticComponent<P = {}> {
    (props: P): ReactNode;
    readonly $$typeof: symbol;
}

/**
 * An object masquerading as a component. These are created by functions
 * like {@link forwardRef}, {@link memo}, and {@link createContext}.
 *
 * In order to make TypeScript work, we pretend that they are normal
 * components.
 *
 * But they are, in fact, not callable - instead, they are objects which
 * are treated specially by the renderer.

interface ExoticComponent<P = {}> {
    (props: P): ReactNode;
    readonly $$typeof: symbol;
}

type Provider<T> = ProviderExoticComponent<ProviderProps<T>>;

interface Context<T> extends Provider<T> {
    Provider: Provider<T>;
    Consumer: Consumer<T>;
    /**
     * Used in debugging messages. You might want to set it
     * explicitly if you want to display a different name for
     * debugging purposes.
     *
     * @see {@link https://legacy.reactjs.org/docs/react-component.html#displayname Legacy React Docs}
     */
    displayName?: string | undefined;
}

/**
 * The old way to read context, before {@link useContext} existed.
 *
 * @see {@link https://react.dev/reference/react/createContext#consumer React Docs}
 *
 * @example
 *
 * ```tsx
 * import { UserContext } from './user-context';
 *
 * function Avatar() {
 *   return (
 *     <UserContext.Consumer>
 *       {user => <img src={user.profileImage} alt={user.name} />}
 *     </UserContext.Consumer>
 *   );
 * }
 * ```
 */
type Consumer<T> = ExoticComponent<ConsumerProps<T>>;

/**
 * Describes the props accepted by a Context {@link Consumer}.
 *
 * @template T The type of the value the context provides.
 */
interface ConsumerProps<T> {
    children: (value: T) => ReactNode;
}