口头出版的here。

可能是这些技巧与T3堆栈无关，而是涉及其使用的堆栈

在我的上一个article中，我介绍了我正在构建的附带项目和我正在使用的工具（堆栈）。并解释为什么我选择T3 Stack来构建该项目。很好，在本文中，我将分享一些我在构建项目时使用T3堆栈发现的提示。让我们走！

提醒

• NextAuth需要/用于身份验证的模型用户，具有一些预配置列，例如名称，图像，电子邮件等。

• 在T3堆栈中，我们将Prisma用作ORM

• 我们已经为用户模型添加了一些列，例如用户名

NextAuth和模块扩展

NextAuth在Next.js应用程序中用于身份验证，并包装在T3堆栈中。使用NextAuth时，Hook useSession返回可以检查的会话数据以验证是否有人签名：

const index = () => {
    const { data: session } = useSession()
    if (session) {
        return <div>You're signed as {session.user.email}</div>    
    }
    return <div>Not signed, we'll redirect you</div>
}

但是出于安全原因，会话数据（默认为默认）仅包含

export interface DefaultSession {
    user?: {
        name?: string | null;
        email?: string | null;
        image?: string | null;
    };
    expires: ISODateString;
}

那么，如果我们想添加一个新属性（例如用户名），我们该怎么办，该属性是我们用Prisma定义的用户模型的一列？

T3专用于NextAuth和NextAuth itself的section已经记录了这一部分。为此，我们将使用TypeScript提供的模块扩展，该模块允许用户覆盖他/她无法访问的类型的类，模块，类型（也许来自LIB）。为此，

1. 我们可以在 next-auth模块中覆盖会话接口在文件中声明 types/next-auth.d.t.ts。
   

   import { DefaultSession } from "next-auth";
   
   declare module "next-auth" {
     interface Session {
       user?: {
         id: string;
         username: string | null  
       } & DefaultSession["user"];
     }
   }
   

   我们不仅添加username，还可以合并默认设备中的用户类型，从而导入next-auth模块并覆盖会话接口，因此我们仍然拥有NextAuth提供的用户的默认属性。

2. 然后在 /pages/api/auth/[... nextauth] .ts 文件中，我们可以通过添加username这样的
   
   来覆盖会话回调。

   callbacks: {
       session({ session, user }) {
         if (session.user) {
           session.user.id = user.id;
           session.user.username = user.username;
         }
         return session;
       },
     },
   

   但是，如果您这样留下，您将从ts：Property 'username' does not exist on type 'User | AdapterUser'获得此警告。为什么？

   因为，如果您转到User的TS定义（NextAuth使用），您会发现它扩展了具有以下定义（最小值）的DefaultUser
   

   export interface DefaultUser {
       id: string;
       name?: string | null;
       email?: string | null;
       image?: string | null;
   }
   

   因此，要解决此错误，我认为您猜该解决方案，是的：覆盖User的声明，就像我们在Session上所做的那样。

3. 因此，回到 types/next-auth.d.ts， 我们可以在Session接口之后覆盖User（insex auth ofer next-auth声明），如
   

     interface User extends DefaultUser{
       username: string | null
     }
   

   我们只是首先扩展了DefaultUser（由NextAuth提供），然后添加username。

让我们移到另一个提示。

型号类型扣除（使用TRPC）

使用Prisma，我们将表定义为 schema.prisma 文件中的模型，但是我们在TypeScript中无法直接访问其类型，因为它生成了类型的定义在 node_modules/.prisma/client/index.d.ts 默认情况下（如果要更改此输出文件位置，请阅读此link）。但是有一些方法可以获取这些类型：

import type { inferRouterInputs } from "@trpc/server"

type User = inferRouterInputs<AppRouter>['user']['retrieve']

import {RouterOutputs} from "@utils/api";
type User = RouterOutputs['project']['getById']

export type RouterOutputs = inferRouterOutputs<AppRouter>;

import {RouterOutputs} from "@utils/api";
type User = NonNullable<RouterOutputs['project']['getById']>