From 07170510db11f91385a8f1a4beb8be287a666563 Mon Sep 17 00:00:00 2001 From: Shaun Brown Date: Tue, 14 Jun 2022 06:12:27 +0200 Subject: [PATCH 01/15] Remove TypeScript create section from TypeScript page --- .../latest/development/typescript.md | 34 ------------------- 1 file changed, 34 deletions(-) diff --git a/docs/developer-docs/latest/development/typescript.md b/docs/developer-docs/latest/development/typescript.md index a9361302cd..c56149e2fb 100644 --- a/docs/developer-docs/latest/development/typescript.md +++ b/docs/developer-docs/latest/development/typescript.md @@ -12,40 +12,6 @@ This section is still a work in progress and will continue to be updated and imp 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](/developer-docs/latest/setup-deployment-guides/installation/cli.md#creating-a-strapi-project). -::: - - - - - - - -```sh -npx create-strapi-app@beta my-app --ts -#or -npx create-strapi-app@beta my-app --typescript -``` - - - - - - - ## Understand TypeScript support TypeScript-enabled Strapi applications have a specific [project structure](/developer-docs/latest/setup-deployment-guides/file-structure.md) with the following dedicated folders and configuration files: From 209aa43653747289cf5627909400f2d3e311cdca Mon Sep 17 00:00:00 2001 From: Shaun Brown Date: Tue, 14 Jun 2022 06:27:38 +0200 Subject: [PATCH 02/15] remove Understand Typescript from TypeScript page --- .../latest/development/typescript.md | 33 ------------------- 1 file changed, 33 deletions(-) diff --git a/docs/developer-docs/latest/development/typescript.md b/docs/developer-docs/latest/development/typescript.md index c56149e2fb..8f470e708f 100644 --- a/docs/developer-docs/latest/development/typescript.md +++ b/docs/developer-docs/latest/development/typescript.md @@ -12,40 +12,7 @@ This section is still a work in progress and will continue to be updated and imp 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. -## Understand TypeScript support -TypeScript-enabled Strapi applications have a specific [project structure](/developer-docs/latest/setup-deployment-guides/file-structure.md) with the following dedicated folders and configuration files: - -| 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 root directory: - - - - - -```sh -npm run build -npm run develop -``` - - - - - -```sh -yarn build -yarn develop -``` - - - - ## Use TypeScript typings From 740baa44ee425c23452fb577fe651b90efc54e9b Mon Sep 17 00:00:00 2001 From: Shaun Brown Date: Tue, 14 Jun 2022 06:35:30 +0200 Subject: [PATCH 03/15] create TypeScript config page --- .../configurations/optional/typescript.md | 45 +++++++++++++++++++ 1 file changed, 45 insertions(+) create mode 100644 docs/developer-docs/latest/setup-deployment-guides/configurations/optional/typescript.md diff --git a/docs/developer-docs/latest/setup-deployment-guides/configurations/optional/typescript.md b/docs/developer-docs/latest/setup-deployment-guides/configurations/optional/typescript.md new file mode 100644 index 0000000000..75d951ec4b --- /dev/null +++ b/docs/developer-docs/latest/setup-deployment-guides/configurations/optional/typescript.md @@ -0,0 +1,45 @@ +--- +title: TypeScript configuration - Strapi Developer Docs +description: Details for the configuration of TypeScript projects +sidebarDepth: 3 +canonicalUrl: https://docs.strapi.io/developer-docs/latest/setup-deployment-guides/configurations/optional/sso.html +--- + +# TypeScript project configuration + + + +## Understand TypeScript support + +TypeScript-enabled Strapi applications have a specific [project structure](/developer-docs/latest/setup-deployment-guides/file-structure.md) with the following dedicated folders and configuration files: + +| 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 root directory: + + + + + +```sh +npm run build +npm run develop +``` + + + + + +```sh +yarn build +yarn develop +``` + + + + \ No newline at end of file From 2306a12617c6013fb30f3d76e1e952c8c8ec5785 Mon Sep 17 00:00:00 2001 From: Shaun Brown Date: Tue, 14 Jun 2022 07:03:34 +0200 Subject: [PATCH 04/15] Edit TypeScript config introduction --- .../configurations/optional/typescript.md | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/docs/developer-docs/latest/setup-deployment-guides/configurations/optional/typescript.md b/docs/developer-docs/latest/setup-deployment-guides/configurations/optional/typescript.md index 75d951ec4b..b903e12ee5 100644 --- a/docs/developer-docs/latest/setup-deployment-guides/configurations/optional/typescript.md +++ b/docs/developer-docs/latest/setup-deployment-guides/configurations/optional/typescript.md @@ -7,10 +7,6 @@ canonicalUrl: https://docs.strapi.io/developer-docs/latest/setup-deployment-guid # TypeScript project configuration - - -## Understand TypeScript support - TypeScript-enabled Strapi applications have a specific [project structure](/developer-docs/latest/setup-deployment-guides/file-structure.md) with the following dedicated folders and configuration files: | TypeScript-Specific directories and files | Purpose | Location | @@ -42,4 +38,4 @@ yarn develop - \ No newline at end of file + From 6358fe70f1d8e4931d8df8996b150a347af144f2 Mon Sep 17 00:00:00 2001 From: Shaun Brown Date: Tue, 14 Jun 2022 07:56:23 +0200 Subject: [PATCH 05/15] Change title and add links for project, install and config --- docs/developer-docs/latest/development/typescript.md | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/docs/developer-docs/latest/development/typescript.md b/docs/developer-docs/latest/development/typescript.md index 8f470e708f..30540418c4 100644 --- a/docs/developer-docs/latest/development/typescript.md +++ b/docs/developer-docs/latest/development/typescript.md @@ -4,15 +4,13 @@ description: Learn how you can use Typescript for your Strapi application. canonicalUrl: https://docs.strapi.io/developer-docs/latest/setup-deployment-guides/configurations/databases/typescript.html --- -# TypeScript support +# TypeScript development ::: callout šŸš§ 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](https://forum.strapi.io/) or on the community [Discord](https://discord.strapi.io). +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](https://forum.strapi.io/) or on the community [Discord](https://discord.strapi.io). Check the [beta documentation](docs-next.strapi.io) for faster access to TypeScript documentation. ::: -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. - - +TypeScript adds an additional type system layer above JavaScript, which means that existing JavaScript code is also TypeScript code. Strapi supports TypeScript in new projects on v4.2.0 and above. The [CLI documentation](/developer-docs/latest/setup-deployment-guides/installation/cli.md) describes how to develop a new TypeScript project. Additionally, the [project structure](/developer-docs/latest/setup-deployment-guides/file-structure.md) and [optional configurations](/developer-docs/latest/setup-deployment-guides/configurations/optional/typescript.md) sections have TypeScript-specific resources. The core Developer Documentation contains code examples in both JavaScript and TypeScript. ## Use TypeScript typings @@ -41,7 +39,6 @@ export default { :::: - ## Develop a plugin using TypeScript New plugins can be generated following the [plugins development documentation](/developer-docs/latest/development/plugins-development.md). There are 2 important distinctions for TypeScript applications: From 7bd050f2fc580039cded16ac445bde71cb4b2088 Mon Sep 17 00:00:00 2001 From: Shaun Brown Date: Tue, 14 Jun 2022 08:29:50 +0200 Subject: [PATCH 06/15] Add typescript config page to sidebar --- docs/.vuepress/config/sidebar-developer.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/docs/.vuepress/config/sidebar-developer.js b/docs/.vuepress/config/sidebar-developer.js index 738b638158..d615e5d8a9 100644 --- a/docs/.vuepress/config/sidebar-developer.js +++ b/docs/.vuepress/config/sidebar-developer.js @@ -105,7 +105,11 @@ const developer = [ '/developer-docs/latest/setup-deployment-guides/configurations/optional/rbac.md', 'Role-Based Access Control (RBAC)', ], + [ + '/developer-docs/latest/setup-deployment-guides/configurations/optional/typescript.md', + 'TypeScript', ], + ], }, ], }, From 20ddf9888fa84308f07287ed09314759da55104d Mon Sep 17 00:00:00 2001 From: Shaun Brown Date: Tue, 14 Jun 2022 08:53:42 +0200 Subject: [PATCH 07/15] fix spelling --- docs/developer-docs/latest/development/typescript.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/developer-docs/latest/development/typescript.md b/docs/developer-docs/latest/development/typescript.md index 30540418c4..225be298e7 100644 --- a/docs/developer-docs/latest/development/typescript.md +++ b/docs/developer-docs/latest/development/typescript.md @@ -54,7 +54,7 @@ It is not necessary to repeat the `yarn install` or `npm run install` command af Instantiating Strapi programmatically in a TypeScript project requires additional configurations to load everything correctly. The primary difference for TypeScript programmatic use is that the codebase and compiled code are stored in separate directories, whereas the same directory is used to read and write in native JavaScript. -### Understand programatic use +### Understand programmatic use When instantiating Strapi programmatically using the default export of `@strapi/strapi`, different parameters such as the `app` directory and the `dist` directory can be passed. The `app` directory is the project root directory and `dist` is a subdirectory of `app`. The `dist` directory represents the compiled project, with the same directory structure as the `app` directory, and the `app` directory represents the codebase (TypeScript or JavaScript). The main differences are: From c9f002baa87fe773eeb8e025c2a00178f1a10d18 Mon Sep 17 00:00:00 2001 From: Shaun Brown Date: Tue, 14 Jun 2022 09:28:01 +0200 Subject: [PATCH 08/15] delete typings and programmatic content --- .../latest/development/typescript.md | 139 ------------------ 1 file changed, 139 deletions(-) diff --git a/docs/developer-docs/latest/development/typescript.md b/docs/developer-docs/latest/development/typescript.md index 225be298e7..06bca544f8 100644 --- a/docs/developer-docs/latest/development/typescript.md +++ b/docs/developer-docs/latest/development/typescript.md @@ -12,33 +12,6 @@ This section is still a work in progress and will continue to be updated and imp TypeScript adds an additional type system layer above JavaScript, which means that existing JavaScript code is also TypeScript code. Strapi supports TypeScript in new projects on v4.2.0 and above. The [CLI documentation](/developer-docs/latest/setup-deployment-guides/installation/cli.md) describes how to develop a new TypeScript project. Additionally, the [project structure](/developer-docs/latest/setup-deployment-guides/file-structure.md) and [optional configurations](/developer-docs/latest/setup-deployment-guides/configurations/optional/typescript.md) sections have TypeScript-specific resources. The core Developer Documentation contains code examples in both JavaScript and TypeScript. -## Use TypeScript typings - -Strapi provides typings on the Strapi class to improve the TypeScript experience. In the following example a `register` method is added to `./src/index.ts`. For example, when the `strapi.runLifecyclesFunctions` method is added, a list of available lifecycle types (`register`, `bootstrap` and `destroy`) are returned by the code editor. The following example is illustrated statically and the second tab shows an animated example. - -:::: tabs card - -::: tab STATIC EXAMPLE - -```ts -// path: ./src/index.ts - -import '@strapi/strapi'; - -export default { - - register( {strapi }: { strapi: Strapi }) { - strapi.runLifecyclesFunctions('register') .then(() => console.log('hello world') - ) - - }, -}; -``` - -::: - -:::: - ## Develop a plugin using TypeScript New plugins can be generated following the [plugins development documentation](/developer-docs/latest/development/plugins-development.md). There are 2 important distinctions for TypeScript applications: @@ -50,115 +23,3 @@ New plugins can be generated following the [plugins development documentation](/ 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. ::: -## Start Strapi programmatically - -Instantiating Strapi programmatically in a TypeScript project requires additional configurations to load everything correctly. The primary difference for TypeScript programmatic use is that the codebase and compiled code are stored in separate directories, whereas the same directory is used to read and write in native JavaScript. - -### Understand programmatic use - -When instantiating Strapi programmatically using the default export of `@strapi/strapi`, different parameters such as the `app` directory and the `dist` directory can be passed. The `app` directory is the project root directory and `dist` is a subdirectory of `app`. The `dist` directory represents the compiled project, with the same directory structure as the `app` directory, and the `app` directory represents the codebase (TypeScript or JavaScript). The main differences are: - -- When using the Content-type Builder to create, update, delete content types (or any other service that creates files), Strapi uses the `app` folder to write the files. -- When reading what content types exist on the system Strapi reads the `dist` folder. -- When the `develop` command is used only the `app` directory is watched. In TypeScript, a compilation will be triggered when a change is detected in the `app` directory and the output will be written to the `dist` directory. - -::: note -The public folder is considered static and thus ignores the `app` and `dist` directories. -::: - -The default values for the `app` and `dist` directories are transformed and assigned using one of the following options: - -```js - -const resolveWorkingDirectories = opts => { - const cwd = process.cwd(); // Neither the appDir or distDir are passed. Both the appDir and distDir are set to process.cwd(). - - const appDir = opts.appDir ? path.resolve(cwd, opts.appDir) : cwd; // Only appDir is defined distDir matches appDir. - - const distDir = opts.distDir ? path.resolve(cwd, opts.distDir) : appDir; // Only distDir is defined, appDir is set to process.cwd(). - - return { appDir, distDir }; -} - -``` - -For example, if the compiled code is stored in a separate directory (eg: when using TypeScript) Strapi should be instantiated with a specificĀ `distDir`Ā value which matches the path of your build directory. - -::: caution -Do not set theĀ `appDir`Ā to the `build` or `dist` directory as it could cause issues when the app tries to write some files. -::: - -### Start Strapi programmatically examples - -Start Strapi for JavaScript applications: - -```js -const strapi = require('@strapi/strapi'); - -strapi(); -// appDir => process.cwd() | distDir => process.cwd() - -``` - -Start Strapi using a custom `dist` directory: - -```js -const strapi = require('@strapi/strapi'); - -strapi({ distDir: './dist' }); -// appDir => process.cwd() | distDir => './dist' -``` - -Start Strapi using custom `app` and `dist` directories: - -```js - -const strapi = require('@strapi/strapi'); - -strapi({ distDir: './dist' }); -// appDir => process.cwd() | distDir => './dist' - -``` - -Start Strapi using a custom `app` directory: - -```js - -const strapi = require('@strapi/strapi'); - -strapi({ appDir: './app' }); -// appDir => './app' | distDir => './app' - -``` - -### Use both JavaScript and TypeScript codebases when starting Strapi programmatically - -Adding the package `@strapi/typescript-utils` allows for both JavaScript and TypeScript codebases to be used programatically. A common use is for creating command line interface tools or developing a plugin. Examples of how to incorporate both code bases: - -```js -const tsUtils = require('@strapi/typescript-utils'); -const strapi = require('@strapi/strapi'); - -const appDir = process.cwd(); - -// Automatically detect if this is a Typescript project: -const isTSProject = await tsUtils.isUsingTypeScript(appDir); - -// Resolve the directory containing the compilation output: -const outDir = await tsUtils.resolveOutDir(appDir); - -if (isTSProject) { -// If inside a Typescript project, compile the TypeScript code in the appDir: - await tsUtils.compile(appDir, { - watch: false, - configOptions: { options: { incremental: true } }, - }); -} - -// If inside a Typescript project, use a custom dist directory, otherwise set it to appDir value: -const distDir = isTSProject ? outDir : appDir; - -// Start the app by providing the app and dist directories: -const app = await strapi({ appDir, distDir }).load(); - -``` From 5f8b525b66ed8250bec8907085d9ee86c1b87902 Mon Sep 17 00:00:00 2001 From: Shaun Brown <97027841+StrapiShaun@users.noreply.github.com> Date: Tue, 14 Jun 2022 11:00:32 +0200 Subject: [PATCH 09/15] Update docs/developer-docs/latest/development/typescript.md Co-authored-by: Pierre Wizla --- docs/developer-docs/latest/development/typescript.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/developer-docs/latest/development/typescript.md b/docs/developer-docs/latest/development/typescript.md index 06bca544f8..549ff61236 100644 --- a/docs/developer-docs/latest/development/typescript.md +++ b/docs/developer-docs/latest/development/typescript.md @@ -10,7 +10,7 @@ canonicalUrl: https://docs.strapi.io/developer-docs/latest/setup-deployment-guid 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](https://forum.strapi.io/) or on the community [Discord](https://discord.strapi.io). Check the [beta documentation](docs-next.strapi.io) for faster access to TypeScript documentation. ::: -TypeScript adds an additional type system layer above JavaScript, which means that existing JavaScript code is also TypeScript code. Strapi supports TypeScript in new projects on v4.2.0 and above. The [CLI documentation](/developer-docs/latest/setup-deployment-guides/installation/cli.md) describes how to develop a new TypeScript project. Additionally, the [project structure](/developer-docs/latest/setup-deployment-guides/file-structure.md) and [optional configurations](/developer-docs/latest/setup-deployment-guides/configurations/optional/typescript.md) sections have TypeScript-specific resources. The core Developer Documentation contains code examples in both JavaScript and TypeScript. +TypeScript adds an additional type system layer above JavaScript, which means that existing JavaScript code is also TypeScript code. Strapi supports TypeScript in new projects on v4.2.0 and above. The [CLI documentation](/developer-docs/latest/setup-deployment-guides/installation/cli.md) describes how to create a new TypeScript project. Additionally, the [project structure](/developer-docs/latest/setup-deployment-guides/file-structure.md) and [optional configurations](/developer-docs/latest/setup-deployment-guides/configurations/optional/typescript.md) sections have TypeScript-specific resources. The Developer Documentation contains code examples in both JavaScript and TypeScript. ## Develop a plugin using TypeScript From 82874aca4f138f15fd7eec392890dbdf8f03f259 Mon Sep 17 00:00:00 2001 From: Shaun Brown Date: Tue, 14 Jun 2022 11:30:36 +0200 Subject: [PATCH 10/15] update intro and add callout --- docs/developer-docs/latest/development/typescript.md | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/docs/developer-docs/latest/development/typescript.md b/docs/developer-docs/latest/development/typescript.md index 549ff61236..3bd7ae07cf 100644 --- a/docs/developer-docs/latest/development/typescript.md +++ b/docs/developer-docs/latest/development/typescript.md @@ -10,7 +10,12 @@ canonicalUrl: https://docs.strapi.io/developer-docs/latest/setup-deployment-guid 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](https://forum.strapi.io/) or on the community [Discord](https://discord.strapi.io). Check the [beta documentation](docs-next.strapi.io) for faster access to TypeScript documentation. ::: -TypeScript adds an additional type system layer above JavaScript, which means that existing JavaScript code is also TypeScript code. Strapi supports TypeScript in new projects on v4.2.0 and above. The [CLI documentation](/developer-docs/latest/setup-deployment-guides/installation/cli.md) describes how to create a new TypeScript project. Additionally, the [project structure](/developer-docs/latest/setup-deployment-guides/file-structure.md) and [optional configurations](/developer-docs/latest/setup-deployment-guides/configurations/optional/typescript.md) sections have TypeScript-specific resources. The Developer Documentation contains code examples in both JavaScript and TypeScript. +::: prerequisites +To start developing in TypeScript create a new project using the [CLI](/developer-docs/latest/setup-deployment-guides/installation/cli.md) + +::: + +TypeScript adds an additional type system layer above JavaScript, which means that existing JavaScript code is also TypeScript code. Strapi supports TypeScript in new projects on v4.2.0 and above. To start developing in TypeScript use the [CLI documentation](/developer-docs/latest/setup-deployment-guides/installation/cli.md) to create a new TypeScript project. Additionally, the [project structure](/developer-docs/latest/setup-deployment-guides/file-structure.md) and [TypeScript configuration](/developer-docs/latest/setup-deployment-guides/configurations/optional/typescript.md) sections have TypeScript-specific resources for understanding and configuring an application. The Developer Documentation contains code examples in both JavaScript and TypeScript. ## Develop a plugin using TypeScript From af0078d949caa96a1f2bfac4aa7c518f2eda2672 Mon Sep 17 00:00:00 2001 From: Shaun Brown Date: Tue, 14 Jun 2022 11:45:56 +0200 Subject: [PATCH 11/15] Change table column order --- docs/developer-docs/latest/development/typescript.md | 1 - 1 file changed, 1 deletion(-) diff --git a/docs/developer-docs/latest/development/typescript.md b/docs/developer-docs/latest/development/typescript.md index 3bd7ae07cf..77a0cf2f91 100644 --- a/docs/developer-docs/latest/development/typescript.md +++ b/docs/developer-docs/latest/development/typescript.md @@ -27,4 +27,3 @@ New plugins can be generated following the [plugins development documentation](/ ::: 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. ::: - From 98b507d6bf3a8127611252edb743ded46c5e6353 Mon Sep 17 00:00:00 2001 From: Shaun Brown Date: Tue, 14 Jun 2022 11:52:33 +0200 Subject: [PATCH 12/15] add link --- .../configurations/optional/typescript.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/docs/developer-docs/latest/setup-deployment-guides/configurations/optional/typescript.md b/docs/developer-docs/latest/setup-deployment-guides/configurations/optional/typescript.md index b903e12ee5..bcdad00858 100644 --- a/docs/developer-docs/latest/setup-deployment-guides/configurations/optional/typescript.md +++ b/docs/developer-docs/latest/setup-deployment-guides/configurations/optional/typescript.md @@ -7,14 +7,14 @@ canonicalUrl: https://docs.strapi.io/developer-docs/latest/setup-deployment-guid # TypeScript project configuration -TypeScript-enabled Strapi applications have a specific [project structure](/developer-docs/latest/setup-deployment-guides/file-structure.md) with the following dedicated folders and configuration files: - -| 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/` | +[TypeScript](/developer-docs/latest/development/typescript.md)-enabled Strapi applications have a specific [project structure](/developer-docs/latest/setup-deployment-guides/file-structure.md) with the following dedicated folders and configuration files: + +| TypeScript-specific directories and files | Location | Purpose | +|-------------------------------------------|------------------|---------------------------------------------------------------------------------------------------------------------------------------------------| +| `./dist` directory | application root | Adds the location for compiling the project JavaScript source code. | +| `build` directory | `./dist` | Contains the compiled administration panel JavaScript source code. The directory is created on the first `yarn build` or `npm run build` command | +| `tsconfig.json` file | application root | Manages TypeScript compilation for the server. | +| `tsconfig.json` file | `./src/admin/` | Manages TypeScript compilation for the admin panel. | 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 root directory: From c6c038ebe70ab3986dd6ddbffb340f8da5f2bca4 Mon Sep 17 00:00:00 2001 From: Shaun Brown <97027841+StrapiShaun@users.noreply.github.com> Date: Tue, 14 Jun 2022 11:55:33 +0200 Subject: [PATCH 13/15] Update docs/developer-docs/latest/development/typescript.md Co-authored-by: meganelacheny --- docs/developer-docs/latest/development/typescript.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/docs/developer-docs/latest/development/typescript.md b/docs/developer-docs/latest/development/typescript.md index 77a0cf2f91..31d2ef5a9c 100644 --- a/docs/developer-docs/latest/development/typescript.md +++ b/docs/developer-docs/latest/development/typescript.md @@ -15,7 +15,11 @@ To start developing in TypeScript create a new project using the [CLI](/develope ::: -TypeScript adds an additional type system layer above JavaScript, which means that existing JavaScript code is also TypeScript code. Strapi supports TypeScript in new projects on v4.2.0 and above. To start developing in TypeScript use the [CLI documentation](/developer-docs/latest/setup-deployment-guides/installation/cli.md) to create a new TypeScript project. Additionally, the [project structure](/developer-docs/latest/setup-deployment-guides/file-structure.md) and [TypeScript configuration](/developer-docs/latest/setup-deployment-guides/configurations/optional/typescript.md) sections have TypeScript-specific resources for understanding and configuring an application. The Developer Documentation contains code examples in both JavaScript and TypeScript. +TypeScript adds an additional type system layer above JavaScript, which means that existing JavaScript code is also TypeScript code. Strapi supports TypeScript in new projects on v4.2.0 and above. TypeScript-enabled projects allow developing plugins with TypeScript as well as using TypeScript typings. + +::: strapi Getting started with TypeScript +To start developing in TypeScript, use the [CLI documentation](/developer-docs/latest/setup-deployment-guides/installation/cli.md) to create a new TypeScript project. Additionally, the [project structure](/developer-docs/latest/setup-deployment-guides/file-structure.md) and [TypeScript configuration](/developer-docs/latest/setup-deployment-guides/configurations/optional/typescript.md) sections have TypeScript-specific resources for understanding and configuring an application. +::: ## Develop a plugin using TypeScript From d673cde784ea8a2db9bfe86c550beca581497707 Mon Sep 17 00:00:00 2001 From: Shaun Brown Date: Tue, 14 Jun 2022 11:58:12 +0200 Subject: [PATCH 14/15] Move development back to development page --- .../latest/development/typescript.md | 31 ++++++++++++++++--- .../configurations/optional/typescript.md | 24 -------------- 2 files changed, 26 insertions(+), 29 deletions(-) diff --git a/docs/developer-docs/latest/development/typescript.md b/docs/developer-docs/latest/development/typescript.md index 31d2ef5a9c..1896941f28 100644 --- a/docs/developer-docs/latest/development/typescript.md +++ b/docs/developer-docs/latest/development/typescript.md @@ -10,17 +10,38 @@ canonicalUrl: https://docs.strapi.io/developer-docs/latest/setup-deployment-guid 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](https://forum.strapi.io/) or on the community [Discord](https://discord.strapi.io). Check the [beta documentation](docs-next.strapi.io) for faster access to TypeScript documentation. ::: -::: prerequisites -To start developing in TypeScript create a new project using the [CLI](/developer-docs/latest/setup-deployment-guides/installation/cli.md) - -::: - TypeScript adds an additional type system layer above JavaScript, which means that existing JavaScript code is also TypeScript code. Strapi supports TypeScript in new projects on v4.2.0 and above. TypeScript-enabled projects allow developing plugins with TypeScript as well as using TypeScript typings. ::: strapi Getting started with TypeScript To start developing in TypeScript, use the [CLI documentation](/developer-docs/latest/setup-deployment-guides/installation/cli.md) to create a new TypeScript project. Additionally, the [project structure](/developer-docs/latest/setup-deployment-guides/file-structure.md) and [TypeScript configuration](/developer-docs/latest/setup-deployment-guides/configurations/optional/typescript.md) sections have TypeScript-specific resources for understanding and configuring an application. ::: +## Start developing in TypeScript + +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 root directory: + + + + + +```sh +npm run build +npm run develop +``` + + + + + +```sh +yarn build +yarn develop +``` + + + + + ## Develop a plugin using TypeScript New plugins can be generated following the [plugins development documentation](/developer-docs/latest/development/plugins-development.md). There are 2 important distinctions for TypeScript applications: diff --git a/docs/developer-docs/latest/setup-deployment-guides/configurations/optional/typescript.md b/docs/developer-docs/latest/setup-deployment-guides/configurations/optional/typescript.md index bcdad00858..984ff868a6 100644 --- a/docs/developer-docs/latest/setup-deployment-guides/configurations/optional/typescript.md +++ b/docs/developer-docs/latest/setup-deployment-guides/configurations/optional/typescript.md @@ -15,27 +15,3 @@ canonicalUrl: https://docs.strapi.io/developer-docs/latest/setup-deployment-guid | `build` directory | `./dist` | Contains the compiled administration panel JavaScript source code. The directory is created on the first `yarn build` or `npm run build` command | | `tsconfig.json` file | application root | Manages TypeScript compilation for the server. | | `tsconfig.json` file | `./src/admin/` | Manages TypeScript compilation for the admin panel. | - -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 root directory: - - - - - -```sh -npm run build -npm run develop -``` - - - - - -```sh -yarn build -yarn develop -``` - - - - From 9846b0e49cc1fbabb25206453b53eb4db77c098f Mon Sep 17 00:00:00 2001 From: Shaun Brown Date: Tue, 14 Jun 2022 12:01:33 +0200 Subject: [PATCH 15/15] update top matter --- .../configurations/optional/typescript.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/developer-docs/latest/setup-deployment-guides/configurations/optional/typescript.md b/docs/developer-docs/latest/setup-deployment-guides/configurations/optional/typescript.md index 984ff868a6..170fa17031 100644 --- a/docs/developer-docs/latest/setup-deployment-guides/configurations/optional/typescript.md +++ b/docs/developer-docs/latest/setup-deployment-guides/configurations/optional/typescript.md @@ -1,8 +1,8 @@ --- title: TypeScript configuration - Strapi Developer Docs -description: Details for the configuration of TypeScript projects +description: Details for TypeScript configuration sidebarDepth: 3 -canonicalUrl: https://docs.strapi.io/developer-docs/latest/setup-deployment-guides/configurations/optional/sso.html +canonicalUrl: https://docs.strapi.io/developer-docs/latest/setup-deployment-guides/configurations/optional/typescript.html --- # TypeScript project configuration