|
1 | 1 | # Prisma Client Types Generator |
2 | 2 |
|
3 | | -Docs coming soon... |
| 3 | +A tool to generate TypeScript types from your Prisma schema, can be safely imported on the browser. |
| 4 | + |
| 5 | +## what does it do |
| 6 | + |
| 7 | +This package generates TypeScript types from your Prisma schema file that can be safely used in browser environments. Unlike the types generated by Prisma Client, these types: |
| 8 | + |
| 9 | +- Are pure TypeScript types with no runtime dependencies |
| 10 | +- Can be imported directly in browser code without bundling issues |
| 11 | +- Don't include any Prisma-specific runtime code or decorators |
| 12 | +- Only include the type information needed for type checking and IDE support |
| 13 | + |
| 14 | +This is particularly useful when you want to share types between your backend and frontend code without bringing in the full Prisma Client library to the browser. |
| 15 | + |
| 16 | +For example, if you have a Prisma model it will generate: |
| 17 | + |
| 18 | +- ModelValues => the scalars |
| 19 | +- ModelKeys => the unique keys |
| 20 | +- Model => keys and values, as they are represented in the database |
| 21 | +- ModelExtended => the model with all the relations |
| 22 | + |
| 23 | +## Usage Examples |
| 24 | + |
| 25 | +### 1. Basic Setup |
| 26 | + |
| 27 | +First, add the generator to your `schema.prisma`: |
| 28 | + |
| 29 | +```prisma |
| 30 | +generator types { |
| 31 | + provider = "prisma-client-types-generator" |
| 32 | + output = "./generated/types.ts" |
| 33 | +} |
| 34 | +``` |
| 35 | + |
| 36 | +### 2. Example Prisma Schema |
| 37 | + |
| 38 | +```prisma |
| 39 | +model User { |
| 40 | + id Int @id @default(autoincrement()) |
| 41 | + email String @unique |
| 42 | + name String? |
| 43 | + posts Post[] |
| 44 | + createdAt DateTime @default(now()) |
| 45 | +} |
| 46 | +
|
| 47 | +model Post { |
| 48 | + id Int @id @default(autoincrement()) |
| 49 | + title String |
| 50 | + content String? |
| 51 | + author User @relation(fields: [authorId], references: [id]) |
| 52 | + authorId Int |
| 53 | + createdAt DateTime @default(now()) |
| 54 | +} |
| 55 | +``` |
| 56 | + |
| 57 | +### 3. Generated Types Usage |
| 58 | + |
| 59 | +After running `prisma generate`, you can use the generated types in your frontend code: |
| 60 | + |
| 61 | +```typescript |
| 62 | +import type { User, UserExtended, Post, PostExtended } from "./generated/types"; |
| 63 | + |
| 64 | +// Basic type usage |
| 65 | +const user: User = { |
| 66 | + id: 1, |
| 67 | + |
| 68 | + name: "John Doe", |
| 69 | + createdAt: new Date(), |
| 70 | +}; |
| 71 | + |
| 72 | +// Using extended types with relations |
| 73 | +const postWithAuthor: PostExtended = { |
| 74 | + id: 1, |
| 75 | + title: "My First Post", |
| 76 | + content: "Hello World!", |
| 77 | + authorId: 1, |
| 78 | + createdAt: new Date(), |
| 79 | + author: { |
| 80 | + id: 1, |
| 81 | + |
| 82 | + name: "John Doe", |
| 83 | + createdAt: new Date(), |
| 84 | + }, |
| 85 | +}; |
| 86 | + |
| 87 | +// Type-safe API responses |
| 88 | +async function fetchUser(id: number): Promise<UserExtended> { |
| 89 | + const response = await fetch(`/api/users/${id}`); |
| 90 | + return response.json(); |
| 91 | +} |
| 92 | +``` |
| 93 | + |
| 94 | +### 4. Configuration Options |
| 95 | + |
| 96 | +You can customize the generator output using configuration options in your `schema.prisma`: |
| 97 | + |
| 98 | +```prisma |
| 99 | +generator types { |
| 100 | + provider = "prisma-client-types-generator" |
| 101 | + output = "./generated/types.ts" |
| 102 | + config = { |
| 103 | + pascalCase = true |
| 104 | + aliases = "./prisma/aliases.ts" |
| 105 | + } |
| 106 | +} |
| 107 | +``` |
| 108 | + |
| 109 | +Then create a file `prisma/aliases.ts` with your type aliases: |
| 110 | + |
| 111 | +```typescript |
| 112 | +// prisma/aliases.ts |
| 113 | +// CommonJS style (recommended for compatibility with require) |
| 114 | +module.exports = { |
| 115 | + outdated_legacy_table: "NewModelName", |
| 116 | + outdated_legacy_enum: "NewEnumName", |
| 117 | +}; |
| 118 | + |
| 119 | +// Or ESM style (if you're using ESM modules) |
| 120 | +export default { |
| 121 | + outdated_legacy_table: "NewModelName", |
| 122 | + outdated_legacy_enum: "NewEnumName", |
| 123 | +}; |
| 124 | +``` |
| 125 | + |
| 126 | +The aliases file should export a default object where: |
| 127 | + |
| 128 | +- Keys are the model names from your Prisma schema |
| 129 | +- Values are the desired type names in the generated output |
| 130 | + |
| 131 | +### 5. Type Safety in API Routes |
| 132 | + |
| 133 | +```typescript |
| 134 | +import type { User, Post } from "./generated/types"; |
| 135 | + |
| 136 | +// Type-safe API route handler |
| 137 | +export async function createPost( |
| 138 | + data: Omit<Post, "id" | "createdAt"> |
| 139 | +): Promise<Post> { |
| 140 | + // Your API logic here |
| 141 | + return { |
| 142 | + id: 1, |
| 143 | + ...data, |
| 144 | + createdAt: new Date(), |
| 145 | + }; |
| 146 | +} |
| 147 | +``` |
| 148 | + |
| 149 | +These types can be safely used in both frontend and backend code, providing type safety without bringing in the full Prisma Client runtime. |
0 commit comments