类型支持 TypeScript

TypeScript 在 JavaScript 之上添加了一个额外的类型系统层，这意味着现有的 JavaScript 代码也是 TypeScript 代码。Strapi 在 v4.3.0 及更高版本上支持新项目中的 TypeScript。现有的 JavaScript 项目可以通过转换过程添加 TypeScript 支持。启用 TypeScript 的项目允许使用 TypeScript 开发插件以及使用 TypeScript 类型。

开始使用 TypeScript 进行开发

启动启用 TypeScript 的项目的开发环境需要在启动服务器之前构建管理面板。在开发模式下，应用程序源代码被编译到 ./dist/build 目录中，并在内容类型构建器中每次更改时重新编译。要启动应用程序，请在根目录中运行以下命令：

npm run build
npm run develop

使用 TypeScript 类型

Strapi 在 Strapi 类上提供类型，以改善 TypeScript 开发体验。这些类型带有自动完成功能，可在开发过程中自动提供建议。

要在开发 Strapi 应用程序时体验基于 TypeScript 的自动完成功能，您可以尝试以下操作：

1. 从代码编辑器中打开 ./src/index.ts 文件。
2. 在 register 方法中，将 strapi 参数声明为 Strapi 类型：

import { Strapi } from '@strapi/strapi'
export default {
  register({ strapi }: { strapi: Strapi }) {
    // 在这里实现您的注册逻辑
    // 例如，您可以添加中间件、扩展功能等
  },
}

3. 在 register 方法的主体内，开始输入 strapi. 并使用键盘箭头浏览可用属性。
4. 从列表中选择 runLifecyclesfunctions。
5. 添加 strapi.runLifecyclesFunctions 方法后，代码编辑器将返回可用生命周期类型列表（即 register、bootstrap 和 destroy）。使用键盘箭头选择其中一个生命周期，代码将自动完成。

为项目架构生成类型

要为项目架构生成类型，请使用 ts:generate-types CLI 命令。ts:generate-types 命令在项目根目录中创建文件夹 types，用于存储项目的类型。可选的 --debug 标志返回生成的架构的详细表格。

要使用 ts:generate-types，请在项目根目录的终端中运行以下代码：

npm run strapi ts:generate-types --debug #optional flag to display additional logging

修复生成类型的构建问题

可以排除生成的类型，以便实体服务不使用它们，并回退到不检查内容类型中可用的实际属性的更宽松的类型。

为此，请编辑 Strapi 项目的 tsconfig.json，并将 types/generated/** 添加到 exclude 数组。

{
  // ...
  "exclude": [
    "node_modules/",
    "build/",
    "dist/",
    ".cache/",
    ".tmp/",
    "src/admin/",
    "**/*.test.ts",
    "src/plugins/**",
    "types/generated/**"
  ]
  // ...
}

但是，如果您仍想在项目中使用生成的类型，但又不想让 Strapi 使用它们，那么解决方法是复制这些生成的类型并将其粘贴到 generated 目录之外（这样当重新生成类型时它们不会被覆盖）并删除文件底部的 declare module '@strapi/types'。

使用 TypeScript 开发插件

可以按照 插件开发文档 生成新插件。 TypeScript 应用程序有 2 个重要区别：

• 创建插件后，在插件目录“src/admin/plugins/my-plugin-name”中运行“yarn”或“npm install”以安装插件的依赖项。
• 在插件目录“src/admin/plugins/my-plugin-name”中运行“yarn build”或“npm run build”以构建包含插件的管理面板。

以编程方式启动 Strapi

要在 TypeScript 项目中以编程方式启动 Strapi，Strapi 实例需要编译的代码位置。本节介绍如何设置和指示编译的代码目录。

使用 strapi() 工厂

Strapi 可以通过使用 strapi() 工厂以编程方式运行。由于 TypeScript 项目的代码是在特定目录中编译的，因此应将参数 distDir 传递给工厂以指示应在何处读取编译后的代码：

const strapi = require('@strapi/strapi')
const app = strapi({ distDir: './dist' })
app.start()

使用 strapi.compile() 函数

strapi.compile() 函数主要用于开发需要启动 Strapi 实例并检测项目是否包含 TypeScript 代码的工具。strapi.compile() 会自动检测项目语言。如果项目代码包含任何 TypeScript 代码，strapi.compile() 会编译代码并返回一个上下文，其中包含 Strapi 所需目录的特定值：

const strapi = require('@strapi/strapi')

strapi.compile().then(appContext => strapi(appContext).start())

向现有 Strapi 项目添加 TypeScript 支持

向现有项目添加 TypeScript 支持需要添加 2 个 tsconfig.json 文件并重建管理面板。此外，还可以选择删除 eslintrc 和 eslintignore 文件。应在根“tsconfig.json”文件中将 TypeScript 标志“allowJs”设置为“true”，以逐步将 TypeScript 文件添加到现有 JavaScript 项目中。“allowJs”标志允许“.ts”和“.tsx”文件与 JavaScript 文件共存。

可以使用以下步骤将 TypeScript 支持添加到现有 Strapi 项目中：

1. 在项目根目录中添加一个“tsconfig.json”文件，并将以下带有“allowJs”标志的代码复制到该文件中：

{
  "extends": "@strapi/typescript-utils/tsconfigs/server",
  "compilerOptions": {
    "outDir": "dist",
    "rootDir": ".",
    "allowJs": true // enables the build without .ts files
  },
  "include": ["./", "src/**/*.json"],
  "exclude": [
    "node_modules/",
    "build/",
    "dist/",
    ".cache/",
    ".tmp/",
    "src/admin/",
    "**/*.test.ts",
    "src/plugins/**"
  ]
}

2. 在 ./src/admin/ 目录中添加 tsconfig.json 文件，并将以下代码复制到该文件中：

{
  "extends": "@strapi/typescript-utils/tsconfigs/admin",
  "include": ["../plugins/**/admin/src/**/*", "./"],
  "exclude": ["node_modules/", "build/", "dist/", "**/*.test.ts"]
}

3. （可选）从项目根目录中删除 .eslintrc 和 .eslintignore 文件。
4. 在 database.ts 配置文件中的 filename 属性中添加额外的 '..'（仅 SQLite 数据库需要）：

const path = require('node:path')

module.exports = ({ env }) => ({
  connection: {
    client: 'sqlite',
    connection: {
      filename: path.join(
        __dirname,
        '..',
        '..',
        env('DATABASE_FILENAME', '.tmp/data.db')
      ),
    },
    useNullAsDefault: true,
  },
})

5.重建管理面板并启动开发服务器：

codes

npm run build
npm run develop

yarn build
yarn develop

::

完成上述步骤后，项目根目录下将添加一个“dist”目录，并且该项目可以访问与新的 TypeScript 支持的 Strapi 项目相同的 TypeScript 功能。