跳至内容
从 NextAuth.js v4 迁移?阅读 我们的迁移指南.
入门TypeScript

TypeScript

Auth.js 致力于类型安全,因此它使用 TypeScript 编写,并保证 100% 的类型安全。它附带自己的类型定义,供您在项目中使用。

即使您不使用 TypeScript,像 VS Code 这样的 IDE 也会识别它,为您提供更好的开发体验。在您输入时,您将获得有关某些对象/函数外观的建议,有时还包括指向文档、示例和其他有价值资源的链接。

理念

我们选择 模块增强 而不是 泛型 作为在您的应用程序中跨 Auth.js 资源进行类型化的主要技术,以防您扩展它们。

为什么不使用 泛型

跨子模块共享的接口不会作为泛型传递给 Auth.js 库函数。

无论何时使用这些类型,函数始终期望返回这些格式。使用泛型,人们可以在一个地方覆盖类型,但不能在另一个地方覆盖类型,这会导致类型与实现不同步。

使用模块增强,您只需定义一次类型,并确保它们在需要的地方始终相同。

模块增强

Auth.js 库附带某些在子模块和不同的 Auth.js 库之间共享的接口(例如:next-auth@auth/prisma-adapter 将依赖于来自 @auth/core 的类型)。

此类接口的典型示例是 SessionUser。您可以使用 TypeScript 的 模块增强 来扩展这些类型,以便在整个 Auth.js 中添加您自己的属性,而无需在各处传递泛型。

让我们以扩展 Session 为例。

auth.ts
import NextAuth, { type DefaultSession } from "next-auth"
 
declare module "next-auth" {
  /**
   * Returned by `auth`, `useSession`, `getSession` and received as a prop on the `SessionProvider` React Context
   */
  interface Session {
    user: {
      /** The user's postal address. */
      address: string
      /**
       * By default, TypeScript merges new interface properties and overwrites existing ones.
       * In this case, the default session user properties will be overwritten,
       * with the new ones defined above. To keep the default session user properties,
       * you need to add them back into the newly declared interface.
       */
    } & DefaultSession["user"]
  }
}
 
export const { auth, handlers } = NextAuth({
  callbacks: {
    session({ session, token, user }) {
      // `session.user.address` is now a valid property, and will be type-checked
      // in places like `useSession().data.user` or `auth().user`
      return {
        ...session,
        user: {
          ...session.user,
          address: user.address,
        },
      }
    },
  },
})

模块增强不仅限于特定接口。您可以增强我们定义的任何 interface,以下是一些您可能需要根据用例覆盖的更常见接口。

types.d.ts
declare module "next-auth" {
  /**
   * The shape of the user object returned in the OAuth providers' `profile` callback,
   * or the second parameter of the `session` callback, when using a database.
   */
  interface User {}
  /**
   * The shape of the account object returned in the OAuth providers' `account` callback,
   * Usually contains information about the provider being used, like OAuth tokens (`access_token`, etc).
   */
  interface Account {}
 
  /**
   * Returned by `useSession`, `auth`, contains information about the active session.
   */
  interface Session {}
}
 
// The `JWT` interface can be found in the `next-auth/jwt` submodule
import { JWT } from "next-auth/jwt"
 
declare module "next-auth/jwt" {
  /** Returned by the `jwt` callback and `auth`, when using JWT sessions */
  interface JWT {
    /** OpenID ID Token */
    idToken?: string
  }
}

模块声明可以添加到项目 tsconfig.json“包含” 的任何文件中。

资源

  1. TypeScript 文档:模块增强
  2. DigitalOcean:TypeScript 中的模块增强
  3. 创建数据库适配器
Auth.js © Balázs Orbán 和团队 -2024