ts-backend-check 1.4.1

Check TypeScript interfaces against backend models

Contents

• About ts-backend-check
• Installation
  • Users
  • Development Build
• How It Works
  • Commands
  • Example Outputs
• Configuration
  • YAML File
  • pre-commit
  • GitHub Action
• Contributing
  • Contact the Team
  • Contributors

About ts-backend-check

[!IMPORTANT] Before you contribute, read the contributing guide.

ts-backend-check (tsbc) is a Python package for checking TypeScript types against their corresponding backend models to assure that all fields have been accounted for.

Developed by the activist community, this package helps keep frontend and backend development teams in sync.

The package supports Django-based backends.

Installation

Users

You can install ts-backend-check using uv (recommended) or pip.

uv

(Recommended - fast, Rust-based installer)

uv pip install ts-backend-check

pip

pip install ts-backend-check

Development Build

You can install the latest development build using uv, pip, or by cloning the repository.

Clone the Repository (Development Build)

git clone https://github.com/activist-org/ts-backend-check.git  # or ideally your fork
cd ts-backend-check

uv (Development Build)

uv sync --all-extras  # install all dependencies
source .venv/bin/activate  # activate venv (macOS/Linux)
# .venv\Scripts\activate  # activate venv (Windows)

pip (Development Build)

python -m venv .venv  # create virtual environment
source .venv/bin/activate  # activate venv (macOS/Linux)
# .venv\Scripts\activate  # activate venv (Windows)
pip install -e .

_{Back to top.}

How It Works

Commands

These are some example commands:

Show Help and Available Commands

# You can use either ts-backend-check or tsbc to access the CLI.
# ts-backend-check --help
tsbc --help

Generate a Configuration File

# ts-backend-check -gcf
tsbc -gcf

Generate a Test Project

# ts-backend-check -gtp
tsbc -gtp

Check a TypeScript Type Against a Backend Model

# ts-backend-check -m <model-identifier-from-config-file>
tsbc -m <model-identifier-from-config-file>

Run All Models

# ts-backend-check -a
tsbc -a

Example Outputs

These are some example outputs for passed and failed checks.

Passed Check

ts-backend-check -m valid_model
✅ Success: All backend models are synced with their corresponding TypeScript interfaces for the provided 'valid_model' files.

Failed Check

ts-backend-check -m invalid_model

❌ ts-backend-check error: There are inconsistencies between the provided 'invalid_model' backend models and TypeScript interfaces. Please see the output below for
details.

Field 'description' (camelCase: 'description') from model 'EventModel' is missing in the TypeScript interfaces.
Expected to find this field in the frontend interfaces: Event, EventExtended
To ignore this field, add the following comment to the TypeScript file (in order based on the model fields): '// ts-backend-check: ignore description'

Field 'participants' (camelCase: 'participants') from model 'EventModel' doesn't match the TypeScript interfaces based on blank to optional agreement.
Please check 'src/ts_backend_check/test_project/backend/models.py' and 'src/ts_backend_check/test_project/frontend/invalid_interfaces.ts' to make sure that all
'blank=True' fields are optional (?) in the TypeScript interfaces file.

No matching TypeScript interface found for the model 'UserModel'.
Please name your TypeScript interfaces the same as the corresponding backend models.
You can also use the 'backend_to_ts_model_name_conversions' option within the configuration file.
The key is the backend model name and the value is a list of the corresponding interfaces.
This option is also how you can break larger backend models into multiple interfaces that extend one another.

Please fix the 3 errors above to continue the sync of the backend models of src/ts_backend_check/test_project/backend/models.py and the TypeScript interfaces of
src/ts_backend_check/test_project/frontend/invalid_interfaces.ts.

_{Back to top.}

Configuration

YAML File

You can configure ts-backend-check using the .ts-backend.check.yaml (or .yml) configuration file.

For an example, see the configuration file for this repository that we use in testing.

This example describes the structure of an entry in this file:

model_identifier: # an identifier you define that you want to pass to the CLI
  backend_model_path: path/to/a/models.py
  ts_interface_path: path/to/the/corresponding/model_interfaces.ts
  check_blank_model_fields: true # whether to assert that fields that can be blank must also be optional
  backend_to_ts_model_name_conversions: # used if the frontend name is not the backend name
    BackendModel:
      - Interface
      - InterfaceExtended

pre-commit

This is an exaple of a prek or pre-commit hook:

- repo: local
  hooks:
    - id: run-ts-backend-check
      name: run ts-backend-check key-value checks
      files: ^src-dir/
      entry: ts-backend-check -a
      language: python
      pass_filenames: false
      additional_dependencies:
        - ts-backend-check

GitHub Action

This is an example YAML file for a GitHub Action to check your backend models and TypeScript interface files on pull requests and commits:

name: pr_ci_ts_backend_check
on:
  workflow_dispatch:
  pull_request:
    branches:
      - main
    types:
      - opened
      - reopened
      - synchronize
  push:
    branches:
      - main

jobs:
  ts_backend_check:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Project
        uses: actions/checkout@v4

      - name: Setup Python
        uses: actions/setup-python@v5
        with:
          python-version: "3.12"

      - name: Install uv
        uses: astral-sh/setup-uv@v7

      - name: Install Dependencies
        run: uv sync --frozen --all-extras

      - name: Execute All ts-backend-check Key-Value Checks
        run: |
          uv run ts-backend-check -a

_{Back to top.}

Contributing

See the contribution guidelines before contributing. You can help by:

• 🐞 Reporting bugs.
• ✨ Working with us on new features.
• 📝 Improving the documentation.

We track work that is in progress or may be implemented in the the issues and projects.

Contact the Team

activist uses Matrix for team communication. Join us in our public chat rooms to share ideas, ask questions or just say hi to the team.

We recommend using the Element client and Element X for a mobile app.

Contributors

Thanks to all our amazing contributors! ❤️

_{Back to top.}