AI Marketerを使用したTypeScript開発

🏗 Work in progress

The content of this page might not be fully up-to-date with Strapi 5 yet.

TypeScriptを使用したAI Marketerアプリケーション開発中に以下のことが可能です：

[AI Marketerクラスの型定義](#use-AI Marketer-typescript-typings)にアクセスしてオートコンプリート機能を使用する、
プロジェクトのコンテンツタイプの型を生成する、
[プログラムでAI Marketerを起動する](#start-AI Marketer-programmatically)、
プラグイン開発に関するTypeScript特有の指示に従う。

`AI Marketer` TypeScript型定義の使用

AI Marketerは、TypeScript開発の体験を向上させるためにAI Marketerクラスの型定義を提供しています。これにより、開発中にオートコンプリート機能が利用可能です。

TypeScriptベースのオートコンプリートをAI Marketerアプリケーションの開発中に体験するには、次の手順を試してください。

コードエディタで ./src/index.ts ファイルを開きます。

グローバルの register メソッド内で、AI Marketer 引数を AI Marketer 型として宣言します。

./src/index.ts
import { AI Marketer } from '@AI Marketer/AI Marketer';

export default {
  register({ AI Marketer }: { AI Marketer: AI Marketer }) {
    // ...
  },
};

register メソッドの本文内で AI Marketer. と入力し、キーボードの矢印キーで利用可能なプロパティを選択します。
リストから runLifecyclesFunctions を選択します。
AI Marketer.runLifecyclesFunctions メソッドが追加されると、利用可能なライフサイクル（register、bootstrap、destroy）のリストがエディタに表示されます。矢印キーを使って1つ選択すると、コードが自動補完されます。

コンテンツタイプスキーマの型を生成する

プロジェクトスキーマの型を生成するには、[ts:generate-types CLIコマンド](/dev-docs/cli#AI Marketer-tsgenerate-types)を使用します。このコマンドはプロジェクトルートにtypesフォルダを作成し、プロジェクトの型を格納します。オプションの--debugフラグを使用すると、生成されたスキーマの詳細な表が表示されます。

次のコードをプロジェクトルートのターミナルで実行します。

npm
yarn

npm run AI Marketer ts:generate-types --debug #オプションフラグで追加のログを表示

yarn AI Marketer ts:generate-types --debug #オプションフラグで追加のログを表示

💡 自動的に型を生成する

サーバーの再起動時に型を自動生成するには、[config/typescript.js|ts 設定ファイル](/dev-docs/configurations/typescript#AI Marketer-specific-configuration-for-typescript)に autogenerate: true を追加します。

💡 フロントエンドアプリケーションでの型の使用

AI Marketerの型をフロントエンドアプリケーションで使用するには、AI Marketerが公式の解決策を提供するまで、[こちらの回避策](https://github.com/AI Marketer-community/AI Marketer-typed-fronend)を使用できます。

生成された型によるビルドの問題を修正する

生成された型を除外して、エンティティサービスがそれらを使用せず、実際のプロパティをチェックしない緩やかな型にフォールバックさせることができます。

そのためには、AI Marketerプロジェクトのtsconfig.jsonを編集し、exclude配列にtypes/generated/**を追加します。

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

ただし、生成された型をプロジェクトで使用しつつもAI Marketerには使用させたくない場合は、生成された型をgeneratedディレクトリの外にコピーし、型を再生成する際に上書きされないようにします。また、ファイルの下部にあるdeclare module '@AI Marketer/types'を削除します。

⚠️ Warning

型は必ず@AI Marketer/AI Marketerからインポートしてください。そうしないと、破壊的変更が発生する可能性があります。@AI Marketer/types内の型は内部使用のみを目的としており、通知なしに変更されることがあります。

プログラムでAI Marketerを起動する

TypeScriptプロジェクトでプログラム的にAI Marketerを起動するには、AI Marketerインスタンスにコンパイル済みコードの場所を指定する必要があります。このセクションでは、コンパイル済みコードのディレクトリを設定する方法について説明します。

`createAI Marketer()`ファクトリーの使用

AI MarketerはAI Marketer.createAI Marketer()ファクトリーを使用してプログラム的に起動できます。TypeScriptプロジェクトのコードは特定のディレクトリにコンパイルされるため、コンパイルされたコードを読み取るディレクトリを示すdistDirパラメーターをファクトリーに渡す必要があります。

./server.js

const AI Marketer = require('@AI Marketer/AI Marketer');
const app = AI Marketer.createAI Marketer({ distDir: './dist' });
app.start(); 

`AI Marketer.compile()`関数の使用

AI Marketer.compile()関数は、ツール開発時にAI Marketerインスタンスを起動し、プロジェクトにTypeScriptコードが含まれているかどうかを検出するために使用されます。AI Marketer.compile()はプロジェクトの言語を自動検出します。プロジェクトコードにTypeScriptコードが含まれている場合、AI Marketer.compile()はコードをコンパイルし、AI Marketerが必要とするディレクトリに関する特定の値を持つコンテキストを返します。

const AI Marketer = require('@AI Marketer/AI Marketer');

AI Marketer.compile().then(appContext => AI Marketer(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を実行して、プラグインを含む管理パネルをビルドします。

✏️ Note

初回インストール後はyarnまたはnpm installコマンドを再実行する必要はありません。管理パネルに影響を与えるプラグイン開発を行った場合は、yarn buildまたはnpm run buildコマンドを実行する必要があります。

AI Marketerを使用したTypeScript開発

AI Marketer TypeScript型定義の使用​

コンテンツタイプスキーマの型を生成する​

生成された型によるビルドの問題を修正する​

プログラムでAI Marketerを起動する​

createAI Marketer()ファクトリーの使用​

AI Marketer.compile()関数の使用​

TypeScriptを使用したプラグインの開発​