使用 Strapi 进行 TypeScript 开发

页面摘要： TypeScript 开发展示了 Strapi 的自动补全类型、ts:generate-types 生成模式类型，以及通过 strapi() 或 strapi.compile() 以编程方式启动服务器。本文档涉及插件构建以及管理已生成的类型定义。

在使用 Strapi 开发基于 TypeScript 的应用时，你可以：

• 访问 Strapi 类的类型定义（typings）以获得自动补全，
• 为项目中的内容类型生成类型定义，
• 以编程方式启动 Strapi，
• 并遵循一些针对 TypeScript 插件开发 的特定说明。

使用 Strapi TypeScript 类型定义

Strapi 在 Strapi 类上提供类型定义，以增强 TypeScript 开发体验。这些类型定义附带自动补全功能，可在开发时自动提供建议。

要在开发 Strapi 应用时体验基于 TypeScript 的自动补全，你可以尝试以下操作：

1. 在代码编辑器中打开 ./src/index.ts 文件。

2. 从 @strapi/strapi 导入 Core 类型，并在全局 register 方法中将 strapi 参数声明为 Core.Strapi 类型：

   import type { Core } from '@strapi/strapi';
   
   export default {
     register({ strapi }: { strapi: Core.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

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

修复生成类型导致的构建问题

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

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

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

不过，如果你仍想在项目中使用生成的类型，但不希望 Strapi 使用它们，一个变通方案是：将这些生成的类型复制并粘贴到 generated 目录之外（这样在重新生成类型时它们不会被覆盖），并从文件底部移除 declare module '@strapi/types'。

以编程方式启动 Strapi

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

使用 strapi() 工厂函数 {#use-the-createstrapi-factory}

可以通过 strapi() 工厂函数以编程方式运行 Strapi。由于 TypeScript 项目的代码会被编译到特定目录，因此应向工厂函数传入参数 distDir 以指明应从何处读取已编译代码：

const strapi = require('@strapi/strapi');
const app = strapi.createStrapi({ 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());

使用 TypeScript 开发插件

可以按照插件开发文档生成新插件，确保在 CLI 工具提示时选择 "TypeScript"。

对于 TypeScript 应用，有 2 个重要的区别需要注意：

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