Custom code regions in TypeScript

To enable custom code regions for TypeScript SDKs, update the project’s .speakeasy/gen.yaml file like so:

.speakeasy/gen.yaml
configVersion: 2.0.0

generation:

  # ...

typescript:

  # ...

+ enableCustomCodeRegions: true

Full example

The Speakeasy examples repository has a full example (opens in a new tab) of a TypeScript SDK 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 - allows the addition of imports to an SDK file needed for custom methods and properties. This region must be located at the top of the file alongside generated imports.
  • // #region sdk-class-body - allows the addition of custom methods and properties to an SDK class. This region 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, you’ll need to configure these dependencies in your .speakeasy/gen.yaml file to prevent them from being removed during SDK regeneration. Use the additionalDependencies configuration to specify your package dependencies:

.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 your dependencies persist across SDK regenerations and are properly included in the generated package.json.

src/sdk/todos.ts
/*

 * Code generated by Speakeasy (https://speakeasy.com). DO NOT EDIT.

 */



import { todosGetOne } from "../funcs/todosGetOne.js";

import { ClientSDK, RequestOptions } from "../lib/sdks.js";

import * as operations from "../models/operations/index.js";

import { unwrapAsync } from "../types/fp.js";



// #region imports

import DOMPurify from 'dompurify';

import marked from "marked";

import type { Todo } from "../models/components/todo.js"; 

// #endregion imports



export class Todos extends ClientSDK {

  // #region sdk-class-body

  async renderTodo(id: string): Promise<string> {

    const todo = await this.getOne({ id });



    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));

  }

}