Strapi-Plugin-Schemas-to-TS is a plugin for Strapi v4 that automatically converts your Strapi schemas into Typescript interfaces.
In every execution of the Strapi server, it reads all files containing schema definitions, both content types and components. Then generates Typescript interfaces based on those definitions.
The interfaces will only be generated if they don't exist or if there have been changes. Otherwise they will be skipped, preventing the Strapi server to restart (in development) when modifying files.
At the end of the process will delete all interfaces generated in previous executions that are no longer valid, due for instace to a class or component being removed or renamed.
Here are the instructions to install and configure the package:
To install the plugin execute either one of the following commands:
# Using Yarn
yarn add strapi-plugin-schemas-to-ts
# Using NPM
npm install strapi-plugin-schemas-to-ts
The plugin needs to be configured in the ./config/plugins.ts
file of Strapi. The file might need to be created if it does not exists. In that file, the plugin must be enabled in order for it to work:
export default {
// ...
'schemas-to-ts': {
enabled: true,
},
// ...
}
While the previous example is enough to get it working, there are other properties that can be configured. Their default values are the ones in this example:
export default {
// ...
'schemas-to-ts': {
enabled: true,
config: {
acceptedNodeEnvs: ["development"],
commonInterfacesFolderName: 'schemas-to-ts',
alwaysAddEnumSuffix: false,
alwaysAddComponentSuffix: false,
usePrettierIfAvailable: true,
logLevel: 2,
destinationFolder: undefined,
}
},
// ...
}
common
interfaces (see below) will be generated in the ./src/common/{commonInterfacesFolderName}
folder. If there's no value assigned to this property, or in case the value is empty ("") it will use the default value, so it will be ./src/common/schemas-to-ts
.Enum
suffix. For instance: CarType
would become CarTypeEnum
.Component
suffix. For instance: CarBrand
would become CarBrandComponent
.destinationFolder ➡️ Undefined by default, if it holds a value, it's expected to be a subfolder path within the Strapi folder. This folder will be the destination folder for all the generated interfaces. If this option is set, it will superseed the one set in commonInterfacesFolderName
.
Inside the destination folder, 3 subfolders will be created:
Also, a number of rules have been created to ensure the destination path is valid:
Apart from that, almost any text will be valid. Some examples of valid values are:
There are 3 different interface sources: API, Component & Common.
For every schema, different types of interfaces will be generated. That is because Strapi v4 does not always represent the data using the same structure.
attributes
property.attributes
property, so the id property and the rest of the properties are at the same level.Strapi enumeration attributes will be generated as typescript enums. However there are some considerations regarding enum names:
Here's an example of the last two points:
export enum Year {
Starting2012 = 'Starting-2012',
_2013 = '2013',
Ending2014 = 'Ending-2014'
}
src/components/{component collection name}/interfaces
. The component collection name
value is the folder where the component schema is located.src/common/{commonInterfacesFolderName}
. The commonInterfacesFolderName
value is a config property of this plugin.The Cli allows to execute some functions without the need to run Strapi. As the Cli has been added to the scripts and the bin sections of the package.json, it can be executed with schemas-to-ts
.
As it provides help, this command will print it out:
schemas-to-ts --help
All command parameters are case sensitive and can be written both in camel case and in kebab case. You can see more about command parameters using the help:
schemas-to-ts {CommandName} --help
deleteAllGeneratedFiles
This command deletes all files that have a first line with the text '// Interface automatically generated by schemas-to-ts'. It allows this parameters:
Examples:
schemas-to-ts deleteAllGeneratedFiles --strapi-root-path /path/to/strapi
schemas-to-ts deleteAllGeneratedFiles --strapi-root-path /path/to/strapi --logLevel Information
generateInterfaces
This command generates TypeScript interfaces for your Strapi project. It allows this parameters:
Examples:
schemas-to-ts generateInterfaces --strapi-root-path /path/to/strapi
schemas-to-ts generateInterfaces --strapi-root-path /path/to/strapi --acceptedNodeEnvs staging development,test --commonInterfacesFolderName interfaces --alwaysAddEnumSuffix true --alwaysAddComponentSuffix false --usePrettierIfAvailable false --logLevel Information
schemas-to-ts generateInterfaces --strapi-root-path /path/to/strapi --acceptedNodeEnvs staging development,test --destinationFolder src/schemas-to-ts --alwaysAddEnumSuffix true --alwaysAddComponentSuffix false --usePrettierIfAvailable false --logLevel Information
This project is licensed under the MIT License - see the LICENSE file for details.
Please, review the changelog to know about the differences between published versions of this project.
This project began as a fork of the Types-4-Strapi created by Francesco Lorenzetti, but at the end it was so different on it's purpose (being a plugin Vs being executed on demand) and there was so much new code that I turned it into a new whole project. However the algorithm to convert the schema into an interface is heavily inspired in Francesco's work.