TypeScript support

🚧 TypeScript documentation

This section is still a work in progress and will continue to be updated and improved. Migrating existing Strapi applications written in JavaScript is not currently recommended. In the meantime, feel free to ask for help on the forum (opens new window) or on the community Discord (opens new window).

TypeScript adds an additional type system layer above JavaScript, which means that existing JavaScript code is also TypeScript code. Strapi supports TypeScript in new and existing projects running v4.2.0 and above. The core Developer Documentation contains code snippets in both JavaScript and TypeScript.

Create a new TypeScript project

Create a Strapi project with Typescript support by using the --ts or --typescript flags with either the npm or yarn package manager.

💡 TIP

Adding the --quickstart flag in addition to the --ts flag will create a TypeScript project with an SQLite database.

Understand TypeScript support

TypeScript-enabled Strapi applications have a dist directory at the project root and 2 tsconfig.json files (see project structure).

TypeScript-Specific directories and files	Purpose	Location
./dist directory	Adds the location for compiling the project JavaScript source code.	application root
build directory	Contains the compiled administration panel JavaScript source code. The directory is created on the first yarn build or npm run build command	./dist/
tsconfig.json file	Manages TypeScript compilation for the server.	application root
tsconfig.json file	Manages TypeScript compilation for the admin panel.	./src/admin/

Starting the development environment for a TypeScript-enabled project requires building the admin panel prior to starting the server. In development mode, the application source code is compiled to the ./dist/build directory and recompiled with each change in the Content-type Builder. To start the application run the following commands in the application root directory:

Develop a plugin using TypeScript

New plugins can be generated following the plugins development documentation. There are 2 important distinctions for TypeScript applications:

• After creating the plugin, run yarn install or npm run install in the plugin directory src/admin/plugins/[my-plugin-name] to install the dependencies for the plugin.
• Run yarn build or npm run build in the plugin directory src/admin/plugins/[my-plugin-name] to build the admin panel including the plugin.

✏️ NOTE

It is not necessary to repeat the yarn install or npm run install command after the initial installation. The yarn build or npm run build command is necessary to implement any plugin development that affects the admin panel.