# Custom Code Regions in TypeScript

To enable custom code regions for TypeScript SDKs, update the project's
`.speakeasy/gen.yaml` file as follows:

```diff filename=".speakeasy/gen.yaml"
configVersion: 2.0.0
generation:
  # ...
typescript:
  # ...
+ enableCustomCodeRegions: true
```

## Full example

The Speakeasy examples repository includes a [full TypeScript SDK](https://github.com/speakeasy-api/examples/tree/main/customcode-sdkclasses-typescript) that uses custom code regions.

## Regions

Below are the available code regions in TypeScript SDKs.

### SDK classes

TypeScript SDK classes can have two code regions:

- `// #region imports`: The imports region allows you to add imports to an SDK file needed for
  custom methods and properties. It must be located at the top of the
  file alongside generated imports.
- `// #region sdk-class-body`: The class-body region allows you to add custom methods and
  properties to an SDK class. It must be located in the body of a TypeScript
  SDK class alongside generated methods and properties.

## Managing dependencies

When adding custom code that requires external packages, configure these dependencies in the `.speakeasy/gen.yaml` file to prevent them from being removed during SDK regeneration. Use the `additionalDependencies` configuration to specify package dependencies:

```yaml filename=".speakeasy/gen.yaml"
typescript:
  additionalDependencies:
    dependencies:
      marked: "^5.0.0"
      dompurify: "^3.0.0"
    devDependencies:
      "@types/dompurify": "^3.0.0"
    peerDependencies:
      react: "^18.0.0"
```

This ensures that dependencies persist across SDK regenerations and are properly included in the generated `package.json`.

```typescript filename="src/sdk/todos.ts"
/*
 * Code generated by Speakeasy (https://speakeasy.com). DO NOT EDIT.
 */

// #region imports

// #endregion imports

    const html = await marked.parse(`# ${todo.title}\n\n${todo.description}`, {
      async: true,
    });

    return DOMPurify.sanitize(html);
  }
  // #endregion sdk-class-body

  async getOne(
    request: operations.TodosGetOneRequest,
    options?: RequestOptions,
  ): Promise<operations.TodosGetOneResponse> {
    return await unwrapAsync(todosGetOne(this, request, options));
  }
}
```