Skip to content

Turn your Netlify CMS collections into TypeScript types!

License

Notifications You must be signed in to change notification settings

jsaari97/netlify-ts

Repository files navigation

Netlify CMS Type Generator

Build Status Supported Node versions Code coverage Project license

Turn your Netlify CMS collections into TypeScript types!


This package generates a TypeScript schema of your Netlify CMS content collections to be consumed by frontend apps for better type support.

Features

  • Primitive types, e.g. string, number and boolean
  • Extract object widgets into own type interfaces
  • Single and nested lists
  • Multi-select and single option values
  • Optional fields
  • Unknown widgets resolve to any type
  • Relation fields

Installation

npm install -D netlify-ts

Usage

CLI

The main method of usage is through the command-line. Having installed the package either globally or in project's devDependencies, simply call netlify-ts with a parameter pointing to your Netlify CMS config.yml file.

npx netlify-ts path/to/config.yml

This generates a netlify-types.ts file in the project root containing types for your Netlify CMS collections.

Custom output location

You can also specify a custom output location by providing a second optional parameter. Omitting the filename outputs a file in the given directory with the default filename (netlify-types.ts).

npx netlify-ts config.yml src/my-types.ts

Programmatically

In case the CLI doesn't suit your workflow or you need to invoke the type generation inside your code, the project exposes a function that returns the generated types as a string.

Config file

const fs = require("fs");
const createNetlifyTypes = require("netlify-ts");

const types = createNetlifyTypes("config.yml");
fs.writeFileSync("cms-types.ts", types);

Config object

const fs = require("fs");
const createNetlifyTypes = require("netlify-ts");

const cmsConfig = { collections: [ ... ] };

const types = createNetlifyTypes(cmsConfig);
fs.writeFileSync("cms-types.ts", types);

Options

Option Default Description
label true Use 'label_singular' or 'label' as type name
capitalize false Capitalize type names
delimiter _ Type name delimiter, e.g. 'Posts_Author'

CLI example

npx netlify-ts config.yml --capitalize

Code example

createNetlifyTypes("config.yml", { capitalize: true });

License

MIT