Generate Typescript definitions from Directus

If you're working with Directus CMS, you're likely aware of its power. But, if you're not using Typescript with Directus, you may be missing out on some significant benefits.

Generate Typescript definitions from Directus

Why use Typescript with Directus?

Using Typescript with Directus has non-negligible benefits:

Improved type safety

If you're not familiar with Typescript, one of the main benefits of using it with Directus is improved type safety. By adding type annotations to your code, you can catch errors early in the development process, before they make it into production. This can save you time and money by reducing the number of bugs that make it into your final product.

Better code organization

Typescript allows you to use interfaces and enums to organize your code in a more structured way. This can make your code more readable and maintainable, especially as your project grows in size and complexity.

Better DX & integration with the Directus SDK

If you're using the Directus SDK to interact with the Directus APIs, using Typescript can make this process easier with more detailed IDE suggestions for return types, sorting, filtering, etc. The Directus SDK allows you to feed it with custom type information by passing it on the constructor.

How to use Typescript with Directus

Let's go straight to the point. To use Typescript with Directus, you'll need to set up a Typescript project and install the Directus SDK . Once you've done that, you can start using the SDK with Typescript.

Here's an example:

import { Directus } from "@directus/sdk";

type Product = {
  id: number;
  name: string;
  price: number;
};

type Collections = {
  product: Product;
};

export const directus = new Directus<Collections>(
  process.env.API_URL as string
);

And now, you can leverage Typescript's goodness to code easier and faster thanks:

Directus Typescript Autocompletion

Obviously, you won't type manually all your Typescript definitions. Let's see how to generate all your definitions directly from Directus in a single command line.

Generate Typescript definitions from Directus

Using directus-typescript-gen

Thankfully, Directus allows you to retrieve the OpenAPI specification for your project. OpenAPI, in short, is an open-source specification for designing, building, and documenting RESTful APIs. To give an example, this specification is used by the famous Swagger tool.

There is already a package called openapi-typescript that allows you to convert OpenAPI schemas to Typescript. But, unless you really want to do it by yourself for any reason, there is another guy who did the job for us and created directus-typescript-gen. You just need to pass your instance URL, the admin user's credentials (email & password), a type name and an output filename to generate a Typescript definition file based on your Directus instance.

Check the example:

npx directus-typescript-gen --host http://localhost:8055 --email ADMIN_EMAIL --password ADMIN_PASSWORD --typeName ApiCollections --outFile api-collection.d.ts

Put the file in your project directory. You can pass the definitions to the Directus SDK constructor:

import { ApiCollections } from "../@types/api";

export const directus = new Directus<ApiCollections>(process.env.API_URL as string)

Using Drizzle ORM

Drizzle ORM is a TypeScript Object Relational Mapping (ORM) solution. It offers a bunch of cool features, including pulling your database tables and turning them into Typescript definitions.

If you wish to go that road, I suggest you to read Felix Vemmer's article about how to use Directus with Drizzle ORM

If you're struggling with your Directus instance, get in touch for assistance.