docs(adapter): mention new types (#1916)

Containts the following squashed commits:

* docs(adapters): mention new types
* docs(adapters): rename interface on example
* docs(adapters): move section above
* docs(adapters): fix casing
* docs(adapters): fix example import
* fix(www): Typescript -> TypeScript

Author: 0ubbe

www/docs/getting-started/typescript.md

@@ -14,6 +14,43 @@ The types at [DefinitelyTyped](https://github.com/DefinitelyTyped/DefinitelyType
 
 ---
 
+## Adapters
+
+If you're writing your own custom Adapter, you can take advantage of the types to make sure your implementation conforms to what's expected:
+
+```ts
+import type { Adapter } from "next-auth/adapters"
+
+const MyAdapter: Adapter = () => {
+  return {
+    async getAdapter() {
+      return {
+        // your adapter methods here
+      }
+    },
+  }
+}
+```
+
+When writing your own custom Adapter in plain JavaScript, note that you can use **JSDoc** to get helpful editor hints and auto-completion like so:
+
+```js
+/** @type { import("next-auth/adapters").Adapter } */
+const MyAdapter = () => {
+  return {
+    async getAdapter() {
+      return {
+        // your adapter methods here
+      }
+    },
+  }
+}
+```
+
+:::note
+This will work in code editors with a strong TypeScript integration like VSCode or WebStorm. It might not work if you're using more lightweight editors like VIM or Atom.
+:::
+
 ## Module Augmentation
 
 `next-auth` comes with certain types/interfaces, that are shared across submodules. Good examples are `Session` and `JWT`. Ideally, you should only need to create these types at a single place, and TS should pick them up in every location where they are referenced. Luckily, this is exactly what Module Augmentation can do for us. Define your shared interfaces in a single location, and get type-safety across your application, when you use `next-auth` (or one of its submodules).

www/docs/schemas/adapters.md

@@ -5,21 +5,21 @@ title: Database Adapters
 
 An **Adapter** in NextAuth.js connects your application to whatever database or backend system you want to use to store data for user accounts, sessions, etc.
 
-You do not need to specify an adapter explicitly unless you want to use advanced options such as custom models or schemas, if you want to use the Prisma adapter instead of the default TypeORM adapter, or if you are creating a custom adapter to connect to a database that is not one of the supported databases.
+You do not need to specify an Adapter explicitly unless you want to use advanced options such as custom models or schemas, if you want to use the Prisma Adapter instead of the default TypeORM Adapter, or if you are creating a custom Adapter to connect to a database that is not one of the supported databases.
 
 ### Database Schemas
 
 Configure your database by creating the tables and columns to match the schema expected by NextAuth.js.
 
-* [MySQL Schema](/schemas/mysql)
-* [Postgres Schema](/schemas/postgres)
-* [Microsoft SQL Server Schema](/schemas/mssql)
+- [MySQL Schema](/schemas/mysql)
+- [Postgres Schema](/schemas/postgres)
+- [Microsoft SQL Server Schema](/schemas/mssql)
 
 ## TypeORM Adapter
 
-NextAuth.js comes with a default adapter that uses [TypeORM](https://typeorm.io/) so that it can be used with many different databases without any further configuration, you simply add the node module for the database driver you want to use to your project and pass a database connection string to NextAuth.js.
+NextAuth.js comes with a default Adapter that uses [TypeORM](https://typeorm.io/) so that it can be used with many different databases without any further configuration, you simply add the node module for the database driver you want to use to your project and pass a database connection string to NextAuth.js.
 
-The default adapter is the TypeORM adapter, the following configuration options are exactly equivalent.
+The default Adapter is the TypeORM Adapter, the following configuration options are exactly equivalent.
 
 ```javascript
 database: {
@@ -31,21 +31,21 @@ database: {
 
 ```javascript
 adapter: Adapters.Default({
-  type: 'sqlite',
-  database: ':memory:',
-  synchronize: true
+  type: "sqlite",
+  database: ":memory:",
+  synchronize: true,
 })
 ```
 
 ```javascript
 adapter: Adapters.TypeORM.Adapter({
-  type: 'sqlite',
-  database: ':memory:',
-  synchronize: true
+  type: "sqlite",
+  database: ":memory:",
+  synchronize: true,
 })
 ```
 
-The tutorial [Custom models with TypeORM](/tutorials/typeorm-custom-models) explains how to extend the built in models and schemas used by the TypeORM adapter. You can use these models in your own code.
+The tutorial [Custom models with TypeORM](/tutorials/typeorm-custom-models) explains how to extend the built in models and schemas used by the TypeORM Adapter. You can use these models in your own code.
 
 :::tip
 The `synchronize` option in TypeORM will generate SQL that exactly matches the documented schemas for MySQL and Postgres.
@@ -55,31 +55,31 @@ However, it should not be enabled against production databases as it may cause d
 
 ## Prisma Adapter
 
-You can also use NextAuth.js with the experimental adapter for [Prisma 2](https://www.prisma.io/docs/).
+You can also use NextAuth.js with the experimental Adapter for [Prisma 2](https://www.prisma.io/docs/).
 
-To use this adapter, you need to install Prisma Client and Prisma CLI:
+To use this Adapter, you need to install Prisma Client and Prisma CLI:
 
 ```
 npm install @prisma/client
 npm install prisma --save-dev
 ```
 
-Configure your NextAuth.js to use the Prisma adapter:
+Configure your NextAuth.js to use the Prisma Adapter:
 
 ```javascript title="pages/api/auth/[...nextauth].js"
-import NextAuth from 'next-auth'
-import Providers from 'next-auth/providers'
-import Adapters from 'next-auth/adapters'
-import { PrismaClient } from '@prisma/client'
+import NextAuth from "next-auth"
+import Providers from "next-auth/providers"
+import Adapters from "next-auth/adapters"
+import { PrismaClient } from "@prisma/client"
 
 const prisma = new PrismaClient()
 
 export default NextAuth({
   providers: [
     Providers.Google({
       clientId: process.env.GOOGLE_CLIENT_ID,
-      clientSecret: process.env.GOOGLE_CLIENT_SECRET
-    })
+      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
+    }),
   ],
   adapter: Adapters.Prisma.Adapter({ prisma }),
 })
@@ -175,6 +175,7 @@ datasource db {
   url      = env("DATABASE_URL")
 }
 ```
+
 :::
 
 ### Generate Client
@@ -232,9 +233,30 @@ if (process.env.NODE_ENV === "production") {
   prisma = global.prisma
 }
 ```
-:::
 
+:::
 
 ## Custom Adapter
 
- See the tutorial for [creating a database adapter](/tutorials/creating-a-database-adapter) for more information on how to create a custom adapter. Have a look at the [adapters repository](https://github.com/nextauthjs/adapters) to see community maintained custom adapters or add your own. 
+See the tutorial for [creating a database Adapter](/tutorials/creating-a-database-adapter) for more information on how to create a custom Adapter. Have a look at the [Adapter repository](https://github.com/nextauthjs/adapters) to see community maintained custom Adapter or add your own.
+
+### Editor integration
+
+When writing your own custom Adapter in plain JavaScript, note that you can use **JSDoc** to get helpful editor hints and auto-completion like so:
+
+```js
+/** @type { import("next-auth/adapters").Adapter } */
+const MyAdapter = () => {
+  return {
+    async getAdapter() {
+      return {
+        // your adapter methods here
+      }
+    },
+  }
+}
+```
+
+:::note
+This will work in code editors with a strong TypeScript integration like VSCode or WebStorm. It might not work if you're using more lightweight editors like VIM or Atom.
+:::