如何在 Next.js 中输入注释路由器实例？

Question

在我的 Next.js 项目中，我有一个密码重置请求表单。这是代码：

"use client";

import * as React from "react";
import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import * as z from "zod";

import { cn } from "@/lib/util";
import { forgotPasswordSchema } from "@/lib/validations/auth";
import { buttonVariants } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Icons } from "@/components/icons";
import { useRouter } from "next/navigation";
import { requestPasswordReset } from "@/lib/request-password-reset";

export type FormData = z.infer<typeof forgotPasswordSchema>;

export function RequestPasswordResetForm() {
  const {
    register,
    handleSubmit,
    reset,
    formState: { errors },
  } = useForm<FormData>({ resolver: zodResolver(forgotPasswordSchema) });

  const [isLoading, setIsLoading] = React.useState<boolean>(false);
  const [error, setError] = React.useState<string | null>(null);

  const router = useRouter();

  async function onSubmit(submittedData: FormData) {
    await requestPasswordReset({
      submittedData,
      setError,
      setIsLoading,
      reset,
      router,
    });
  }

  return (
    <div>
      {error && (
        <p className="mb-5 text-sm text-red-500 animate-in fade-in-0 slide-in-from-left-1">
          {error}
        </p>
      )}
      <form onSubmit={handleSubmit(onSubmit)}>
        <div className="grid gap-6">
          <div className="grid gap-1">
            <Label htmlFor="email">Email</Label>
            <Input
              id="email"
              type="email"
              placeholder="[email protected]"
              autoCapitalize="none"
              autoComplete="email"
              autoCorrect="off"
              disabled={isLoading}
              {...register("email")}
            />
            {errors.email && (
              <p className="px-1 text-xs text-red-600 animate-in fade-in-0 slide-in-from-left-1">
                {errors.email.message}
              </p>
            )}
          </div>
          <button className={cn(buttonVariants())} disabled={isLoading}>
            {isLoading && (
              <Icons.spinner className="mr-2 h-4 w-4 animate-spin" />
            )}
            Request password reset
          </button>
        </div>
      </form>
    </div>
  );
}

如您所见，在

onSubmit

处理程序中，我调用

requestPasswordReset()

函数。该函数将

router

作为其参数之一。

这是

requestPasswordReset()

函数的代码：

import type { FormData } from "@/components/request-password-reset-form";

const RESPONSE_MESSAGES = {
  USER_NOT_FOUND: "User not found",
  EMAIL_NOT_VERIFIED: "User not registered",
  PASSWORD_RESET_LINK_SENT: "Password reset link sent",
  REQUEST_PASSWORD_RESET_FAILURE:
    "Password reset request failed. Please try again.",
};

interface RequestPasswordResetProps {
  submittedData: FormData;
  setError: React.Dispatch<React.SetStateAction<string | null>>;
  reset: () => void;
  setIsLoading: React.Dispatch<React.SetStateAction<boolean>>;
  router: any;
}

export async function requestPasswordReset({
  submittedData,
  setError,
  reset,
  setIsLoading,
  router,
}: RequestPasswordResetProps) {
  setIsLoading(true);
  setError(null);

  try {
    // Attempt to reset the user password
    const resetResponse = await fetch("/api/request-password-reset", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(submittedData),
    });

    // Reset failed
    if (!resetResponse.ok) {
      throw new Error(RESPONSE_MESSAGES.PASSWORD_RESET_FAILURE);
    }

    const resetResponseData = await resetResponse.json();

    // Handle different server responses
    if (resetResponseData.message === RESPONSE_MESSAGES.USER_NOT_FOUND) {
      setError(RESPONSE_MESSAGES.USER_NOT_FOUND);
      reset();
      return;
    }

    if (resetResponseData.message === RESPONSE_MESSAGES.EMAIL_NOT_VERIFIED) {
      setError(RESPONSE_MESSAGES.EMAIL_NOT_VERIFIED);
      reset();
      return;
    }
  } catch (error) {
    setError((error as Error).message);
  } finally {
    setIsLoading(false);
  }
}

如您所见，在

RequestPasswordResetProps

内，我将

router

输入为

any

。但当然，我想正确地输入它。

您能让我知道如何键入注释

router

实例吗？

谢谢。

Answer 1

您可以将

router

输入为

NextRouter

，但我没有看到您使用该

router

争论，所以您不能删除它吗？

这里是我在 Nextjs 官方文档中找到该类型的地方，但我认为您也可以通过将鼠标悬停在它上面（可能带有一些扩展）从代码编辑器（如 VSCode）中找到它。