docs: typescript

docs/typescript/generating-types.mdx

@@ -0,0 +1,114 @@
+---
+title: Generating TypeScript Interfaces
+label: Generating Types
+order: 20
+desc: Generate your own TypeScript interfaces based on your collections and globals.
+keywords: headless cms, typescript, documentation, Content Management System, cms, headless, javascript, node, react, express
+---
+
+While building your own custom functionality into Payload, like plugins, hooks, access control functions, custom routes, GraphQL queries / mutations, or anything else, you may benefit from generating your own TypeScript types dynamically from your Payload config itself.
+
+Run the following command in a Payload project to generate types:
+
+```
+payload generate:types
+```
+
+You can run this command whenever you need to regenerate your types, and then you can use these types in your Payload code directly.
+
+For example, let's look at the following simple Payload config:
+
+```ts
+const config: Config = {
+  serverURL: process.env.PAYLOAD_PUBLIC_SERVER_URL,
+  admin: {
+    user: 'users',
+  }
+  collections: [
+    {
+      slug: 'users',
+      fields: [
+        {
+          name: 'name',
+          type: 'text',
+          required: true,
+        }
+      ]
+    },
+    {
+      slug: 'posts',
+      admin: {
+        useAsTitle: 'title',
+      },
+      fields: [
+        {
+          name: 'title',
+          type: 'text',
+        },
+        {
+          name: 'author',
+          type: 'relationship',
+          relationTo: 'users',
+        },
+      ]
+    }
+  ]
+}
+```
+
+By generating types, we'll end up with a file containing the following two TypeScript interfaces:
+
+```ts
+export interface User {
+  id: string;
+  name: string;
+  email?: string;
+  resetPasswordToken?: string;
+  resetPasswordExpiration?: string;
+  loginAttempts?: number;
+  lockUntil?: string;
+}
+
+export interface Post {
+  id: string;
+  title?: string;
+  author?: string | User;
+}
+
+```
+
+#### Customizing the output path of your generated types
+
+You can specify where you want your types to be generated by adding a property to your Payload config:
+
+```
+{
+  // the remainder of your config
+	typescript: {
+		outputFile: path.resolve(__dirname, './generated-types.ts'),
+	},
+}
+```
+
+The above example places your types next to your Payload config itself as the file `generated-types.ts`. By default, the file will be output to your current working directory as `payload-types.ts`.
+
+#### Adding an NPM script
+
+<Banner type="warning">
+  <strong>Important:</strong><br/>
+  Payload needs to be able to find your config to generate your types.
+</Banner>
+
+Payload will automatically try and locate your config, but might not always be able to find it. For example, if you are working in a `/src` directory or similar, you need to tell Payload where to find your config manually by using an environment variable. If this applies to you, you can create an NPM script to make generating your types easier.
+
+To add an NPM script to generate your types and show Payload where to find your config, open your `package.json` and update the `scripts` property to the following:
+
+```
+{
+  "scripts": {
+    "generate:types": "PAYLOAD_CONFIG_PATH=src/payload.config.ts payload generate:types",
+  },
+}
+```
+
+Now you can run `yarn generate:types` to easily generate your types.