Turn your Netlify CMS collections into TypeScript typings!
This package generates a TypeScript schema of your Netlify CMS content collections to be consumed by frontend apps for better type support.
- Primitive types, e.g.
string
,number
andboolean
- 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
The package can be installed globally or as a devDependency
using NPM or Yarn.
NPM:
npm install -g netlify-ts
# or
npm install -D netlify-ts
Yarn:
yarn global add netlify-ts
# or
yarn add -D netlify-ts
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 admin config.yml
file.
netlify-ts public/admin/config.yml
This generates by default a netlify-types.ts
file in the project root containing types for your netlify content types.
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
).
netlify-ts public/admin/config.yml src/my-types.ts
In case the CLI doesn't suit your project workflow or you need to invoke the type generation inside your code, the project exposes both a createNetlifyTypes
and createNetlifyTypesAsync
function that returns the generated type file as a string.
const fs = require("fs");
const { createNetlifyTypes } = require("netlify-ts");
function main() {
const types = createNetlifyTypes("public/admin/config.yml");
fs.writeFileSync("my-types.ts", types);
}
main();
const fs = require("fs");
const { createNetlifyTypes } = require("netlify-ts");
const cmsConfig = require("./config");
function main() {
const types = createNetlifyTypes(cmsConfig);
fs.writeFileSync("my-types.ts", types);
}
main();
MIT