Sharing Types Between Frontend and Backend

This article is dedicated for projects which use TypeScript for the frontend and the backend.

The definition of a workflow can be very complex. It can contain a lot of types. So to keep the code clean, you can extract all workflow types to a separate package. We recommend to use the NPM workspaces or the Yarn workspaces to work with multiple packages. By this you can share the types between the frontend and the backend and avoid data inconsistencies.

@myapp/model - shared package

@myapp/frontend - frontend package
|_ dependencies:
   |_ @myapp/model
   |_ ...

@myapp/backend - backend package
|_ dependencies:
   |_ @myapp/model
   |_ ...

Now we can create our common types in the @myapp/model package. This package should have the sequential-workflow-model dependency. This dependency is internally used by the sequential-workflow-designer package.

// @myapp/model

import { Definition, Step, BranchedStep } from 'sequential-workflow-model';

interface MyDefinition extends Definition {
  properties: {
    baseUrl: string;
  };
}

interface SendEmailStep extends Step {
  componentType: 'task';
  type: 'sendEmail';
  properties: {
    to: string;
    subject: string;
    body: string;
  };
}

interface IfStep extends BranchedStep {
  componentType: 'switch';
  type: 'if';
  properties: {
    condition: string;
  };
}

Now we can use these types in the frontend and the backend.

// @myapp/frontend or @myapp/backend

import { MyDefinition, SendEmailStep, IfStep } from '@myapp/model';